/* Hallmark · macrostructure: bespoke "Signal Narrative" · genre: atmospheric · theme: custom (bespoke)
 * vibe: "night navy, one glowing signal line, calm engineering"
 * paper oklch(19.4% 0.051 259) · accent oklch(72.7% 0.146 251) cool-blue · Pretendard Variable + Satoshi
 * axes: dark / geometric-sans / cool · see /design.md for project overrides (scroll-scrub allowed)
 */
:root {
  /* colour — 기본값(모든 브라우저), OKLCH를 이해하는 브라우저는 아래 @supports 에서 덮어씀 */
  --color-paper: #06142B;
  --color-paper-2: #0B1F3D;
  --color-rule: #1E3558;
  --color-ink: #EAF2FF;
  --color-muted: #9DB2D0;
  --color-dim: #7A8EAB;
  --color-signal: #5AABFF;
  --color-brand: #1368C8;
  --color-alert: #FF6B6B;
  --color-glow: rgba(90, 171, 255, 0.22);
  --color-veil: rgba(6, 20, 43, 0.72);
  --color-sheet: rgba(11, 31, 61, 0.96);
  --color-bloom: rgba(19, 104, 200, 0.28);
  --color-signal-fade: rgba(90, 171, 255, 0.4);

  /* type */
  --font-body: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-num: 'Satoshi', 'Pretendard Variable', sans-serif;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1.4vw, 1.3125rem);
  --text-h2: clamp(1.875rem, 3.5vw, 3.25rem);
  --text-stmt: clamp(2.25rem, 4.6vw, 4.25rem);
  --text-display: clamp(2.375rem, 5.2vw, 4.75rem);

  /* space · 4pt */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --gutter: clamp(16px, 4vw, 64px);

  /* layout */
  --hdr-h: 76px;
  --split: 42%;
  --spine-x: 71%;
  --radius: 999px;
  --rule-w: 1px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
}
@media (max-width: 899px) {
  :root { --spine-x: 50%; --hdr-h: 64px; }
}

@supports (color: oklch(50% 0.1 250)) {
  :root {
    --color-paper:   oklch(19.4% 0.051 259);
    --color-paper-2: oklch(24.2% 0.063 258);
    --color-rule:    oklch(32.9% 0.069 259);
    --color-ink:     oklch(95.9% 0.019 260);
    --color-muted:   oklch(75.8% 0.049 257);
    --color-dim:     oklch(64% 0.05 258);   /* 5.3:1 on paper */
    --color-signal:  oklch(72.7% 0.146 251);
    --color-brand:   oklch(52.5% 0.168 256);
    --color-alert:   oklch(71.2% 0.181 23);
    --color-glow:    oklch(72.7% 0.146 251 / 0.22);
    --color-veil:    oklch(19.4% 0.051 259 / 0.72);
    --color-sheet:   oklch(24.2% 0.063 258 / 0.96);
    --color-bloom:   oklch(52.5% 0.168 256 / 0.28);
    --color-signal-fade: oklch(72.7% 0.146 251 / 0.4);
  }
}