/* Guide Education — Design Tokens
   Source of truth for color, typography, radius, shadow, motion.
   DO NOT define color/font literals anywhere else. */

:root {
  /* Surface hierarchy (DESIGN.md §2) */
  --color-surface: #f9f9fb;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f3f5;
  --color-surface-container: #eeeef0;
  --color-surface-container-high: #e8e8ea;
  --color-surface-container-highest: #e2e2e4;

  /* Foreground */
  --color-on-surface: #1a1c1d;
  --color-on-surface-variant: #474747;

  /* Primary (action / emphasis) */
  --color-primary: #000000;
  --color-primary-container: #3c3b3b;
  --color-on-primary: #e5e2e1;

  /* Outline (when needed; default is no border) */
  --color-outline: #777777;
  --color-outline-variant: #c6c6c6;

  /* Error container — Open Q2 exception (high-risk cards only)
     DESIGN.md §5.4: monotone palette의 유일한 break */
  --color-error-container: #ffdad6;
  --color-on-error-container: #410002;

  /* Typography families */
  --font-headline: 'Manrope', 'Noto Sans KR', sans-serif;
  --font-body: 'Inter', 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --radius-default: 0.125rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.5rem;
  --radius-full: 0.75rem;

  /* Elevation (DESIGN.md §4) */
  --shadow-ambient: 0 0 40px 0 rgba(26, 28, 29, 0.04);
  --blur-glass: 24px;

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html.dark {
  --color-surface: #0a0a0b;
  --color-surface-container-lowest: #050507;
  --color-surface-container-low: #111114;
  --color-surface-container: #18181b;
  --color-surface-container-high: #1f1f23;
  --color-surface-container-highest: #27272a;
  --color-on-surface: #e5e5e7;
  --color-on-surface-variant: #a1a1aa;
  --color-primary: #ffffff;
  --color-primary-container: #e4e4e7;
  --color-on-primary: #0a0a0b;
  --color-outline: #52525b;
  --color-outline-variant: #3f3f46;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;
  --shadow-ambient: 0 0 40px 0 rgba(255, 255, 255, 0.03);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}