/* ==========================================================================
   TOKENS
   Design system primitives: spacing, typography scale, fonts, easings,
   layout widths, and theme palettes.

   Load order: this file must be first. Everything else consumes these
   variables.
   ========================================================================== */

:root {
    color-scheme: light dark;

    /* ---------- spacing (4pt scale) ---------- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;

    /* ---------- typography ---------- */
    --f-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --f-mono: 'Azeret Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Modular scale. Step ratios:
       xs→sm 1.17×, sm→base 1.14× (label/utility tier — hierarchy comes
       from case and font, not size), base→md 1.25×, md→lg 1.40×.
       --t-title sits between base and md; it's the editorial story-row
       size and not a general-purpose step. */
    --t-xs: 0.75rem;
    /* 12 */
    --t-sm: 0.875rem;
    /* 14 */
    --t-base: 1rem;
    /* 16 */
    --t-title: 1.125rem;
    /* 18 — story-row title only */
    --t-md: 1.25rem;
    /* 20 */
    --t-lg: 1.75rem;
    /* 28 */

    /* ---------- layout widths ---------- */
    --rail-w: 220px;
    --list-w: 720px;
    --list-w-desktop: 720px;
    --col-w: 680px;

    /* ---------- easings ---------- */
    --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-expo: cubic-bezier(0.22, 1, 0.36, 1);

    /* ---------- radii & control sizing ---------- */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;

    /* Two control tiers: -sm for tag/chip-style elements (filter chips,
       inline pills) that should read as list items, and the default
       --control-h for primary controls (search, theme toggle, action
       buttons) that need a comfortable click target and stronger
       presence in the rail. */
    --control-h: 40px;
    --control-h-sm: 28px;

    /* Focus ring referenced from .search-input (and reusable elsewhere). */
    --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent);

    /* ---------- print neutrals ----------
       Print is theme-agnostic — these aren't swapped per palette, they're
       the paper-rendering palette: warm off-white surface, near-black ink,
       muted stone rule. */
    --print-bg: #faf8f5;
    --print-ink: #1c1917;
    --print-rule: #e7e5e4;
}

/* ==========================================================================
   THEME PALETTES
   One palette per theme. Components must only read these semantic tokens,
   never the raw oklch() values.
   ========================================================================== */

/* ---------- LIGHT: slate — warm stone neutrals + refined indigo accent ---------- */
[data-theme="light"][data-palette-light="slate"] {
    --surface: oklch(0.985 0.004 80);
    --surface-2: oklch(0.955 0.006 80);
    --surface-3: oklch(0.92 0.008 80);
    --ink: oklch(0.25 0.015 80);
    --ink-dim: oklch(0.36 0.018 80);
    --ink-mute: oklch(0.50 0.018 80);
    --ink-ghost: oklch(0.65 0.015 80);
    --rule: oklch(0.88 0.008 80);
    --rule-strong: oklch(0.76 0.010 80);
    --accent: oklch(0.50 0.18 250);
    --accent-text: oklch(0.44 0.19 250);
    --accent-soft: oklch(0.50 0.18 250 / 0.14);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06);
    --shadow-toast: 0 8px 24px oklch(0 0 0 / 0.18);
}

/* ---------- DARK: tide — deep slate + warm copper accent ----------
   Copper (hue ~75) instead of sky-blue avoids the cyan-on-dark AI-palette
   default. Same brand role across themes — light reads as refined indigo,
   dark reads as warm metal. */
[data-theme="dark"][data-palette-dark="tide"] {
    --surface: oklch(0.22 0.03 260);
    --surface-2: oklch(0.28 0.035 260);
    --surface-3: oklch(0.34 0.038 260);
    --ink: oklch(0.93 0.015 250);
    --ink-dim: oklch(0.78 0.02 250);
    --ink-mute: oklch(0.66 0.03 260);
    --ink-ghost: oklch(0.46 0.03 260);
    --rule: oklch(0.36 0.03 260);
    --rule-strong: oklch(0.48 0.035 260);
    --accent: oklch(0.78 0.13 75);
    --accent-text: oklch(0.86 0.10 75);
    --accent-soft: oklch(0.78 0.13 75 / 0.22);
    --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30);
    --shadow-toast: 0 8px 24px oklch(0 0 0 / 0.40);
}