/ base 14 · loose · 500 body (document base)
12 · tight · 500 · --c-neutral-600 secondary (block)
.eyebrow 12 · tight · 700 · 0.4 · UPPERCASE · --c-neutral-600
.card-title 16 · tight · 500
.metadata 12 · tight · 500 · --c-neutral-500 · icon + label row
HEADING SIZES are a mobile-local scale anchored at h1 = 30
(30 / 28 / 24 / 21 / 18 / 16 — off the CDS --fs grid by design; the
off-grid 30 + 21 steps are literal px). Body / small / eyebrow / card-title
sizes use CDS --fs-* tokens. LINE-HEIGHTS are CDS ratio tokens
(--lh-tight 1.2 for headings + UI labels, --lh-loose 1.5 for body).
Rules: odd weights only (300 / 500 / 700) · body default 500 ·
ALL headings 300 Light (the mobile signature; web DS is 700 Bold).
INK: only carries baked ink (Journey-700); h2–h6 pin to neutral-700
(overriding the parent CDS bare-tag Foundation-500). Screens may override
`color` inline for a specific surface (e.g. a heading on a dark hero).
SCOPING: the DS reference scopes these to `main`; this PRODUCT mirror
applies them as bare-tag globals (no `main` scope) — intentional.
------------------------------------------------------------------------
HISTORY:
§4 (2026-06-10 resync) re-anchored the heading ladder to h1 = 30
(30 / 28 / 24 / 21 / 18 / 16), moved line-heights onto the CDS ratio
tokens (--lh-tight / --lh-loose), dropped heading + card-title
letter-spacing, bumped `.eyebrow` to 700, added the `.metadata` role.
§3 (2026-06-02) unified tag defaults + `.t-h*` onto the token ladder and
set the 500 body default — the step that made `.t-*` redundant.
§1/§2 (2026-06-01) renumbered the heading ladder; retired `.t-display`,
`.t-label`, `.t-meta`.
======================================================================== */
/* ── Base text = Body (14 · loose · 500) ──────────────────────────────────
Set on the document so any unclassed text renders as body. Phone-frame
content and harness chrome both inherit this unless they opt into a tag
or role below. */
body {
font-family: var(--font-sans);
font-size: var(--fs-14);
line-height: var(--lh-loose);
font-weight: var(--fw-medium);
color: var(--c-neutral-900);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Headings — size follows the tag, ALL weight 300 (light) ──────────────
Mobile headings are 300 Light (the web DS uses 700 Bold). The off-grid 30
and 21 steps are literal px (no --fs token by design).
INK: only
carries baked ink (Journey-700); h2–h6 pin to neutral-700. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
font-weight: var(--fw-light);
color: var(--c-neutral-700);
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 { font-size: 30px; line-height: var(--lh-tight); color: var(--c-journey-700); }
h2 { font-size: 28px; line-height: var(--lh-tight); }
h3 { font-size: 24px; line-height: var(--lh-tight); }
h4 { font-size: 21px; line-height: var(--lh-tight); }
h5 { font-size: 18px; line-height: var(--lh-tight); }
h6 { font-size: var(--fs-16); line-height: var(--lh-tight); }
/* ── Body ─────────────────────────────────────────────────────────────── */
p {
font-family: var(--font-sans);
font-size: var(--fs-14);
line-height: var(--lh-loose);
font-weight: var(--fw-medium);
margin: 0;
}
/* ── Secondary / caption ──────────────────────────────────────────────────
carries the muted tone directly (--c-neutral-600 — WCAG AA on
white). Block by default (captions were block