/* ─────────────────────────────────────────────────────────────
   SDC Lab Design Kit — Tokens
   ─────────────────────────────────────────────────────────────
   OKLCH, warm-tinted neutrals + single terracotta accent.
   Reflex-filtered typography (no Inter/IBM Plex/Fraunces/etc).
   4pt spacing. Exponential easings only.

   All token names are SEMANTIC (what they're for), not primitive
   (what the value is). Renaming requires a reason, not a value.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ═════════════ Color ═════════════ */

  /* Surface */
  --sdc-bg:          oklch(0.195 0.008 85);     /* page background */
  --sdc-surface:     oklch(0.235 0.008 85);     /* raised surface, focus bg */

  /* Ink */
  --sdc-ink:         oklch(0.935 0.012 85);     /* default text */
  --sdc-ink-strong:  oklch(0.975 0.012 85);     /* headings, hover reveal */
  --sdc-muted:       oklch(0.680 0.010 85);     /* meta, labels, tertiary — raised for WCAG AA headroom on 11–12px mono */

  /* Rules & dividers */
  --sdc-rule:        oklch(0.320 0.008 85);     /* primary divider (1px) */
  --sdc-rule-soft:   oklch(0.260 0.008 85);     /* soft divider (1px) */

  /* Accent — use sparingly (≤10% visual weight, 60/30/10 rule).
     Chroma deliberately restrained for dark-mode legibility. */
  --sdc-accent:      oklch(0.700 0.135 45);     /* terracotta */
  --sdc-accent-dim:  oklch(0.550 0.100 45);     /* quieter variant */


  /* ═════════════ Typography ═════════════
     Display ≠ body. Never mono on running prose.
     Font tokens pair with <link> imports in the consumer page.
     When swapping fonts, also update the HTML <link> tags. */

  /* Korean fallback appended to every Latin/mono chain: Paperlogy's CDN
     @font-face declarations restrict unicode-range to Hangul+CJK, so Latin
     rendering is unaffected — but any Hangul that lands inside a Latin-tokened
     element now routes to Paperlogy instead of the OS system font. */
  --sdc-font-display-latin: 'Gloock', 'Literata', Georgia, serif,
                            'Paperlogy', 'Pretendard Variable';
  --sdc-font-display-kr:    'Paperlogy', 'Pretendard Variable',
                            system-ui, sans-serif;
  --sdc-font-body-kr:       'Paperlogy', 'Pretendard Variable', 'Pretendard',
                            -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sdc-font-body-latin:    'Literata', Georgia, serif,
                            'Paperlogy', 'Pretendard Variable';
  --sdc-font-mono:          'JetBrains Mono', ui-monospace, Menlo, monospace,
                            'Paperlogy', 'Pretendard Variable';

  /* Fluid type scale. Steps ≥1.25× for clear hierarchy. */
  --sdc-step--1:  clamp(11px,   0.20vw + 10px,  12.5px);   /* meta, tabular */
  --sdc-step-0:   clamp(13px,   0.30vw + 12px,  14.5px);   /* small body */
  --sdc-step-1:   clamp(15px,   0.50vw + 13px,  17px);     /* body */
  --sdc-step-2:   clamp(17px,   0.50vw + 14px,  20px);     /* lede / subhead */
  --sdc-step-3:   clamp(20px,   0.50vw + 18px,  24px);     /* small display */
  --sdc-step-4:   clamp(28px,   2.20vw + 12px,  40px);     /* display */
  --sdc-step-5:   clamp(42px,   8.60vw,         144px);    /* hero headline — 42px min keeps "Landscape" inside 320px viewport */


  /* ═════════════ Space ═════════════
     4pt scale. Use `gap` not margins. Vary spacing for rhythm. */

  --sdc-space-1:  4px;
  --sdc-space-2:  8px;
  --sdc-space-3:  12px;
  --sdc-space-4:  16px;
  --sdc-space-5:  24px;
  --sdc-space-6:  32px;
  --sdc-space-7:  48px;
  --sdc-space-8:  64px;
  --sdc-space-9:  96px;
  --sdc-space-10: 144px;


  /* ═════════════ Motion ═════════════
     Exponential easings only. Never bounce or elastic. */

  --sdc-ease-out-expo:   cubic-bezier(0.16, 1.00, 0.30, 1.00);
  --sdc-ease-out-quint:  cubic-bezier(0.22, 1.00, 0.36, 1.00);
  --sdc-ease-out-quart:  cubic-bezier(0.25, 1.00, 0.50, 1.00);

  --sdc-dur-fast:   0.25s;
  --sdc-dur-base:   0.45s;
  --sdc-dur-slow:   0.80s;
  --sdc-dur-reveal: 1.05s;
}

/* Selection — consistent with accent */
::selection { background: var(--sdc-accent); color: var(--sdc-bg); }