/* ============================================================================ LANGUY — CANONICAL DESIGN TOKENS (the single source of truth) ---------------------------------------------------------------------------- This is THE file, and after 2026-09-22 it is the ONLY :root on the funnel. Every learner-facing surface imports THIS; nobody hand-copies a palette. The competing :root blocks in free.html, assets/world.css, assets/languy-dark.css, products/starter-pack/{index,play,lessons}.html, thank-you.html and bundle-access.html were deleted on that date, not aliased into a second life. Usage: then use the vars: background:var(--bg); color:var(--ink); ... ── FOUNDER DECISION 2026-09-22 12:55 — THE COLOUR WORLD IS LOCKED ────────── SKY + LEAF ON LIGHT PAPER (option 3 of the three-world render; LOCKED_DESIGN.md §4). The values below are that entry's values verbatim. Dark surfaces are RETIRED across the funnel: there is no .theme-dark palette any more, and the azure #0F80F0 / royal #2563EB locks are superseded and deleted — not kept as aliases. CONTRAST, measured (sRGB relative luminance), not eyeballed: ink #111111 18.24:1 on paper · 18.88:1 on card secondary #3F4753 9.06:1 · muted #5B6472 5.78:1 cyan-as-text #0E7490 5.17:1 on paper · 5.36:1 on card sky #0EA5E9 is 2.68:1 — DECORATIVE ONLY, it may never carry text action #16A34A 3.18:1 vs paper (a control needs >=3:1) and its label is dark ink #111111 at 5.73:1 — white on leaf green is 3.30:1 and FAILS AA. LAWS ENCODED HERE (do not override per-page): • FLAT. No drop-shadows, no button glow, no gradient washes. Elevation = surface colour (white cards on warm-white paper) + a 1px hairline border. • ONE action colour = leaf green, and it always wears an ink label. • Sky cyan is scenery. Cyan text is a different, darker token. • Display = Archivo (weight 760, sentence case — NOT black-caps). Body/UI = Instrument Sans. Nothing else. RESOLVED 2026-09-22 (verify round 1, rows 6-8): free.html and the kit page carried a contradicting "FOUNDER-LOCKED Archivo Black / caps" comment and rendered 400-on-Black and 900 while / and /products rendered 760. Those comments predate the 12:55 lock; LOCKED_DESIGN §4 also says buttons take the legible sans voice, "not a condensed poster headline". So THIS file is the answer and the pages now consume it. The Archivo Black @font-face is still served for any future page that earns it; no learner page sets it today. → Founder confirm (one word, not a blocker): sentence-case Archivo 760 is now the display voice everywhere. Say so if you want the caps back. • --cta-height/--cta-radius govern PAGE CTAs. A NAV pill inside the 52px sticky bar cannot be 56px tall; it takes --r-pill and a >=44px touch box. That is the one documented exemption, not a drift. ============================================================================ */ :root { color-scheme: light; /* ---- Neutrals: the light world (LOCKED) ---- */ --bg: #FBFBFA; /* paper — the page */ --bg-2: #F4F6F9; /* banded sections */ --bg-soft: #F4F6F9; /* input fills / soft blocks */ --paper: #FFFFFF; /* raised cards (white on paper = flat elevation) */ --paper-2: #F7F9FC; /* second-level surface */ --raised: rgba(17,17,17,.035); /* a panel on a panel */ --ink: #111111; /* primary text — 18.24:1 */ --ink-2: #3F4753; /* secondary text — 9.06:1 */ --muted: #5B6472; /* labels / kickers / placeholders — 5.78:1 */ --muted-2: #5B6472; /* alias */ --line: rgba(17,17,17,.10); /* hairline */ --line-2: rgba(17,17,17,.16); /* control border */ /* ---- Sky: the scene colour. DECORATIVE — carries no text, ever. ---- */ --accent: #0EA5E9; /* pips, rules, bullets, focus scenery */ --accent-soft: #E6F6FE; /* pale sky tint fill: chips, active pills */ --chalk: #0E7490; /* the signature stroke — the TEXT-safe cyan, because 26 surfaces use --chalk as a colour and sky fails as text at 2.68:1 */ /* ---- Cyan as TEXT: a darker token, because sky fails as type ---- */ --accent-bright: #0E7490; /* links, eyebrow text on paper — 5.17:1 */ --accent-text: #0E7490; /* same role, the name world.css used */ /* ---- Leaf: the one action colour. Its label is ALWAYS ink. ---- */ --accent-cta: #16A34A; /* solid button FILL — 3.18:1 vs paper */ --action: #16A34A; /* same token, the name world.css used */ --on-action: #111111; /* the label ON the fill — 5.73:1. NOT white. */ --accent-deep: #15803D; /* pressed / hover-darken */ --action-hi: #15803D; --action-lip: #14532D; /* the chunky bottom edge of a tactile control */ --action-soft: rgba(22,163,74,.12); --good: #16A34A; /* success */ --good-soft: #E8F7EE; /* ---- Legacy names, mapped (added 2026-09-22, verify round 1) ---- These five were used 15x across /, /products, /how-to, /read and the kit and were declared in NO :root at all — `var(--dim)` and friends resolved to nothing, so those colours silently inherited their parent instead of the token they named. They are names, not a second palette: each one points at a value already locked above. Contrast measured, not eyeballed. */ --dim: #5B6472; /* = --muted, 5.78:1 */ --surface: #FFFFFF; /* = --paper (raised card on paper) */ --ground: #FBFBFA; /* = --bg (page paper; the sticky bar mixes on it) */ --action-text: #0E7490; /* the TEXT form of an action — leaf green is 3.18:1 and fails as type; this is 5.17:1 */ --owned: #15803D; /* a correct/earned green AS TEXT — 4.84:1 on paper and 4.54:1 on --owned-soft. Not #16A34A (3.18:1). */ --owned-soft: #E8F7EE; /* = --good-soft */ /* ---- Status ---- */ --earned: #C1401F; /* a word you earned. Nothing else. 5.04:1 */ --earned-soft: rgba(193,64,31,.12); --amber: #B45309; /* streak / caution — 4.85:1 */ --danger: #BE123C; /* errors — 6.07:1 */ /* ---- Type ---- */ --disp: 'Archivo',-apple-system,system-ui,sans-serif; /* display */ --wide: 'Archivo',sans-serif; --sans: 'Instrument Sans',-apple-system,system-ui,sans-serif; /* Type scale — exactly 5 sizes, ~1.25 ratio. No in-betweens. */ --fs-display: clamp(2.25rem, 5vw, 3.5rem); --fs-h2: clamp(1.75rem, 3.5vw, 2.5rem); --fs-h3: 1.25rem; --fs-body: 16px; /* ONE body size across the funnel (was 16 vs 17) */ --fs-small: .8125rem; --h1-weight: 760; /* ends 400-on-Black vs 900 vs 760 */ /* the kicker/eyebrow, one recipe */ --kicker: 12px; --kicker-track: .12em; --kicker-weight: 800; --kicker-case: uppercase; --price-lg: 34px; /* the one big-price size (was 38.4 vs 11) */ /* ---- Shape ---- */ --r-sm: 12px; --r: 16px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; --cta-radius: 999px; /* founder-preferred pill (LOCKED_DESIGN §5) */ --cta-height: 56px; --cta-case: none; /* ends /free's uppercase-only shout */ --nav-cta-height: 44px; /* the ONE nav-pill height. A 56px page CTA cannot fit inside the 52px sticky bar, so the bar's pill gets its own declared size (>=44px touch) instead of each bar inventing 38 or 50. Same radius, same face, same weight. */ /* ---- Spacing scale (8px grid) ---- */ --sp-section-desktop: 96px; --sp-section-mobile: 56px; --sp-card-pad-desktop: 32px; --sp-card-pad-mobile: 20px; --sp-gap-desktop: 24px; --sp-gap-mobile: 16px; --maxw: 1120px; /* per-page override allowed */ --pad: 24px; /* per-page override allowed */ --gut: 24px; /* per-page override allowed */ /* ---- Motion (house easing — design law) ---- */ --ease: cubic-bezier(.16,1,.3,1); --t: .22s cubic-bezier(.16,1,.3,1); /* ---- FLAT LAW: elevation is a hairline, never a glow/drop-shadow ---- */ --shadow: inset 0 0 0 1px rgba(17,17,17,.06); --shadow-lg: inset 0 0 0 1px rgba(17,17,17,.06); --btn-depth: none; } /* The dark world is retired (LOCKED_DESIGN §4, 2026-09-22). This class remains only so a stray `class="theme-dark"` left on any page cannot resurrect a dark surface: it resolves to the same light world, and declares nothing of its own. */ .theme-dark { color-scheme: light; } /* THE HOUSE FACE, GUARANTEED (verify round 2, row 9). Two controls rendered in Arial and the root element in Times, because neither set a family and nothing declared one above them. The token file that owns the type owns this too: no element on the funnel can fall back to a system serif again. Per-page rules still win — this is only the floor. */ html, body { font-family: var(--sans); } button, input, select, textarea { font-family: var(--sans); }