/* tokens.css — the only place design values live. Primitive → semantic → component. */
@layer tokens {
  :root {
    /* 1. Primitives */
    --mist-50: oklch(97% 0.006 120);
    --mist-100: oklch(94% 0.008 120);
    --mist-200: oklch(88% 0.012 125);
    --mist-400: oklch(72% 0.018 140);
    --mist-600: oklch(52% 0.02 150);
    --ink-700: oklch(32% 0.012 160);
    --ink-800: oklch(24% 0.01 165);
    --ink-900: oklch(17% 0.008 170);
    --ink-950: oklch(13% 0.006 170);
    --sun-200: oklch(95% 0.035 90);
    --sun-400: oklch(86% 0.07 85);
    --white: oklch(100% 0 0);
    --green-500: oklch(80% 0.17 155);
    --red-500: oklch(66% 0.22 27);

    --font-display: "Jost", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "B612 Mono", ui-monospace, "SF Mono", monospace;

    /* type scale 1.25 */
    --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
    --step-2: clamp(1.56rem, 1.4rem + 0.8vw, 2rem);
    --step-3: clamp(1.95rem, 1.6rem + 1.6vw, 3rem);
    --step-4: clamp(2.6rem, 1.8rem + 4vw, 5.5rem);

    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem;
    --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem;

    --radius-1: 0.5rem; --radius-2: 1rem; --radius-3: 1.5rem; --radius-pill: 999px;
    --duration-1: 160ms; --duration-2: 400ms; --duration-3: 900ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* 2. Semantic (light) */
    --color-bg: var(--mist-50);
    --color-surface: var(--white);
    --color-surface-2: var(--mist-100);
    --color-text: var(--ink-900);
    --color-text-muted: var(--ink-700);
    --color-border: color-mix(in oklch, var(--ink-900) 12%, transparent);
    --color-accent: var(--ink-900);
    --color-accent-contrast: var(--white);
    --color-on-sky: var(--white);
    --color-on-sky-muted: color-mix(in oklch, var(--white) 82%, transparent);
    --color-sky-top: oklch(88% 0.015 110);
    --color-sky-mid: oklch(80% 0.02 120);
    --color-sky-low: oklch(55% 0.022 150);
    --color-focus: var(--green-500);
    --color-ok: oklch(55% 0.15 155);

    --font-size-body: var(--step-0);
    --font-size-small: var(--step--1);
    --font-size-h1: var(--step-4);
    --font-size-h2: var(--step-3);
    --font-size-h3: var(--step-1);
    --tracking-display: 0.18em;
    --tracking-tight-display: 0.02em;
    --tracking-brand: 0.32em;
    --tracking-label: 0.14em;
    --tracking-nav: 0.06em;
    --tracking-h2: 0.06em;
    --tracking-button: 0.02em;
    --line-body: 1.55;
    --line-lede: 1.45;
    --line-heading: 1.3;
    --line-tight: 1.1;
    --measure: 65ch;

    --space-section: clamp(4rem, 9vw, 8rem);
    --space-gutter: clamp(1rem, 4vw, 2.5rem);
    --container: 72rem;
    --radius-card: var(--radius-3);
    --shadow-card: 0 1px 2px color-mix(in oklch, var(--ink-950) 6%, transparent), 0 12px 40px color-mix(in oklch, var(--ink-950) 8%, transparent);

    --color-dark-bg: var(--ink-950);
    --color-dark-text: var(--mist-50);
    --color-dark-muted: var(--mist-200);
    --color-dark-faint: var(--mist-400);
    --color-dark-border: color-mix(in oklch, var(--mist-50) 14%, transparent);

    /* 3. Component */
    --hero-sky: linear-gradient(180deg, var(--color-sky-top), var(--color-sky-mid) 45%, var(--color-sky-low));
    --hero-sun: radial-gradient(60% 45% at 50% 30%, var(--sun-200), transparent 70%);
    --hero-scrim: linear-gradient(180deg, color-mix(in oklch, var(--ink-950) 30%, transparent), transparent 20%, transparent 38%, color-mix(in oklch, var(--ink-950) 55%, transparent) 70%, color-mix(in oklch, var(--ink-950) 72%, transparent));
    --hero-text-shadow: 0 1px 0.75em color-mix(in oklch, var(--ink-950) 45%, transparent);
    --hero-title-shadow: 0 0.1em 1.5em color-mix(in oklch, var(--ink-950) 25%, transparent);
    --hero-lede-width: 38rem;
    --faq-width: 48rem;
    --button-pad-y: 0.75em;
    --button-pad-x: 1.5em;
    --button-pad-y-lg: 0.95em;
    --button-pad-x-lg: 2em;
    --button-lift: -1px;
    --focus-ring: 2px;
    --focus-offset: 3px;
    --line-kbd: 1.2;
    --button-bg: var(--color-accent);
    --button-text: var(--color-accent-contrast);
    --button-ghost-border: color-mix(in oklch, currentColor 40%, transparent);
    --header-height: 4.5rem;
    --manual-toc-w: 17rem;
    --tap: 2.75rem;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: var(--ink-950);
      --color-surface: var(--ink-900);
      --color-surface-2: var(--ink-800);
      --color-text: var(--mist-50);
      --color-text-muted: var(--mist-200);
      --color-border: color-mix(in oklch, var(--mist-50) 12%, transparent);
      --color-accent: var(--mist-50);
      --color-accent-contrast: var(--ink-950);
      --shadow-card: 0 1px 2px color-mix(in oklch, black 30%, transparent);
    }
  }
}