/* PolSim design tokens (stage U). Old token names are preserved as the public
   API (React islands + templates use them inline); new scales are additive. */
:root {
  /* -- greys: warm graphite scale, dark-first (step = surface elevation) -- */
  --g-0: #0d1117; --g-1: #121821; --g-2: #161d28; --g-3: #1b2330;
  --g-4: #222b3a; --g-5: #2a3445; --g-6: #37435a; --g-7: #55657d;
  --g-8: #8494ab; --g-9: #b3c0d1; --g-10: #dbe3ec; --g-11: #f2f5f9;

  /* -- legacy token names (KEEP): remapped onto the scale -- */
  --bg: var(--g-0); --bg-elev: var(--g-2); --bg-card: var(--g-3);
  --border: var(--g-5); --text: var(--g-10); --text-muted: var(--g-8);
  --primary: #4d8df6; --primary-ink: #fff;
  --secondary: var(--g-6);
  --ok: #34b26a; --warn: #d99b2b; --danger: #d64f42;
  --nav-bg: var(--g-1); --nav-ink: var(--g-9);
  --radius: 10px; --gap: 16px;
  --font: InterFallback, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);

  /* -- new: surfaces & accents -- */
  --surface-1: var(--g-2); --surface-2: var(--g-3); --surface-3: var(--g-4);
  --primary-dim: color-mix(in oklab, var(--primary) 55%, var(--g-3));
  --accent-glow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent),
                 0 0 18px color-mix(in srgb, var(--primary) 18%, transparent);

  /* -- type scale -- */
  --font-ui: "Geist", var(--font);
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 15px;
  --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 32px;
  --lh-tight: 1.25; --lh-base: 1.5;
  --ls-caps: .06em;

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

  /* -- radii / shadows / z -- */
  --radius-sm: 6px; --radius-lg: 14px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35);
  --shadow-2: 0 4px 16px rgba(0,0,0,.45);
  --z-nav: 100; --z-drawer: 500; --z-modal: 1000; --z-toast: 1100;

  /* -- motion -- */
  --dur-fast: 120ms; --dur-med: 240ms; --dur-slow: 360ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-color-scheme: light) {
  :root {
    --g-0: #f6f8fa; --g-1: #eef1f5; --g-2: #ffffff; --g-3: #ffffff;
    --g-4: #f0f3f7; --g-5: #dfe6ee; --g-6: #c3cfdd; --g-7: #8a99ac;
    --g-8: #5c6b80; --g-9: #3d4c60; --g-10: #22303f; --g-11: #101820;
    --nav-bg: #1c2c3e; --nav-ink: #cfe0f0;
    --shadow: 0 1px 2px rgba(20, 40, 70, .06);
    --shadow-1: 0 1px 2px rgba(20, 40, 70, .08);
    --shadow-2: 0 4px 16px rgba(20, 40, 70, .12);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}