/* ==========================================================================
   SPI — tokens.css
   Locked brand values from brand/spi-brand-tokens.css, plus the derived
   scale the site is built on. Change values here, not in components.
   ========================================================================== */

:root {

  /* --- Locked brand colours (do not alter) ------------------------------ */
  --spi-ink:    #0B1D35;
  --spi-ivory:  #F7F4EE;
  --spi-gold:   #B67D2A;
  --spi-forest: #123524;
  --spi-white:  #FFFFFF;
  --spi-black:  #000000;

  /* --- Derived neutrals -------------------------------------------------
     Tinted toward ink rather than pure grey so the whole surface reads warm
     navy rather than default-template grey.                                */
  --ink-90:   #22344B;   /* strong secondary text on white */
  --ink-70:   #45536A;   /* body copy on white — 7.4:1 */
  --ink-55:   #5D6875;   /* supporting text on white — 5.7:1 */
  --ink-line: #D8DCE2;   /* hairline on white */
  --ink-line-soft: #E7E9ED;
  --ink-panel: #10243E;  /* one step off ink for nested navy surfaces */

  /* Text on navy */
  --on-ink:      #FFFFFF;
  --on-ink-80:   #CFD8E3;  /* 9.9:1 */
  --on-ink-60:   #9EAEC1;  /* 5.4:1 */
  --on-ink-line: rgba(255, 255, 255, 0.22);

  /* --- Accent usage rules -----------------------------------------------
     Gold on navy  = 4.80:1 → passes AA for all text.
     Gold on white = 3.53:1 → LARGE TEXT ONLY (>=24px, or >=18.7px bold).
     On white surfaces gold is therefore restricted to rules, borders,
     focus rings and display-scale numerals. Small labels on white use
     --ink-55. See IMPLEMENTATION_NOTES.md.                                */
  --gold-rule:  #B67D2A;
  --gold-wash:  #F4EADA;
  --focus-ring: #B67D2A;

  /* --- Typography -------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Fraunces axes. WONK 0 / SOFT 0 keeps the face editorial rather than
     friendly — this is the single setting that governs the site's voice.  */
  --fr-axes: "SOFT" 0, "WONK" 0;

  /* Institutional scale: deliberately smaller at the top end than a
     product site. Display maxes at 60px, not 105px.                       */
  --fs-hero:    clamp(2.5rem, 1.55rem + 3.1vw, 3.75rem);   /* 40 → 60 */
  --fs-h2:      clamp(1.875rem, 1.35rem + 1.75vw, 2.625rem); /* 30 → 42 */
  --fs-h3:      clamp(1.25rem, 1.06rem + 0.6vw, 1.5rem);   /* 20 → 24 */
  --fs-h4:      1.125rem;
  --fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-label:   0.6875rem;

  --lh-display: 1.1;
  --lh-heading: 1.22;
  --lh-body:    1.65;

  --tracking-label: 0.16em;

  /* --- Spacing — 4px base ------------------------------------------------ */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;

  /* Section rhythm */
  --band-y:    clamp(3.5rem, 2.1rem + 5vw, 6.5rem);
  --band-y-lg: clamp(4rem, 2rem + 5vw, 5rem);

  /* --- Layout ------------------------------------------------------------ */
  --shell: 1180px;
  --gutter: clamp(1.25rem, 0.55rem + 2.8vw, 2.5rem);
  --measure: 68ch;
  --measure-tight: 58ch;

  --header-h: 80px;
  --header-h-sm: 64px;

  /* --- Shape --------------------------------------------------------------
     Square by default. Institutional publishing does not have rounded
     corners; the only radius in the system is 2px on the logo mark.       */
  --radius: 0;

  /* --- Motion ------------------------------------------------------------- */
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0.6, 0.35, 1);
}