:root{
/* families */
--font-display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
--font-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

/* weights */
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;

/* size scale (1.200 minor third, 17px base).
   Display steps are fluid so a long word like "Comprehensive" still fits a 320px
   viewport without horizontal scrolling (WCAG 1.4.10 Reflow). The upper bound of
   each clamp is the design value; the lower bound is the small-screen size. */
--text-2xs:12px;--text-xs:13px;--text-sm:15px;--text-base:17px;--text-md:19px;
--text-lg:22px;--text-xl:26px;
--text-2xl:clamp(26px,5.2vw,32px);
--text-3xl:clamp(29px,6.4vw,39px);
--text-4xl:clamp(32px,7.6vw,47px);
--text-5xl:clamp(35px,9vw,56px);
--text-6xl:clamp(39px,11vw,68px);

/* line heights */
--leading-tight:1.1;--leading-snug:1.25;--leading-normal:1.5;--leading-relaxed:1.65;

/* tracking */
--tracking-tight:-0.02em;--tracking-normal:0;--tracking-wide:0.02em;--tracking-caps:0.08em;

/* composed roles */
--type-display:600 var(--text-5xl)/var(--leading-tight) var(--font-display);
--type-h1:600 var(--text-4xl)/var(--leading-tight) var(--font-display);
--type-h2:600 var(--text-3xl)/var(--leading-snug) var(--font-display);
--type-h3:600 var(--text-2xl)/var(--leading-snug) var(--font-display);
--type-h4:600 var(--text-xl)/var(--leading-snug) var(--font-display);
--type-lead:400 var(--text-md)/var(--leading-relaxed) var(--font-body);
--type-body:400 var(--text-base)/var(--leading-relaxed) var(--font-body);
--type-small:400 var(--text-sm)/var(--leading-normal) var(--font-body);
--type-label:600 var(--text-sm)/var(--leading-normal) var(--font-body);
--type-eyebrow:700 var(--text-xs)/var(--leading-normal) var(--font-body);
}