/* ==========================================================================
   tokens.css — Design tokens (single source of truth)

   The site runs in a single light theme: a white page carried by a cool
   blue-grey ink, with one light-blue brand hue for links, accents, washes
   and gradients. Every colour pairing below is checked against WCAG AA
   (4.5:1 for body text, 3:1 for large text and UI edges) so nothing on the
   site relies on a reader straining.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Brand: light blue -------------------------------------------------
     Light end carries washes, tints and edges; dark end carries text and
     fills that sit under white. Contrast on white: 500 = 3.1:1 (UI only),
     600 = 4.3:1 (large text, icons, borders), 700 = 6.2:1 (body copy).    */
  --blue-50: #f0f8ff;
  --blue-100: #dceffb;
  --blue-200: #bfe2f8;
  --blue-300: #93cff2;
  --blue-400: #5db6e8;
  --blue-500: #2f9bd9;
  --blue-600: #1580bd; /* icons, borders, large text          4.3:1 */
  --blue-700: #0f6699; /* links, accent text at body size     6.2:1 */
  --blue-800: #0d5279; /* button fill, light end              8.4:1 */
  --blue-900: #0d4260;
  --blue-950: #082c40;

  /* ---- Accent: warm amber -----------------------------------------------
     One warm note, reserved for "Coming Soon" and required-field marks so
     it never competes with the brand blue.                                 */
  --accent-100: #fdf3e0;
  --accent-300: #f0c987;
  --accent-400: #d99a2b;
  --accent-600: #a8730f;
  --accent-700: #8a5d0a; /* amber that clears AA on white     5.8:1 */

  /* ---- Neutrals: blue-tinted light ---------------------------------------
     The ramp is ordered by DEPTH FROM THE PAGE, not by lightness: --n-950
     is the furthest-back ground (the footer), --n-100 is the frontmost ink
     (body text). That keeps every existing reference reading correctly.   */
  --n-950: #eef6fb; /* footer, deepest ground */
  --n-900: #ffffff; /* page background */
  --n-850: #f4f9fd; /* alternating sections, mobile nav sheet */
  --n-800: #ffffff; /* cards, panels, modal dialog */
  --n-750: #f7fbfe; /* raised / hover */
  --n-700: #c3d8e6; /* strong borders, scrollbar thumb */
  --n-600: #a9c0d0; /* borders on interactive elements */
  --n-400: #596c7b; /* muted text   5.5:1 white, 5.0:1 on the footer tint */
  --n-300: #3d5566; /* secondary text      7.8:1 on white */
  --n-100: #14212b; /* primary text       16.4:1 on white */

  /* Institution marks are dark ink on transparent; a faint blue pad keeps
     each pair reading as one unit against the white page. */
  --chip: #f2f7fb;

  /* ---- Channel triplets ---------------------------------------------------
     Used as rgb(var(--x) / <alpha>) wherever a tint, hairline or shadow
     needs the same hue at a different opacity. One place to retune.       */
  --brand-rgb: 21 128 189; /* --blue-600 */
  --brand-deep-rgb: 11 92 134;
  --ink-rgb: 15 42 61; /* hairlines, scrims, shadows */
  --accent-rgb: 217 154 43; /* --accent-400 */
  --danger-rgb: 179 38 30;

  /* ---- Semantic ---------------------------------------------------------- */
  --bg: var(--n-900);
  --bg-alt: var(--n-850);
  --surface: var(--n-800);
  --surface-raised: var(--n-750);
  --line: rgb(var(--ink-rgb) / 0.1);
  --line-strong: rgb(var(--ink-rgb) / 0.18);

  --text: var(--n-100);
  --text-soft: var(--n-300);
  --text-mute: var(--n-400);
  --heading: #0c1a24;

  --brand: var(--blue-700);
  --brand-soft: var(--blue-800);
  --accent: var(--accent-700);

  --success: #0f7a4f;
  --danger: #b3261e;

  /* ---- Gradients ---------------------------------------------------------
     Blue only. Both stops of --grad-brand stay dark enough for white text
     (7.3:1 and 4.9:1); --grad-text stays dark enough to read on white.    */
  --grad-brand: linear-gradient(135deg, #0b5c86 0%, #1478a8 100%);
  --grad-brand-hover: linear-gradient(135deg, #0a5074 0%, #12729f 100%);
  --grad-text: linear-gradient(100deg, var(--blue-800), var(--blue-600));
  --grad-deep: linear-gradient(165deg, #e7f4fc 0%, #f2f9fd 55%, #ffffff 100%);
  --grad-veil: linear-gradient(180deg, rgb(var(--brand-rgb) / 0.08), transparent 70%);

  /* ---- Typography --------------------------------------------------------
     Source Serif 4 for headings, Inter for everything else: one editorial
     serif against one neutral UI sans, sharing a tall x-height so they sit
     evenly on the same line.                                               */
  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype",
    Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-display: clamp(2.3rem, 1.5rem + 3.2vw, 3.85rem);
  --fs-h1: clamp(1.95rem, 1.4rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  --fs-h4: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
  --fs-lead: clamp(1.06rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.14;
  --lh-snug: 1.32;
  --lh-body: 1.7;
  --lh-loose: 1.78;

  /* ---- Spacing ------------------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;

  --section-y: clamp(3.25rem, 2rem + 5.5vw, 6.5rem);
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

  /* ---- Layout ------------------------------------------------------------- */
  --max-wide: 1200px;
  --max-content: 1040px;
  --max-prose: 66ch;
  --header-h: 96px;

  /* ---- Radii -------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Elevation ----------------------------------------------------------
     On a white ground the shadow does the lifting and the hairline only
     defines the edge — the reverse of how the dark build worked.          */
  --sh-xs: 0 1px 2px rgb(var(--ink-rgb) / 0.06);
  --sh-sm: 0 2px 10px rgb(var(--ink-rgb) / 0.07);
  --sh-md: 0 12px 28px -14px rgb(var(--ink-rgb) / 0.22);
  --sh-lg: 0 28px 60px -26px rgb(var(--ink-rgb) / 0.3);

  /* ---- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 560ms;

  /* ---- Focus -------------------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--blue-600);

  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 210;
  --z-toast: 300;
}