/* ============================================================================
Union Yoga — canonical brand tokens
----------------------------------------------------------------------------
The one source of truth for color, radius, shadow, and hairlines.
These values are the "homepage group" canon: the set declared authoritative
in mockup/brand-assets.html and independently confirmed by the TV app's
union-yoga-tv/lib/brand/tokens.ts. Every hex here traces to one of those two
sources — nothing in this file was invented.
Do NOT keep a second copy of these values anywhere. Pages that currently
inline their own :root should be normalized to exactly these values; the goal
is that this file is the only place a green is ever written down.
Type FAMILIES and WEIGHTS are locked here as of 2026-08-23 (see the Typography
block below). The type SIZE scale and the spacing scale still live as proposals
in DESIGN-SYSTEM.md — this file holds only what is agreed.
============================================================================ */
:root {
/* Surfaces — never used for text */
--cream: #F4EFE6; /* page background */
--cream-soft: #EFE7D8; /* raised surface, hero image cell */
--sand: #E8DFC9; /* quietest surface */
/* Greens */
--ink: #1F2A22; /* body text — 12.98:1 on cream (AAA) */
--forest: #2E4034; /* primary brand — 9.65:1 on cream (AAA) */
--moss: #5C7060; /* secondary text only — 4.65:1 on cream (AA) */
/* Warm accents */
--clay: #B5764B; /* the action you want taken — buttons, links. 3.24:1: large text only */
--clay-soft: #D9A47A; /* highlight swipe on dark grounds. 5.02:1 on forest */
--terra: #8C4A2A; /* accent text where clay would fail contrast — 5.86:1 on cream (AA) */
/* Hairlines */
--line: rgba(31,42,34,.12);
--line-strong: rgba(31,42,34,.22);
/* Elevation — kept for the dashboard/TV instrument surfaces only.
Cards do NOT use these: a card is defined by its outline, not a shadow.
A drop-shadow on a content card is on the blacklist (it reads as generated). */
--shadow-soft: 0 1px 2px rgba(31,42,34,.04), 0 8px 24px rgba(31,42,34,.06);
--shadow-card: 0 1px 2px rgba(31,42,34,.06), 0 24px 48px -12px rgba(31,42,34,.18);
/* Shape — cards round only the BOTTOM-LEFT corner; the other three stay square.
A thin outline still defines the card, and no shadow. Cards write
`border-radius: var(--card-corners)` (or --card-corners-lg for hero cards);
--radius / --radius-lg keep their pixel values so chips, inputs, avatars, and
other pill / fully-round elements read them directly. Buttons are not cards —
the primary CTA is a text label on a clay underline, not a filled pill. */
--radius: 14px;
--radius-lg: 22px;
--card-radius: 96px; /* the big sweep on a card's bottom-left */
--card-radius-lg: 144px; /* larger hero cards get a bigger sweep */
--card-corners: 0 0 0 var(--card-radius); /* bottom-left rounded */
--card-corners-lg: 0 0 0 var(--card-radius-lg);
--card-border: var(--line-strong); /* the thin outline that defines a card */
/* Focus — the one accessible focus ring. Use it, don't reinvent it. */
--focus-ring: 0 0 0 2px var(--cream), 0 0 0 4px var(--clay);
/* Typography — LOCKED 2026-08-23. Two families, three weights. Nothing else.
Load exactly these via the one canonical link — no other family, weight, or
optical-size range. A weight/size/family outside this set is a bug.
*/
--font-display: "Fraunces", Georgia, serif; /* headings only */
--font-body: "Inter", system-ui, -apple-system, sans-serif; /* body + UI */
--font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* data / code / hex only */
--wght-heading: 600; /* Fraunces Semibold — all display + headings */
--wght-body: 400; /* Inter Regular — body copy */
--wght-ui: 500; /* Inter Medium — buttons, labels, eyebrows, nav */
}
/* Note: --forest-deep was removed. It was byte-identical to --ink (#1F2A22),
self-documented as redundant in brand-assets.html. One color, one name.
Anything still referencing var(--forest-deep) should use var(--ink). */