/* ══════════════════════════════════════════════════════════════════════════ sf-final-typography.css — ONE TYPE SYSTEM, EVERY PAGE. THE STANDARD is the client's own shipped pair, declared in the built theme.css and served from brand_assets/fonts/ (self-hosted, no CDN): --sf-font-display Sora (variable 100–800) headings, brand marks --sf-font-body Manrope (variable 200–800) everything else --sf-font-mono JetBrains Mono (variable 100–800) lot codes, refs WHAT THIS SHEET IS FOR. The inventory (26 built pages, computed styles read in a real browser) found SIX distinct font stacks on the site and four of them were nobody's decision: 1. tailwind's preflight sets `html { font-family: ui-sans-serif … }` and tailwind.min.css loads AFTER theme.css / sf-base.css / sf-refresh.css, so the SYSTEM sans was the inherited default on every tailwind page. 404.html has no body-level font rule at all, so the WHOLE PAGE — nav, headline, body copy, buttons — rendered in the system sans. 2. invoice.html, verify-email.html and unsubscribe.html link no tailwind, so their root fell all the way to the UA default: TIMES NEW ROMAN. 3. admin.html links fonts.css + admin.css and NOTHING ELSE, so its `body { font-family: var(--sf-font-body, 'Public Sans' …) }` never saw the variable and 820 elements rendered in PUBLIC SANS — a face this client does not use. 4. coa-library.html / login.html / register.html each carry a page-local `h1,h2,h3,h4,h5,h6 { font-family: var(--sf-font-body) }`, so their headings were set in the BODY face while every other page's headings were set in the display face. invoice.html and gate.html had the mirror-image defect — `body { font-family: var(--sf-font-display) }`, i.e. body copy in the DISPLAY face. WHY THIS SHEET CAN WIN. index.mjs links it LAST in , after theme.css, sf-base.css, sf-refresh.css AND tailwind.min.css. Every rule below is a BARE ELEMENT selector (0,0,1) or a single class (0,1,0) on purpose: it beats the earlier sheets on equal specificity by document order, and it deliberately LOSES to anything more specific. That is the whole trick behind the heading line-heights — `h1 { line-height }` fixes the fourteen pages whose h1 was inheriting body leading at 1.72, and does not touch `.sf-hero-title` or `.pg-h1`, which set their own at 1.04. THE TOKEN BLOCK IS GENERATED. 01-typography.mjs rewrites it in the copy that ships, reading the real values out of the built theme.css, so the pair here can never drift from the pair the build solved — and so admin.html, which links no theme.css, still resolves it. The values below are the fallback if the module never runs. ══════════════════════════════════════════════════════════════════════════ */ /* SF:FONT_TOKENS_START */ :root { --sf-font-display: 'Familjen Grotesk', 'Familjen Grotesk Fallback', 'Segoe UI', system-ui, sans-serif; --sf-font-body: 'Inter', 'Inter Fallback', 'Segoe UI', system-ui, sans-serif; --sf-font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* SF:FONT_TOKENS_END */ /* ── 1. The inherited default is the brand body face, on every page ────────── `html` is the one that matters: it is what tailwind's preflight claims and what the UA default (Times) falls back to. Setting body too means a page that scopes something to `body` still starts from the same place. */ html { font-family: var(--sf-font-body); } body { font-family: var(--sf-font-body); /* invoice.html links no sf-base.css, so its body carried NO line-height at all and every paragraph on it computed `normal`. */ line-height: var(--sf-body-lh, 1.6); } /* ── 2. Headings are the display face, with heading leading ───────────────── Bare element selectors: they override the three pages that named the body face for headings, and they lose to every class-level rule that has already solved a heading's size and leading deliberately. */ h1, h2, h3, h4, h5, h6 { font-family: var(--sf-font-display); } h1 { line-height: 1.12; } h2 { line-height: 1.2; } h3 { line-height: 1.28; } h4, h5, h6 { line-height: 1.35; } /* ── 3. Form controls inherit ─────────────────────────────────────────────── tailwind's preflight already does this; the four pages that do not link tailwind did not, which is why invoice.html's checkboxes computed ARIAL. */ button, input, select, textarea, optgroup, option { font-family: inherit; } /* Same three pages, same reason: the UA's `font:` shorthand on a