/* ==========================================================================
   INFO MEMA — Design Tokens
   Source of truth: "Visual Design System" tab, Website Information
   Architecture doc (claude.ai artifact 5da2a374-d34c-4e62-a478-74dda06833ae)
   ========================================================================== */

:root {
  /* ---- Colour system --------------------------------------------------- */
  --c-navy: #004478;          /* anchor — ~55% of visual weight */
  --c-navy-rgb: 0, 68, 120;
  --c-sky: #00AFE9;           /* signal colour — links, active states, focus */
  --c-sky-rgb: 0, 175, 233;
  --c-sky-on-navy: #33BFED;   /* lightened sky for text on the #004478 navy surface — plain sky only clears 3.96:1 there (fails AA 4.5:1); this clears 4.68:1. Deep-navy (#00203D) is dark enough for plain sky (6.52:1) and doesn't need this. */
  --c-mint: #DCF7F7;          /* breathing room — alt section / card fill */
  --c-mint-rgb: 220, 247, 247;
  --c-paper: #FFFFFF;         /* primary canvas */
  --c-deep-navy: #00203D;     /* dark-mode / deep hero backgrounds, footer base */
  --c-deep-navy-rgb: 0, 32, 61;
  --c-ink: #12222E;           /* body copy colour instead of pure black */
  --c-ore-copper: #A85A28;    /* reserved: ore-grade / commodity-data callouts ONLY */

  /* Navy at reduced opacity, used constantly for hairlines */
  --c-navy-12: rgba(var(--c-navy-rgb), 0.12);
  --c-navy-08: rgba(var(--c-navy-rgb), 0.08);
  --c-navy-30: rgba(var(--c-navy-rgb), 0.30);
  --c-navy-60: rgba(var(--c-navy-rgb), 0.60);   /* decorative use only (borders, non-text fills) — fails WCAG AA for text */
  --c-navy-muted: rgba(var(--c-navy-rgb), 0.75); /* WCAG AA-safe muted navy for small/label text on paper or mint (>=4.5:1) */
  --c-sky-15: rgba(var(--c-sky-rgb), 0.15);
  --c-white-12: rgba(255, 255, 255, 0.12);
  --c-white-30: rgba(255, 255, 255, 0.30);
  --c-white-70: rgba(255, 255, 255, 0.72);

  /* ---- Typography -------------------------------------------------------
     Fraunces (display/headings) · IBM Plex Sans (body/UI) ·
     IBM Plex Mono (every measured figure: grades, dates, reg numbers) */
  --font-display: "Fraunces", "Iowan Old Style", ui-serif, Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale — mobile value first, clamps up on desktop */
  --fs-eyebrow: 0.8125rem;                       /* 13px */
  --fs-h1: clamp(2.25rem, 1.55rem + 3.2vw, 4.5rem);   /* 36px -> 72px */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);   /* 28px -> 44px */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);  /* 22px -> 28px */
  --fs-h4: 1.125rem;                             /* 18px */
  --fs-body-lg: 1.125rem;                        /* 18px */
  --fs-body: 1rem;                               /* 16px */
  --fs-small: 0.875rem;                          /* 14px */
  --fs-stat: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);  /* stat-tile figures */

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  --tracking-eyebrow: 0.08em;
  --tracking-tight: -0.01em;

  /* ---- Spacing (8px base unit) ------------------------------------------ */
  --sp-1: 0.5rem;   /* 8px */
  --sp-2: 1rem;     /* 16px */
  --sp-3: 1.5rem;   /* 24px */
  --sp-4: 2rem;     /* 32px */
  --sp-5: 3rem;     /* 48px */
  --sp-6: 4rem;     /* 64px */
  --sp-7: 6rem;     /* 96px */
  --sp-8: 8rem;     /* 128px */

  --section-space: var(--sp-7);   /* mobile section rhythm */

  /* ---- Radius (near-zero across the system) ----------------------------- */
  --radius-btn: 3px;
  --radius-card: 5px;
  --radius-input: 2px;
  --radius-image: 0px;

  /* ---- Borders ------------------------------------------------------------ */
  --border-hairline: 1px solid var(--c-navy-12);
  --border-hairline-dark: 1px solid var(--c-white-12);

  /* ---- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-entry: 240ms;
  --dur-slow: 800ms;
  --dur-slowest: 900ms;

  /* ---- Layout --------------------------------------------------------------- */
  --content-max: 1280px;
  --measure-narrow: 60ch;
  --gutter: 20px;
}

@media (min-width: 768px) {
  :root {
    --section-space: var(--sp-8);
    --gutter: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-entry: 0ms;
    --dur-slow: 0ms;
    --dur-slowest: 0ms;
  }
}