/* ===========================================================================
   tokens.css — the ONLY file allowed to hold literal colours, sizes, radii,
   shadows and durations. Everything else references these by name.
   Colour is OKLCH: one warm neutral ramp (hue 70, chroma ≤ .012), one accent
   ramp on the product's brand hue (--brand-hue, set per product in /brand/theme.css;
   154 if none), four semantic families, twelve
   branch swatches at one lightness so any two of them sit well together.
   Every text/surface pair below is measured in DESIGN_SYSTEM.md.
   =========================================================================== */
:root {
  color-scheme: light;
  --brand-hue: 154;                      /* overridden by /brand/theme.css */

  /* ---- type ---------------------------------------------------------- */
  --font-sans: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;   /* public page only */

  --t-display-size: 2.75rem;  --t-display-lh: 1.05; --t-display-w: 700; --t-display-ls: -0.022em;
  --t-title1-size:  2.125rem; --t-title1-lh:  1.10; --t-title1-w:  700; --t-title1-ls:  -0.020em;
  --t-title2-size:  1.75rem;  --t-title2-lh:  1.15; --t-title2-w:  600; --t-title2-ls:  -0.016em;
  --t-title3-size:  1.375rem; --t-title3-lh:  1.25; --t-title3-w:  600; --t-title3-ls:  -0.012em;
  --t-headline-size: 1.0625rem; --t-headline-lh: 1.35; --t-headline-w: 600; --t-headline-ls: -0.006em;
  --t-body-size:    1rem;     --t-body-lh:    1.55; --t-body-w:    400; --t-body-ls:    0;
  --t-subhead-size: 0.9375rem; --t-subhead-lh: 1.45; --t-subhead-w: 400; --t-subhead-ls: 0;
  --t-footnote-size: 0.8125rem; --t-footnote-lh: 1.40; --t-footnote-w: 400; --t-footnote-ls: 0.004em;
  --t-caption-size: 0.75rem;  --t-caption-lh: 1.35; --t-caption-w: 500; --t-caption-ls: 0.010em;
  --measure: 68ch;                       /* prose line length cap */

  /* ---- warm neutrals (hue 70) ---------------------------------------- */
  --surface-canvas:  oklch(98.4% 0.005 70);
  --surface-raised:  oklch(99.6% 0.002 70);
  --surface-sunken:  oklch(96.2% 0.006 70);
  --surface-overlay: oklch(99.6% 0.002 70 / 0.86);     /* + backdrop-filter */
  --surface-nav:     oklch(21% 0.012 70);              /* the one dark surface in light mode */
  --surface-nav-hover: oklch(100% 0 0 / 0.06);
  --surface-nav-active: oklch(100% 0 0 / 0.10);

  --text-1: oklch(24% 0.012 70);          /* 15.8:1 on canvas */
  --text-2: oklch(46% 0.010 70);          /*  6.8:1 */
  --text-3: oklch(54% 0.008 70);          /*  4.8:1 — the floor for body text */
  --text-4: oklch(72% 0.007 70);          /* 2.4:1 — placeholders, disabled; never for content */
  --text-on-nav: oklch(93% 0.006 70);
  --text-on-nav-2: oklch(72% 0.008 70);

  --hairline:     oklch(24% 0.012 70 / 0.10);   /* dividers: decorative, not a boundary */
  --hairline-2:   oklch(24% 0.012 70 / 0.16);   /* card edges when a shadow is not earned */
  --border-input: oklch(62% 0.008 70);          /* 3.5:1 — a boundary the user must find */

  /* ---- accent: brand hue 154, lightness stops fixed ------------------ */
  --accent-50:  oklch(97.5% 0.038 var(--brand-hue));
  --accent-100: oklch(94.0% 0.077 var(--brand-hue));
  --accent-200: oklch(89.0% 0.116 var(--brand-hue));
  --accent-300: oklch(82.0% 0.146 var(--brand-hue));
  --accent-400: oklch(74.0% 0.154 var(--brand-hue));
  --accent-500: oklch(66.0% 0.154 var(--brand-hue));   /* identity only */
  --accent-600: oklch(57.0% 0.136 var(--brand-hue));
  --accent-700: oklch(49.0% 0.122 var(--brand-hue));   /* 5.9:1 with white — the working accent */
  --accent-800: oklch(41.0% 0.102 var(--brand-hue));
  --accent-900: oklch(34.0% 0.084 var(--brand-hue));
  --accent-950: oklch(26.0% 0.066 var(--brand-hue));

  --accent:        var(--accent-700);     /* fills, active nav, primary actions */
  --accent-hover:  var(--accent-800);
  --accent-fg:     oklch(99.6% 0.002 70); /* text on --accent */
  --accent-text:   var(--accent-700);     /* accent used AS text: 5.8:1 on raised */
  --accent-subtle: var(--accent-100);     /* tinted buttons, selected rows */
  --accent-subtle-fg: var(--accent-900);
  --accent-ring:   var(--accent-700);     /* focus ring: ≥3:1 on every surface */

  /* ---- semantic (text / solid / subtle) ------------------------------ */
  --success-text: oklch(45% 0.14 150); --success-solid: oklch(50% 0.15 150); --success-subtle: oklch(95% 0.03 150);
  --warning-text: oklch(45% 0.14 70);  --warning-solid: oklch(50% 0.15 70);  --warning-subtle: oklch(95% 0.03 70);
  --danger-text:  oklch(45% 0.14 25);  --danger-solid:  oklch(50% 0.15 25);  --danger-subtle:  oklch(95% 0.03 25);
  --info-text:    oklch(45% 0.14 250); --info-solid:    oklch(50% 0.15 250); --info-subtle:    oklch(95% 0.03 250);
  /* Chart series. Categorical, not semantic: they only have to stay apart from each other and clear
     3:1 against the card they sit on, which is why none of them is a hairline grey. -1 green, -2 amber,
     -3 the neutral for "everything else", -4 blue, -5 magenta, -6 teal. */
  --chart-1: oklch(58% 0.150 var(--brand-hue)); --chart-2: oklch(58% 0.150 65);  --chart-3: oklch(56% 0.015 70);
  --chart-4: oklch(55% 0.160 255); --chart-5: oklch(56% 0.170 330); --chart-6: oklch(58% 0.110 195);
  --on-solid: oklch(99.6% 0.002 70);

  /* ---- branch palette: one lightness, one chroma, twelve hues --------- */
  --branch-1:  oklch(72% 0.12 15);   --branch-2:  oklch(72% 0.12 45);   --branch-3:  oklch(72% 0.12 75);
  --branch-4:  oklch(72% 0.12 105);  --branch-5:  oklch(72% 0.12 135);  --branch-6:  oklch(72% 0.12 165);
  --branch-7:  oklch(72% 0.12 195);  --branch-8:  oklch(72% 0.12 225);  --branch-9:  oklch(72% 0.12 255);
  --branch-10: oklch(72% 0.12 285);  --branch-11: oklch(72% 0.12 315);  --branch-12: oklch(72% 0.12 345);
  --branch-fg: var(--text-1);        /* deterministic: every swatch is L 72, so dark text always reads */
  --branch-tint-mix: 82%;            /* how much surface to mix into a branch fill */

  /* ---- space (4px base, 8px rhythm) ---------------------------------- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;

  /* ---- radius --------------------------------------------------------- */
  --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-full: 999px;

  /* ---- elevation: four levels, tinted with the neutral hue ----------- */
  --shadow-flat: none;
  --shadow-raised:  0 1px 2px oklch(24% 0.012 70 / 0.06), 0 4px 12px -4px oklch(24% 0.012 70 / 0.08);
  --shadow-overlay: 0 2px 6px oklch(24% 0.012 70 / 0.08), 0 12px 32px -8px oklch(24% 0.012 70 / 0.18);
  --shadow-modal:   0 4px 12px oklch(24% 0.012 70 / 0.10), 0 32px 80px -16px oklch(24% 0.012 70 / 0.28);

  /* ---- motion --------------------------------------------------------- */
  --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-page: 420ms;
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---- sizes ---------------------------------------------------------- */
  --control-sm: 2rem; --control-md: 2.75rem; --control-lg: 3rem;   /* md = 44px: the touch floor */
  --icon-16: 1rem; --icon-20: 1.25rem; --icon-24: 1.5rem;
  --sidebar-w: 15.5rem; --sidebar-rail: 4.25rem; --content-max: 70rem;

  /* ---- z ---------------------------------------------------------------- */
  --z-nav: 40; --z-overlay: 55; --z-modal: 60; --z-toast: 70;
}

