/* ========================================================================== The Measurement Lab — Typography Tokens (WEB) -------------------------------------------------------------------------- This replaces the deck typography tokens. The original carried the PowerPoint scale (14px body, 30px "hero") and a --slide-* block for 1280x720 slide recreations. The Claude Design output ignored all of it and set 31 ad-hoc pixel sizes inline, so there was no web scale to inherit. DERIVATION RULE (revised July 2026 after a measurement check) ------------------------------------------------------------- Two different things were going on in those 31 sizes, and only one of them was noise: 1. HALF-PIXEL DRIFT — 11.5 / 12.5 / 13.5 / 14.5 / 15.5 / 16.5 / 18.5. Each sits beside a round neighbour with comparable usage. Half a pixel is invisible and rounds inconsistently across browsers. These collapse DOWN to their round neighbour (-2.7% to -4.3%). 2. DISTINCT ROUND SIZES — 16 vs 17, 19 vs 20, 30 vs 34, 38 vs 40 vs 42. These are choices the design made, not drift. An earlier version of this file merged them into shared tiers and took the TOP of each tier as the value, which inflated 25 elements — the worst by +13%. That was drift away from the approved design, introduced by the port. So: every distinct round size in the design output now gets its own token. The scale has more steps than a designed-from-scratch scale would, which is the honest consequence of the source having no type system. Fidelity to the approved design beats a tidier ramp we were never asked for. NET RESULT: zero upward drift. The only remaining deltas are the intentional half-pixel collapses, all downward, all under 5%. FAMILY ORDER IS A LICENSING CONSTRAINT, NOT A PREFERENCE. Carlito leads because Carlito is what we are permitted to serve. Calibri follows so locally-installed copies still win. Never reorder these. WEIGHTS: 400 and 700 only. Carlito has no Light — every deck token that specified 300 maps to 400 here (approved July 2026). ========================================================================== */ :root { /* ---- Families ---- */ --font-sans: "Carlito", "Calibri", "Segoe UI", system-ui, sans-serif; --font-wordmark: "Plus Jakarta Sans", "Carlito", "Calibri", sans-serif; /* ---- Weights ---- */ --weight-regular: 400; --weight-bold: 700; /* ---- Text scale (fixed px, as in the design) ----------------------- Body copy does not scale with viewport; it was fixed in the design and stays fixed here. Comment shows the design sizes each token absorbs. */ --fs-4xs: 10px; /* 9 -> 10 lightbox footer wordmark. The ONE deliberate upward change: 9px is below comfortable legibility and would fail an a11y review. Accessibility over fidelity, approved July 2026. Single element affected. */ --fs-3xs: 10px; /* 10 chevrons, reserved-slot label */ --fs-2xs: 11px; /* 11, 11.5 "see what you'll receive", chart labels */ --fs-xs: 12px; /* 12, 12.5 eyebrows, footer, open/close, copyright */ --fs-sm: 13px; /* 13, 13.5 card sublabels, disclosure, pager, step */ --fs-base: 14px; /* 14, 14.5 nav, footer links, sample button, summary */ --fs-md: 15px; /* 15, 15.5 product summaries, "You leave with" (most used size on the site: 41 elements) */ --fs-lg: 16px; /* 16, 16.5 CTAs, diagnostic buttons, sub-analyses */ --fs-xl: 17px; /* 17 diagnostic blurb, lightbox title */ --fs-2xl: 18px; /* 18, 18.5 thesis body, product names on Services */ --fs-3xl: 19px; /* 19 hero clarifier, proof cards, close body */ --fs-4xl: 20px; /* 20 "Find yours." */ /* ---- Display scale ------------------------------------------------- Max of each clamp is EXACTLY the design output value, reached at a 900px viewport. Every one therefore renders at its design px on any desktop width (1280 / 1920 / 2560 all identical). Below 900px they scale down linearly to a mobile minimum, so the mobile pass inherits sane display type instead of 66px headlines on a phone. Two downward collapses only: 24 -> 23 and 27 -> 26. */ --fs-display-1: clamp(20px, 0.57vw + 17.9px, 23px); /* 23, 24: hero kicker, Home stage names */ --fs-display-2: clamp(22px, 0.76vw + 19.1px, 26px); /* 26, 27: Services stage names, diag prompt*/ --fs-display-3: clamp(24px, 1.14vw + 19.7px, 30px); /* 30: diagnostic intro */ --fs-display-4: clamp(26px, 1.52vw + 20.3px, 34px); /* 34: diagnostic result title */ --fs-display-5: clamp(28px, 1.90vw + 20.9px, 38px); /* 38: Proof H2 */ --fs-display-6: clamp(29px, 2.10vw + 21.1px, 40px); /* 40: Diagnostic H2, stage numerals */ --fs-display-7: clamp(30px, 2.29vw + 21.4px, 42px); /* 42: Thesis H2, Three Stages H2 */ --fs-display-8: clamp(32px, 2.67vw + 22.0px, 46px); /* 46: Home close H2 */ --fs-display-9: clamp(34px, 2.67vw + 24.0px, 48px); /* 48: Services H1 */ --fs-hero: clamp(38px, 5.33vw + 18.0px, 66px); /* 66: Home hero H1 */ /* ---- Line heights ---- */ --leading-tight: 1.2; /* display / headings */ --leading-snug: 1.35; /* subheads, card copy */ --leading-body: 1.5; /* running text */ /* ---- Letter-spacing ---- */ --tracking-tight: -0.01em; /* large display sizes */ --tracking-label: 0.06em; /* uppercase eyebrows + labels */ --tracking-wordmark: 0.34em; /* logo wordmark only */ /* ---- Measure ---- */ --measure-prose: 68ch; /* cap running-text line length */ } /* -------------------------------------------------------------------------- NOTE ON --fs-4xs (9px) Preserved to match the design output exactly, per the no-upward-drift rule. It is used once: the wordmark in the Services lightbox footer. 9px is below what is comfortably legible and would fail a strict accessibility review. Flagged for Olivia — raising it to 10px is a one-token change, but it is a design decision, not a porting decision, so it has been left faithful. -------------------------------------------------------------------------- */