/* =====================================================================================================
   Orla · design tokens — a port of TMC's E11 tokens.css, DARK THEME ONLY, black & white.
   Same layers and role names as TMC (1 primitives → 2 roles → 4 type → 5 space → 6 shape → 7 motion) so every ported
   component reads the same roles. Every purple/pink step is mapped to a warm neutral (hue 85, chroma .004-.008;
   never pure #000/#fff). Renamed to avoid clashing with the coded screens' own palette (src/styles/tokens.css):
   TMC --line → --hair, --line-strong → --hair-strong, --shadow-1/2/3 → --sh-1/2/3.
   ===================================================================================================== */

:root {
  color-scheme: dark;

  /* ---------- 1 · primitives (the TMC violet/pink ramps, now greys; kept so the ported gradients still resolve) ---- */
  --violet-50: oklch(97% 0.004 85);
  --violet-100: oklch(93% 0.005 85);
  --violet-200: oklch(88% 0.005 85);
  --violet-300: oklch(81% 0.006 85);
  --violet-400: oklch(70% 0.006 85);
  --violet-500: oklch(59% 0.006 85);
  --violet-600: oklch(50% 0.006 85);
  --violet-700: oklch(42% 0.006 85);
  --violet-800: oklch(35% 0.006 85);
  --violet-900: oklch(29% 0.006 85);
  --violet-950: oklch(22% 0.006 85);
  --pink-50: oklch(97% 0.004 85);
  --pink-100: oklch(94% 0.005 85);
  --pink-200: oklch(89% 0.005 85);
  --pink-300: oklch(82% 0.006 85);
  --pink-400: oklch(74% 0.006 85);
  --pink-500: oklch(66% 0.006 85);
  --pink-600: oklch(58% 0.006 85);
  --pink-700: oklch(50% 0.006 85);
  --pink-800: oklch(41% 0.006 85);
  --pink-900: oklch(33% 0.006 85);
  --pink-950: oklch(26% 0.006 85);

  --neutral-0: oklch(98.5% 0.003 85);
  --neutral-25: oklch(96% 0.004 85);    /* paper: text on the dark canvas, the primary pill */
  --neutral-50: oklch(93% 0.004 85);
  --neutral-100: oklch(89% 0.005 85);
  --neutral-150: oklch(85% 0.005 85);
  --neutral-200: oklch(79% 0.005 85);
  --neutral-300: oklch(71% 0.006 85);
  --neutral-400: oklch(63% 0.006 85);
  --neutral-500: oklch(55% 0.006 85);
  --neutral-600: oklch(47% 0.006 85);
  --neutral-700: oklch(40% 0.006 85);
  --neutral-800: oklch(33% 0.006 85);
  --neutral-850: oklch(29% 0.006 85);
  --neutral-900: oklch(24% 0.006 85);
  --neutral-950: oklch(19.5% 0.006 85);
  --neutral-1000: oklch(12.5% 0.005 85);
  --night: oklch(15% 0.006 85);          /* the page */
  --night-raised: oklch(20% 0.006 85);   /* cards, panels */

  /* ---------- 2 · semantic roles (TMC's dark branch) -------------------------------------------------- */
  --bg: var(--night);
  --bg-raised: var(--night-raised);
  --bg-sunken: var(--neutral-1000);
  --bg-inverse: var(--neutral-25);
  --fg: var(--neutral-25);               /* ≈ 15:1 on the canvas */
  --fg-muted: oklch(74% 0.006 85);       /* ≈ 8:1 */
  --fg-subtle: oklch(62% 0.006 85);      /* ≈ 5.3:1 — large text / non-essential */
  --fg-inverse: var(--night);
  --fg-accent: oklch(92% 0.004 85);      /* links: carried by weight + underline, not hue */
  --hair: oklch(29% 0.006 85);           /* decorative dividers */
  --hair-strong: oklch(50% 0.006 85);    /* boundaries that must read, ≥ 3:1 */
  --brand: oklch(94% 0.004 85);          /* the "colour": paper */
  --brand-strong: oklch(98% 0.003 85);
  --brand-soft: oklch(25% 0.006 85);     /* tinted backgrounds = a raised grey */
  --accent: oklch(80% 0.006 85);
  --focus: oklch(90% 0.004 85);
  --on-brand: oklch(17% 0.006 85);       /* ink on the paper pill */
  --selection: color-mix(in oklab, var(--neutral-25) 26%, transparent);

  --frost-bg: color-mix(in oklab, var(--night) 64%, transparent);
  --frost-line: oklch(100% 0 0 / .09);
  --frost-blur: 8px;
  --panel-bg: var(--night-raised);

  --sh-1: 0 1px 2px oklch(0% 0 0 / .5), 0 1px 1px oklch(0% 0 0 / .3);
  --sh-2: 0 6px 16px -4px oklch(0% 0 0 / .55), 0 2px 4px -1px oklch(0% 0 0 / .4);
  --sh-3: 0 18px 40px -12px oklch(0% 0 0 / .7), 0 6px 12px -4px oklch(0% 0 0 / .45);
  --shadow-device: 0 60px 90px -36px oklch(0% 0 0 / .85), 0 24px 40px -20px oklch(0% 0 0 / .6);
  --highlight-top: inset 0 1px 0 oklch(100% 0 0 / .07);

  /* the primary surface: TMC's sphere gradient, as light on paper — a white highlight top-left, a grey bloom bottom-right */
  --grad-brand:
    radial-gradient(90% 120% at 8% -10%, oklch(100% 0 0 / .95) 0%, transparent 52%),
    radial-gradient(80% 140% at 104% 112%, oklch(78% 0.006 85 / .85) 0%, transparent 58%),
    radial-gradient(130% 150% at 42% 60%, oklch(95% 0.004 85) 0%, oklch(91% 0.005 85) 55%, oklch(85% 0.006 85) 100%);
  --grad-brand-hover:
    radial-gradient(90% 120% at 14% -6%, oklch(100% 0 0 / 1) 0%, transparent 56%),
    radial-gradient(80% 140% at 98% 108%, oklch(82% 0.006 85 / .8) 0%, transparent 60%),
    radial-gradient(130% 150% at 42% 60%, oklch(97.5% 0.003 85) 0%, oklch(94% 0.004 85) 58%, oklch(88% 0.005 85) 100%);
  /* the dark card surface (statement card, team photo wells): a grey sphere in the dark */
  --grad-night:
    radial-gradient(90% 120% at 8% -10%, oklch(58% 0.006 85 / .7) 0%, transparent 55%),
    radial-gradient(80% 140% at 104% 112%, oklch(40% 0.006 85 / .8) 0%, transparent 60%),
    radial-gradient(130% 150% at 42% 60%, oklch(30% 0.006 85) 0%, oklch(23% 0.006 85) 55%, oklch(17% 0.006 85) 100%);

  /* hero blinds (TMC #6): light clouds seen through reeded glass — white and greys instead of violet/pink */
  --blinds-a: oklch(62% 0.006 85);
  --blinds-b: oklch(46% 0.006 85);
  --blinds-c: oklch(80% 0.005 85);
  --blinds-reed-light: oklch(100% 0 0 / .07);
  --blinds-reed-dark: oklch(0% 0 0 / .22);
  --grain-opacity: .16;
  --grain-blend: screen;

  /* ---------- 4 · type ------------------------------------------------------------------------------ */
  --font-sans: 'Instrument Sans', 'Instrument Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans-heavy: 'Instrument Sans', 'Instrument Sans Bold Fallback', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', 'Instrument Serif Fallback', Georgia, serif;
  --font-statement: var(--font-sans);
  --font-mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;

  --text-display: clamp(2.25rem, 1.35rem + 5.1vw, 5.75rem);
  --text-h1: clamp(2.5rem, 1.45rem + 3.9vw, 4.5rem);
  --text-h2: clamp(1.875rem, 1.2rem + 2.75vw, 3.5rem);
  --text-h3: clamp(1.375rem, 1.12rem + .8vw, 1.875rem);
  --text-h4: clamp(1.125rem, 1.02rem + .35vw, 1.3125rem);
  --text-lead: clamp(1.1875rem, 1.02rem + .56vw, 1.4375rem);
  --text-body: clamp(1rem, .96rem + .14vw, 1.0625rem);
  --text-sm: .9375rem;
  --text-xs: .8125rem;
  --text-statement: clamp(3rem, 1.2rem + 6.2vw, 7.5rem);

  --lh-display: .98;
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-lead: 1.45;
  --lh-body: 1.6;

  --track-display: -.036em;
  --track-heading: -.03em;
  --track-tight: -.014em;
  --track-caps: .09em;

  /* Instrument Sans ships 400/500/600: TMC's 780-850 heading weights resolve to the 600 cut */
  --w-display: 600;
  --w-heading: 600;
  --w-strong: 600;
  --w-ui: 500;
  --w-body: 400;

  /* ---------- 5 · space & layout ------------------------------------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-13: 8rem;
  --space-14: 10rem;
  --container: 76rem;
  --container-wide: 84rem;
  --container-text: 44rem;
  --gutter: clamp(1rem, .2rem + 3.3vw, 2.5rem);
  --section-y: clamp(3.5rem, min(1.5rem + 6vw, 1rem + 12vh), 7.5rem);
  --nav-top: 16px;
  --nav-h: 60px;
  --topbar-h: 56px;
  --bar-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ---------- 6 · shape ----------------------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;
  --r-button: var(--r-full);   /* TMC and everything derived from it: pill buttons, always */
  --border: 1px;

  /* ---------- 7 · motion (transform/opacity only) ---------------------------------------------------- */
  --d-micro: 150ms;
  --d-ui: 240ms;
  --d-reveal: 480ms;
  --d-flip: 600ms;
  --d-spring: 420ms;
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --e-in: cubic-bezier(.55, 0, 1, .45);
  --e-spring: linear(0, .0445, .1476, .2758, .408, .5317, .6404, .7317, .8058, .8638, .9081, .9408, .9644,
    .9807, .9916, .9985, 1.0026, 1.0047, 1.0055, 1.0055, 1.0051, 1.0044, 1.0037, 1.003, 1);
  --stagger: 40ms;
  --reveal-distance: 20px;

  /* ---------- z-index ------------------------------------------------------------------------------- */
  --z-base: 1;
  --z-nav: 100;
  --z-dropdown: 110;
  --z-panel: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 1ms;
    --d-ui: 120ms;
    --d-reveal: 150ms;
    --d-flip: 150ms;
    --d-spring: 1ms;
    --reveal-distance: 0px;
  }
}