/* HCMS 3.0 Design Tokens
   Based on Radix Colors (Sand + Blue)
   - Sand: warm neutral gray for eye comfort
   - Blue: desaturated accent for reduced fatigue
   charset=euc-kr: CSS content Unicode direct use prohibited */

:root {
  /* Primary — Radix Blue 11/10 (desaturated, eye-friendly) */
  --hcms-primary: #0d74ce;
  --hcms-primary-hover: #0588f0;
  --hcms-primary-ring: rgba(13, 116, 206, 0.12);

  /* Semantic */
  --hcms-success: #18794e;
  --hcms-danger: #cd2b31;
  --hcms-danger-hover: #e5484d;
  --hcms-neutral: #63635e;
  --hcms-neutral-hover: #494844;

  /* Surface — Radix Sand 1/2/3 (warm off-white) */
  --hcms-bg: #fdfdfc;
  --hcms-surface: #f9f9f8;
  --hcms-card-bg: #f1f0ef;

  /* Text — Radix Sand 12/11/9 (warm neutral) */
  --hcms-text-heading: #21201c;
  --hcms-text-body: #63635e;
  --hcms-text-muted: #8d8d86;
  --hcms-text-placeholder: #bcbbb5;

  /* Border — Radix Sand 6/5/4 */
  --hcms-border: #dad9d6;
  --hcms-border-light: #e2e1de;
  --hcms-border-subtle: #e9e8e6;

  /* Radius */
  --hcms-radius-btn: 6px;
  --hcms-radius-input: 8px;
  --hcms-radius-card: 12px;
  --hcms-radius-pill: 9999px;

  /* Shadow */
  --hcms-shadow-card: 0 4px 18px rgba(0,0,0,0.04), 0 0.8px 2.93px rgba(0,0,0,0.02);
  --hcms-shadow-focus: 0 0 0 3px var(--hcms-primary-ring);

  /* Transition */
  --hcms-transition: 0.2s ease;

  /* Font */
  --hcms-font: "Noto Sans KR", "Malgun Gothic", -apple-system, sans-serif;

  /* Dark mode transition */
  --hcms-theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ============================================
   Dark Theme — Radix Sand Dark + Blue Dark
   ============================================ */
[data-theme="dark"] {
  /* Primary — Radix Blue Dark 11/10 */
  --hcms-primary: #70b8ff;
  --hcms-primary-hover: #3b9eff;
  --hcms-primary-ring: rgba(112, 184, 255, 0.2);

  /* Semantic */
  --hcms-success: #4cc38a;
  --hcms-danger: #ff6369;
  --hcms-danger-hover: #ff9592;
  --hcms-neutral: #b5b3ad;
  --hcms-neutral-hover: #eeeeec;

  /* Surface — Radix Sand Dark 1/2/3 */
  --hcms-bg: #111110;
  --hcms-surface: #191918;
  --hcms-card-bg: #222221;

  /* Text — Radix Sand Dark 12/11/9 */
  --hcms-text-heading: #eeeeec;
  --hcms-text-body: #b5b3ad;
  --hcms-text-muted: #7c7b74;
  --hcms-text-placeholder: #62605b;

  /* Border — Radix Sand Dark 6/5/4 */
  --hcms-border: #3b3a37;
  --hcms-border-light: #31312e;
  --hcms-border-subtle: #2a2a28;

  /* Shadow */
  --hcms-shadow-card: 0 4px 18px rgba(0,0,0,0.4), 0 0.8px 2.93px rgba(0,0,0,0.2);
  --hcms-shadow-focus: 0 0 0 3px var(--hcms-primary-ring);
}