/* =====================================================================
   IPSB — design tokens
   Deep petrol-teal authority · cool misty paper · brass credential cues.
   Spectral (display) · Public Sans (UI) · Spline Sans Mono (credentials).
   Change values here to retheme the whole site.
   ===================================================================== */
:root {
  /* ---- Colour ---- */
  --paper:        #EDF0F0;   /* page base — cool mist, not cream */
  --paper-2:      #E5EAEA;   /* alternating section tint */
  --surface:      #FFFFFF;   /* cards / panels */
  --surface-2:    #F6F8F8;   /* inset surface */

  --ink:          #0E353A;   /* primary authority colour (petrol-teal) */
  --ink-700:      #12454C;   /* primary hover */
  --ink-2:        #08262A;   /* darkest — headings, dark sections */

  --text:         #243034;   /* body text */
  --muted:        #5C6B6E;   /* secondary text */
  --faint:        #8A9896;   /* tertiary / placeholder */

  --line:         #DCE1E1;   /* hairline borders */
  --line-2:       #C9D0D0;   /* stronger borders / inputs */

  --brass:        #9C7A3C;   /* credential cue — use sparingly */
  --brass-2:      #B08F4F;
  --brass-soft:   #F0E7D4;

  --accent:       #15786E;   /* links / active states */
  --accent-700:   #0F5F57;

  --correct:      #1E7F4E;   --correct-bg: #E5F3EB;   --correct-line: #B7DCC4;
  --wrong:        #B23B33;   --wrong-bg:   #F8E8E6;   --wrong-line:   #E8C3BE;
  --warn:         #9A6A12;

  --on-dark:       #EAF1EF;
  --on-dark-muted: #9DB6B2;

  --focus: rgba(21, 120, 110, .45);

  /* ---- Type ---- */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans:    "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs:      .8125rem;   /* 13 */
  --fs-sm:      .9375rem;   /* 15 */
  --fs-base:    1.0625rem;  /* 17 — editorial, trustworthy body */
  --fs-md:      1.1875rem;  /* 19 */
  --fs-lg:      1.4375rem;  /* 23 */
  --fs-xl:      1.8125rem;  /* 29 */
  --fs-2xl:     2.375rem;   /* 38 */
  --fs-3xl:     3.125rem;   /* 50 */
  --fs-display: clamp(2.6rem, 1.4rem + 4vw, 4rem);

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh:       1.6;

  /* ---- Space ---- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;  --sp-9: 6rem;

  /* ---- Radius ---- */
  --r-xs: 4px; --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* ---- Elevation (low, petrol-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(8,38,42,.06), 0 1px 1px rgba(8,38,42,.04);
  --shadow:    0 4px 14px rgba(8,38,42,.08), 0 2px 5px rgba(8,38,42,.05);
  --shadow-lg: 0 18px 50px rgba(8,38,42,.14), 0 8px 18px rgba(8,38,42,.08);

  /* ---- Layout ---- */
  --container:        1140px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2rem);

  /* ---- Motion ---- */
  --tr:      200ms cubic-bezier(.2,.7,.3,1);
  --tr-slow: 420ms cubic-bezier(.2,.7,.3,1);
}

/* ---- Step 2 additions (landing + certificate) ---- */
:root{
  --paper-warm:  #FBFAF4;   /* certificate / seal medallion ground */
  --brass-deep:  #6F5526;   /* brass text on light, label colour */
  --on-dark-line: rgba(255,255,255,.12);
  --font-script: "Pinyon Script", cursive;   /* registrar signature only */
}