/* Dark is a designed counterpart, not an inversion: surfaces lift by lightness,
   chroma rises a little, text backs off from full contrast so it does not vibrate. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-canvas:  oklch(17% 0.010 70);
    --surface-raised:  oklch(21% 0.010 70);
    --surface-sunken:  oklch(14% 0.010 70);
    --surface-overlay: oklch(21% 0.010 70 / 0.86);
    --surface-nav:     oklch(14% 0.010 70);
    --surface-nav-hover: oklch(100% 0 0 / 0.05);
    --surface-nav-active: oklch(100% 0 0 / 0.09);
    --text-1: oklch(93% 0.006 70);
    --text-2: oklch(74% 0.008 70);
    --text-3: oklch(62% 0.008 70);
    --text-4: oklch(46% 0.008 70);
    --text-on-nav: oklch(93% 0.006 70);
    --text-on-nav-2: oklch(66% 0.008 70);
    --hairline:     oklch(93% 0.006 70 / 0.10);
    --hairline-2:   oklch(93% 0.006 70 / 0.16);
    --border-input: oklch(52% 0.008 70);
    --accent:        var(--accent-400);
    --accent-hover:  var(--accent-300);
    --accent-fg:     oklch(17% 0.010 70);
    --accent-text:   var(--accent-300);
    --accent-subtle: oklch(30% 0.06 var(--brand-hue));
    --accent-subtle-fg: var(--accent-200);
    --accent-ring:   var(--accent-300);
    --success-text: oklch(78% 0.14 150); --success-subtle: oklch(26% 0.05 150);
    --warning-text: oklch(80% 0.13 70);  --warning-subtle: oklch(26% 0.05 70);
    --danger-text:  oklch(78% 0.13 25);  --danger-subtle:  oklch(26% 0.05 25);
    --info-text:    oklch(78% 0.12 250); --info-subtle:    oklch(26% 0.05 250);
    --chart-1: oklch(74% 0.160 var(--brand-hue)); --chart-2: oklch(78% 0.150 70);  --chart-3: oklch(68% 0.015 70);
    --chart-4: oklch(72% 0.140 255); --chart-5: oklch(74% 0.160 330); --chart-6: oklch(76% 0.110 195);
    --branch-fg: oklch(17% 0.010 70);
    --branch-tint-mix: 78%;
    --shadow-raised:  0 1px 2px oklch(0% 0 0 / 0.30), 0 4px 12px -4px oklch(0% 0 0 / 0.35);
    --shadow-overlay: 0 2px 6px oklch(0% 0 0 / 0.35), 0 12px 32px -8px oklch(0% 0 0 / 0.55);
    --shadow-modal:   0 4px 12px oklch(0% 0 0 / 0.40), 0 32px 80px -16px oklch(0% 0 0 / 0.70);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-canvas:  oklch(17% 0.010 70);
  --surface-raised:  oklch(21% 0.010 70);
  --surface-sunken:  oklch(14% 0.010 70);
  --surface-overlay: oklch(21% 0.010 70 / 0.86);
  --surface-nav:     oklch(14% 0.010 70);
  --surface-nav-hover: oklch(100% 0 0 / 0.05);
  --surface-nav-active: oklch(100% 0 0 / 0.09);
  --text-1: oklch(93% 0.006 70);
  --text-2: oklch(74% 0.008 70);
  --text-3: oklch(62% 0.008 70);
  --text-4: oklch(46% 0.008 70);
  --text-on-nav: oklch(93% 0.006 70);
  --text-on-nav-2: oklch(66% 0.008 70);
  --hairline:     oklch(93% 0.006 70 / 0.10);
  --hairline-2:   oklch(93% 0.006 70 / 0.16);
  --border-input: oklch(52% 0.008 70);
  --accent:        var(--accent-400);
  --accent-hover:  var(--accent-300);
  --accent-fg:     oklch(17% 0.010 70);
  --accent-text:   var(--accent-300);
  --accent-subtle: oklch(30% 0.06 var(--brand-hue));
  --accent-subtle-fg: var(--accent-200);
  --accent-ring:   var(--accent-300);
  --success-text: oklch(78% 0.14 150); --success-subtle: oklch(26% 0.05 150);
  --warning-text: oklch(80% 0.13 70);  --warning-subtle: oklch(26% 0.05 70);
  --danger-text:  oklch(78% 0.13 25);  --danger-subtle:  oklch(26% 0.05 25);
  --info-text:    oklch(78% 0.12 250); --info-subtle:    oklch(26% 0.05 250);
  --chart-1: oklch(74% 0.160 var(--brand-hue)); --chart-2: oklch(78% 0.150 70);  --chart-3: oklch(68% 0.015 70);
  --chart-4: oklch(72% 0.140 255); --chart-5: oklch(74% 0.160 330); --chart-6: oklch(76% 0.110 195);
  --branch-fg: oklch(17% 0.010 70);
  --branch-tint-mix: 78%;
  --shadow-raised:  0 1px 2px oklch(0% 0 0 / 0.30), 0 4px 12px -4px oklch(0% 0 0 / 0.35);
  --shadow-overlay: 0 2px 6px oklch(0% 0 0 / 0.35), 0 12px 32px -8px oklch(0% 0 0 / 0.55);
  --shadow-modal:   0 4px 12px oklch(0% 0 0 / 0.40), 0 32px 80px -16px oklch(0% 0 0 / 0.70);
}