/* ============================================================================ tokens.css — every colour the site's token layer holds, in one place. Linked first by every page in public/. THE ANANCE BLUE SCALE, applied 2026-10-07. One hue, 210, carries every surface: grounds, ink and hairlines are the same family separated only by lightness, and the Signal blue is the only thing allowed to be saturated. Structure measured off anthropic.com's own stylesheet; lightness steps match theirs slot for slot. Reasoning and contrast figures: docs/reference/design-language/palette.md WHAT IT REPLACED. There were FIVE independent token sets across 20 pages: index.html light, blue tinted ink #111827 canvas #ffffff talk-to-us/waitlist light, blue tinted ink #111827 canvas #f2f7fd about.html inline light, neutral ink #121212 bg #ffffff pages.css dark ink #ffffff bg #0a0a0b service.css light, neutral ink #0b0b0c dark #121212 Four meanings of "ink", three different blacks, two different canvases. They are now one set. Those five :root blocks keep their own role names and alias these, which is what lets a role be repointed without renaming anything. ⚠️ TWO DECISIONS ARE STILL OPEN AND THIS FILE TOOK A DEFAULT ON BOTH. The accent is left BLUE, so nothing on the site is a rotated hue the way Anthropic's clay is; promoting #F57200 to the brand accent is Philippe's call and not taken here. Ground saturation was dropped to S26-30 from the previous S56-67, which is the proposal's recommendation, not a ruling. ⚠️ COLOUR LITERALS OUTSIDE A :root BLOCK ARE NOT HERE, and there are many: the inline SVG scenes on index.html and ai-csr.html carry their own blues and greys. Those still hold their old values, so the scale is NOT yet applied everywhere a visitor can see. That sweep is outstanding. ========================================================================= */ :root { /* --- type ---------------------------------------------------------- THE THREE STACKS, declared once. Philippe, 2026-10-16, after a census found one face written three different ways and five rules that had dropped "Geist Mono" altogether, so their labels fell to whatever monospace the visitor's OS supplies. ⚠️ SVG carries font-family as a PRESENTATION ATTRIBUTE and the 99 of them in index.html write the stack out IN FULL, unquoted, rather than through a token. Two reasons, and only the first is measured: a quoted family name inside a double-quoted HTML attribute terminates the attribute (it did, on 2026-10-16, breaking all 99 at once); and var() in a presentation attribute was confirmed working in Chrome this session but NOT checked in Firefox or Safari, so it is not relied on. Keep those literals in step with the three stacks below by hand. --------------------------------------------------------------------- */ --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-serif: "EB Garamond", Garamond, serif; --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace; /* --- light grounds ------------------------------------------------- */ --c-white: #f0f5fc; /* azure-deep. THE site background, ruled by Philippe 2026-10-07 */ --c-raised: #ffffff; /* nav dropdown, raised surfaces */ --c-tint: #f0f5fc; /* azure-deep. Same ground, no separate tint */ --c-sidebar: #e6ebf1; /* alternating band; service.css calls it --grey */ --c-sunken: #dae2e9; /* deeper fill */ /* --- dark grounds -------------------------------------------------- */ /* The dark-era surface values. NEITHER IS CONSUMED at this head: pages.css went light (--bg -> --c-white, --panel -> --c-raised) and footer.css sets its dark band from literals on purpose, so repointing these two moves nothing. */ --c-black: #0e1319; --c-black-panel: #161d26; --c-near-black: #0e1319; /* service.css dark bands, talk-to-us dark */ /* --- ink on light -------------------------------------------------- NAVY, not near-black, on every page. Philippe, 2026-10-16. #072a4b is the hero film's darkest gradient stop #0a3c6b taken one step down, so the type sits in the same hue as the grounds and the panels. ⚠️ --ink also BACKS the solid buttons, which therefore go navy too; the dark full-bleed bands are unaffected because they read --c-near-black / --c-black, not --ink. The three secondaries below are still neutral blue-greys. */ --c-ink-blue: #072a4b; /* index, talk-to-us, waitlist, pages.css */ --c-ink-neutral: #072a4b; /* service.css */ --c-ink-black: #072a4b; /* about.html inline */ --c-ink-2: #2e3a48; /* secondary, blue tinted */ --c-ink-3: #4d5b6a; /* tertiary, blue tinted */ --c-dim: #2e3a48; /* about.html secondary */ --c-soft: #4d5b6a; /* service.css secondary */ --c-faint: #77838f; /* service.css eyebrows, fine print */ /* --- ink on dark --------------------------------------------------- */ --c-on-dark: #f5f8fa; --c-on-dark-2: #c3cbd3; --c-on-dark-3: #a0aab5; --c-on-dark-4: #77838f; /* --- hairlines ----------------------------------------------------- */ --c-line-blue: #dae2e9; --c-line-blue-strong: #ccd7e3; --c-line-neutral: #e6ebf1; --c-line-neutral-2: #ccd7e3; --c-line-dark: #2e3a48; --c-on-light-55: rgba(14,19,25,.55); --c-on-light-12: rgba(14,19,25,.12); --c-on-light-22: rgba(14,19,25,.22); --c-on-dark-66: rgba(245,248,250,.66); --c-on-dark-50: rgba(245,248,250,.5); --c-on-dark-46: rgba(245,248,250,.46); --c-on-dark-22: rgba(245,248,250,.22); --c-on-dark-16: rgba(245,248,250,.16); --c-on-dark-12: rgba(245,248,250,.12); /* --- signal, the blue already in the hero gradient ------------------ */ --c-signal: #1565b0; --c-signal-deep: #0d4a80; --c-signal-light: #3f95e0; } /* Form controls do not inherit font-family from their parent, so a