@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap");
/* Cadence — typography. Two systems that never mix: UI chrome vs the reader. */
:root {
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  --font-ui-display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  --font-reading-serif:Georgia,"New York",Charter,serif;
  --font-reading-sans:"Avenir Next",-apple-system,"SF Pro Text",sans-serif;
  --font-reading-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-reading-dyslexic:"OpenDyslexic",Georgia,serif; /* binary not shipped — see readme */

  /* Size scale (px on web ≈ pt) */
  --text-2xs:10px; --text-xs:11px; --text-sm:13px; --text-base:15px;
  --text-md:17px; --text-lg:20px; --text-xl:24px; --text-2xl:28px; --text-3xl:34px;

  /* Weights stop at 700. 700 = one per screen; 600 = controls/boundaries; 400 = content. */
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Leading */
  --leading-tight:1.18; --leading-snug:1.3; --leading-normal:1.4;
  --leading-relaxed:1.55; /* reader body — functional, protects the moving highlight */
  --leading-loose:1.7;    /* dyslexic face */

  /* Tracking */
  --tracking-tighter:-0.4px; --tracking-tight:-0.24px; --tracking-normal:0;
  --tracking-wide:0.4px; --tracking-wider:0.8px;

  /* Composed styles as shorthand vars: font: var(--type-…) */
  --type-display:700 28px/1.18 var(--font-ui-display);
  --type-title-1:700 24px/1.3 var(--font-ui-display);
  --type-title-2:600 20px/1.3 var(--font-ui-display);
  --type-nav-title:600 17px/1.3 var(--font-ui);
  --type-body:400 17px/1.4 var(--font-ui);
  --type-body-emphasis:600 17px/1.4 var(--font-ui);
  --type-callout:400 15px/1.4 var(--font-ui);
  --type-callout-emphasis:600 15px/1.4 var(--font-ui);
  --type-footnote:400 13px/1.4 var(--font-ui);
  --type-caption:600 11px/1.3 var(--font-ui);
  --type-tab-label:500 10px/1.3 var(--font-ui);
  --type-button:600 17px/1.3 var(--font-ui);
  --type-reading-body:400 17px/1.55 var(--font-reading-serif);
  --type-reading-h1:700 24px/1.3 var(--font-reading-serif);
  --type-numeric:500 13px/1.3 var(--font-ui); /* pair with font-variant-numeric: tabular-nums */

  --reading-measure:68ch;
  --content-max:720px;
}