/* tokens.css — design tokens (single source of truth: web-guidelines.md §3) */

:root {
  /* --- Grayscale (5 steps) --- */
  /* g0 page background / g1 surface,card / g2 border,divider (decoration only)
     g3 secondary text / g4 primary text */
  --g0: #fafafa;
  --g1: #ececec;
  --g2: #c8c8c8;
  --g3: #595959;
  --g4: #1a1a1a;

  /* --- Accent (highlight only) --- */
  --accent: #3b6fd4;          /* provisional */
  --on-accent: #ffffff;       /* text on accent background */

  /* --- Typography --- */
  --font-sans: "Pretendard Variable", Pretendard, system-ui,
               -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* provisional */
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: 1.25rem;
  --text-xl: 1.75rem;
  --leading-body: 1.65;       /* Korean body text */
  --leading-tight: 1.3;       /* headings */

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

  /* --- Shape --- */
  --radius-s: 4px;
  --radius-m: 8px;
  --border: 1px solid var(--g2);

  /* --- Elevation (minimal) --- */
  --shadow-1: 0 1px 3px rgb(0 0 0 / 0.08);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.10);

  /* --- Motion (fade only, see web-guidelines.md §5) --- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout --- */
  --content-max: 720px;       /* content page max width, provisional */

  color-scheme: light dark;
}

/* Dark theme: auto (system) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --g0: #111111;
    --g1: #1f1f1f;
    --g2: #3d3d3d;
    --g3: #a3a3a3;
    --g4: #ececec;
    --accent: #7aa2e8;        /* provisional */
    --on-accent: #111111;
    --shadow-1: 0 1px 3px rgb(0 0 0 / 0.4);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
  }
}

/* Light theme: manual override (while system is dark) */
:root[data-theme="light"] {
  color-scheme: light;
}

/* Dark theme: manual override */
:root[data-theme="dark"] {
  color-scheme: dark;
  --g0: #111111;
  --g1: #1f1f1f;
  --g2: #3d3d3d;
  --g3: #a3a3a3;
  --g4: #ececec;
  --accent: #7aa2e8;
  --on-accent: #111111;
  --shadow-1: 0 1px 3px rgb(0 0 0 / 0.4);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.5);
}

/* Cross-document page transitions: browser-native crossfade between pages.
   Unsupported browsers simply navigate instantly. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-base);
}

/* Respect reduced motion (see web-guidelines.md §5) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}