/* Gõ Nhanh 디자인 토큰 — docs/14-ui-ux-design.md §2 */
:root {
  /* Brand */
  --brand-red: #D6402F;
  --brand-red-hover: #B93325;
  --brand-red-soft: #FBEAE7;
  --brand-gold: #E8A200;
  --brand-gold-soft: #FFF4D6;

  /* Light (기본) */
  --bg: #F7F4EE;
  --surface: #FFFFFF;
  --surface-sunken: #EFEBE3;
  --border: #E2DDD3;
  --text: #23201B;
  --text-muted: #6E675C;
  --text-faint: #A8A093;

  /* Semantic */
  --ok: #1E9E5A;
  --err: #E5484D;
  --warn: #F0A400;
  --info: #2F6FE4;
  --focus-ring: #2F6FE4;
  --caret: var(--brand-red);

  /* Typography */
  --font-ui: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px;
  --fs-xl: 28px; --fs-2xl: 40px; --fs-hero: 96px;
  --fs-typing: 28px;
  --lh-typing: 1.7; /* 성조 2단 스택 클리핑 방지 — 1.5 미만 금지 */

  /* Spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px;

  --shadow-1: 0 1px 2px rgba(20,15,5,.06);
  --shadow-2: 0 4px 12px rgba(20,15,5,.08);
  --shadow-3: 0 12px 32px rgba(20,15,5,.14);

  --container: 1080px;
}

[data-theme="dark"] {
  --bg: #14171D;
  --surface: #1C2027;
  --surface-sunken: #10131A;
  --border: #2A2F38;
  --text: #E9E6E0;
  --text-muted: #9AA0A8;
  --text-faint: #565D66;
  --brand-red: #E8564A;
  --brand-red-soft: #3A2320;
  --brand-gold: #F5B301;
  --brand-gold-soft: #3A3012;
  --ok: #2FBF71; --err: #F2555A; --warn: #F5B301;
  /* 다크에서 그림자 대신 보더 단차 (저사양 GPU) */
  --shadow-1: none; --shadow-2: none; --shadow-3: none;
}

@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: #14171D;
    --surface: #1C2027;
    --surface-sunken: #10131A;
    --border: #2A2F38;
    --text: #E9E6E0;
    --text-muted: #9AA0A8;
    --text-faint: #565D66;
    --brand-red: #E8564A;
    --brand-red-soft: #3A2320;
    --brand-gold: #F5B301;
    --brand-gold-soft: #3A3012;
    --ok: #2FBF71; --err: #F2555A; --warn: #F5B301;
    --shadow-1: none; --shadow-2: none; --shadow-3: none;
  }
}