/* ═══ Shared design tokens — loaded by every page before the other shared sheets ═══
   Load order (every page): tokens.css → typography.css → components.css →
   [case-study.css on case-study pages] → nav.css */
:root{
  /* font families (pages also alias these as --serif / --sans) */
  --font-display:"DM Serif Display",Georgia,serif;
  --font-sans:"DM Sans",Inter,Arial,sans-serif;

  /* primitive font sizes */
  --fs-100:.75rem;    /* 12px */
  --fs-200:.8125rem;  /* 13px */
  --fs-300:.875rem;   /* 14px */
  --fs-400:1rem;      /* 16px */
  --fs-450:clamp(1rem,1.4vw,1.0625rem); /* 16→17px small lede */
  --fs-500:clamp(1.125rem,1.05rem + .3vw,1.25rem);
  --fs-600:clamp(1.5rem,1.2rem + 1vw,2rem);
  --fs-700:clamp(2.25rem,1.5rem + 2.5vw,3.5rem);
  --fs-800:clamp(3rem,1.7rem + 5vw,6rem);
  --fs-900:clamp(3.25rem,1.5rem + 8vw,9rem);

  /* semantic font sizes */
  --text-caption:var(--fs-100);       /* image sources, figure numbers, copyright */
  --text-label:var(--fs-200);         /* section labels, badges, eyebrows, nav */
  --text-meta:var(--fs-300);          /* role/timeline/platform, research samples */
  --text-body:var(--fs-400);          /* core narrative copy — never smaller */
  --text-lede-sm:var(--fs-450);       /* hero descriptions, chapter ledes, sub copy */
  --text-lede:var(--fs-500);
  --text-card-title:var(--fs-600);
  --text-section-title:var(--fs-700);
  --text-chapter-title:var(--fs-800);
  --text-display:var(--fs-900);

  /* line heights */
  --lh-display:.98;
  --lh-tight:.98;      /* legacy alias of --lh-display */
  --lh-heading:1.08;
  --lh-card:1.2;
  --lh-ui:1.4;
  --lh-lede:1.6;
  --lh-body:1.7;

  /* readable measures */
  --measure-body:65ch;
  --measure-lede:56ch;

  /* ── vertical rhythm scale (shared across all case-study pages) ──
     Consistent spacing system so every page reads with the same rhythm:
       --space-section : major section-to-section break (the base section padding)
       --space-emphasis: climax / storytelling sections (reflection, closing)
       --space-sub     : large gap between related sub-groups inside one section
       --space-head    : section header / heading → its content
       --space-lede    : title → lede, and other tight heading-group gaps
       --space-caption : media → caption, caption → supporting content */
  --space-section:clamp(72px,10vw,140px);
  --space-emphasis:clamp(88px,11vw,168px);
  --space-sub:clamp(52px,7.5vw,100px);
  --space-head:clamp(28px,4vw,52px);
  --space-lede:clamp(18px,2.4vw,28px);
  --space-caption:clamp(12px,1.4vw,18px);
}