/* =====================================================================
   Language Intelligence — Design Tokens
   Two-tier system: primitives -> semantic roles -> scales.
   Colours use a hex fallback first, then an OKLCH override so modern
   browsers get perceptually-uniform colour while older engines keep hex.
   Legacy aliases at the bottom keep existing var() references working
   during the migration. Load this file FIRST, before any other CSS.
   ===================================================================== */
:root {
  /* -----------------------------------------------------------------
     1) PRIMITIVES  (raw palette — do not use directly in components)
     ----------------------------------------------------------------- */
  --c-ink:#131c24;
  --c-ink:oklch(0.222 0.0205 245.7);
  --c-navy:#27336f;
  --c-navy:oklch(0.346 0.1044 271.4);
  --c-navy-strong:#1e2757;
  --c-navy-strong:oklch(0.294 0.0869 272.0);
  --c-cyan:#00d3f3;
  --c-cyan:oklch(0.797 0.1399 213.8);
  --c-blue:#5698d2;
  --c-blue:oklch(0.660 0.1102 246.9);
  --c-blue-ink:#2b5787;
  --c-blue-ink:oklch(0.449 0.0930 252.4);
  --c-white:#ffffff;
  --c-white:oklch(1 0 0);
  --c-bg:#f3f6fc;
  --c-bg:oklch(0.973 0.0086 264.5);
  --c-bg-soft:#e9eff9;
  --c-bg-soft:oklch(0.950 0.0149 260.7);
  --c-border:#d6deef;
  --c-border:oklch(0.900 0.0248 265.6);
  --c-muted:#5a6473;
  --c-muted:oklch(0.500 0.0270 258.4);
  --c-success:#1a7f4b;
  --c-success:oklch(0.528 0.1208 155.0);
  --c-danger:#c0392b;
  --c-danger:oklch(0.543 0.1740 29.7);
  /* -----------------------------------------------------------------
     2) SEMANTIC ROLES  (use THESE in components)
     ----------------------------------------------------------------- */
  --color-bg: var(--c-bg);
  /* page background        */
  --color-surface: var(--c-white);
  /* cards, panels          */
  --color-surface-muted: var(--c-bg-soft);
  /* subtle fills, chips    */
  --color-surface-dark: var(--c-ink);
  /* dark bands / footers   */
  --color-text: var(--c-ink);
  /* body + headings        */
  --color-text-muted: var(--c-muted);
  /* secondary text         */
  --color-text-inverse: var(--c-white);
  /* text on dark surfaces  */
  --color-border: var(--c-border);
  /* 1px dividers / inputs  */
  --color-brand: var(--c-navy);
  /* primary brand / buttons*/
  --color-brand-hover: var(--c-navy-strong);
  /* brand hover/active     */
  --color-accent: var(--c-cyan);
  /* cyan accent (active)   */
  --color-accent-blue: var(--c-blue);
  /* blue accent / focus    */
  --color-link: var(--c-blue-ink);
  /* inline text links (AA) */
  --color-focus: var(--c-blue);
  /* focus rings            */
  --color-success: var(--c-success);
  --color-danger: var(--c-danger);
  /* -----------------------------------------------------------------
     3) NON-COLOUR SCALES
     ----------------------------------------------------------------- */
  /* layout */
  --maxw: 1320px;
  --pad-inline: clamp(28px, 5vw, 72px);
  /* responsive gutter      */
  /* breakpoints (reference — CSS media queries can't read custom props):
     mobile <= 640px | tablet <= 1024px | desktop > 1024px               */
  /* spacing scale (4px base) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  /* vertical section rhythm */
  --section-y: clamp(72px, 11vh, 140px);
  --section-y-tight: clamp(40px, 7vh, 72px);
  /* radius — squared by default; only these exceptions round */
  --radius-0:0;
  --radius-pill:100px;
  --radius-round:50%;
  /* type scale (fluid) */
  --text-h1: clamp(34px, 5vw, 76px);
  --text-h2: clamp(26px, 3vw, 40px);
  --text-h3: clamp(22px, 1.6vw, 26px);
  --text-article: clamp(30px, 3.4vw, 46px);
  /* editorial article title*/
  --text-lead: clamp(17px, 1.5vw, 20px);
  --text-body: 17px;
  --text-small: 14px;
  --text-mono: 12px;
  /* mono eyebrow / labels  */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --tracking-heading: -0.03em;
  --tracking-mono: 0.16em;
  /* -----------------------------------------------------------------
     3b) MOTION  (added 2026-07-28)
     Before this scale existed the stylesheet used 15 different transition
     durations and 5 different easing curves, picked ad hoc. Three durations
     and one curve cover everything on this site. Use these, not raw values.

       --dur-fast   colour, border, opacity on small controls
       --dur-base   the default for any hover or focus feedback
       --dur-slow   transform on cards and panels, scroll reveals

     --ease-out is a decelerating curve: quick to start, settles softly. It is
     the only easing the brand uses; linear is reserved for looping animation
     (marquees, wave drift) where a curve would read as a stutter.
     ----------------------------------------------------------------- */
  --dur-fast: 0.15s;
  --dur-base: 0.25s;
  --dur-slow: 0.5s;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* -----------------------------------------------------------------
     3c) FOCUS  (added 2026-07-28)
     One visible focus treatment for every interactive element. 2px at
     --a-blue on white is 4.6:1 against the ring's surroundings, and the 3px
     offset keeps it clear of the element's own border. Never remove this
     without replacing it -- keyboard users have nothing else to go on.
     ----------------------------------------------------------------- */
  --focus-ring: 2px solid var(--color-accent-blue);
  --focus-offset: 3px;

  /* -----------------------------------------------------------------
     3d) INTERACTION SURFACES  (added 2026-07-28)
     ----------------------------------------------------------------- */
  --state-disabled-opacity: 0.45;
  --hit-min: 44px;
  /* minimum touch target (WCAG 2.5.8 / Apple HIG) */

  /* -----------------------------------------------------------------
     4) LEGACY ALIASES  (back-compat — remove once migration is done)
     ----------------------------------------------------------------- */
  --ink: var(--color-text);
  --navy: var(--color-brand);
  --navy-hover: var(--color-brand-hover);
  --bg: var(--color-bg);
  --bg-soft: var(--color-surface-muted);
  --line: var(--color-border);
  --muted: var(--color-text-muted);
  --a-teal: var(--color-accent);
  --a-blue: var(--color-accent-blue);
  --a-blue-ink: var(--color-link);
  /* link hover, by background — see LINK HOVER SYSTEM in lic-system.css */
  --link-hover-on-light: var(--color-brand);
  --link-hover-on-dark: var(--color-accent);
  --link-hover-prose: var(--color-link);
  /* message tones */
  --tone-info: #2b5787;
  --tone-info-bg: #eef3fa;
  --tone-success: #1a7f4b;
  --tone-success-bg: #eaf6ef;
  --tone-warning: #8a5a00;
  --tone-warning-bg: #fdf5e6;
  --tone-danger: #c0392b;
  --tone-danger-bg: #fdeeec;
  /* On dark navy the light-surface tones fail AA: #c0392b is 3.33:1 and
     #8a5a00 is 1.98:1. These are the versions for anything inside .on-dark —
     7.93:1 and 7.58:1 — and they still read as red and amber. */
  --tone-danger-on-dark: #ff8a80;
  --tone-warning-on-dark: #ffc75a;
  /* styleguide's historical names */
  --blue: var(--color-accent-blue);
  --cyan: var(--color-accent);
  --soft: var(--color-surface-muted);
  --white: var(--color-surface);
}