/* ============================================================================ Five Million Voices — canonical design tokens Served at /brand/tokens.css (source: web/brand/tokens.css) THIS FILE IS THE SOURCE OF TRUTH for the public content pages: home · voices · about · why · faq · privacy · terms delete-account · unsubscribe · unsubscribed · /b/ (api/bill.js) Deliberately OUT of scope — these are separate design languages, not drift: /vote (web/retrovote.html) — --acc / --veil / --frame-bg gradient system /admin (web/admin.html) — internal operator palette Values reconciled 19 Aug 2026 against design_handoff_vote_tracker/ colors_and_type.css (the "We Ai" spec). web/home.html already matched the spec exactly and was used as canon; every other page held a damaged subset. Page-local overrides are legitimate and still work: this file only sets :root and html[data-theme="dark"], so any page-level rule with equal or higher specificity (e.g. html[data-theme="light"] on /about and /why) continues to win. ============================================================================ */ :root{ /* ── Layout shell (3 Aug 2026) ───────────────────────────────────────────── Every page used to pick its own container width — 760 on /voices and the legal pages, 1000 on /why and /about, 1100 on home — so the logo, nav and left edge of the content visibly jumped between pages. One shared --shell fixes the alignment. --measure stays NARROWER on purpose: 950px of running prose is ~120 characters a line, well past comfortable reading, so long-form text keeps its own column inside the wider shell. Neither variable binds below ~994px, so mobile is untouched. 20 Aug 2026 (Mdd, option C): headings span the shell; the prose measure widens 720 -> 850 (~100 chars/line). The specimen still says 720 - this file wins. */ --shell:950px; --measure:850px; /* ── Teal ramp — the brand anchor ────────────────────────────────────────── Hue is held at 182–187°. Anything greener than ~180° is off-system. */ --teal-900:#0B2E33; /* deepest — headings on light backgrounds */ --teal-800:#0F3D43; /* primary dark teal — main brand ink */ --teal-700:#14565E; /* hover / interactive */ --teal-600:#1A7179; /* mid teal — secondary surfaces */ --teal-500:#2A9BA3; /* light teal — accent, the "flow" */ --teal-400:#4FB8BE; /* bright teal — highlights, focus ring */ --teal-300:#8FD4D7; /* soft teal — chips, subtle backgrounds */ --teal-100:#DDF0F1; /* tint — hover on light surfaces */ --teal-50:#F2F9FA; /* whisper — page wash */ /* ── Copper ramp — the warm accent ──────────────────────────────────────── Hue held at 21–23°. */ --copper-700:#9A4A1F; /* deep — rare, for emphasis */ --copper-600:#B85C2A; /* primary — CTA accent */ --copper-500:#D97742; /* bright — hover */ --copper-300:#F2B48D; /* soft — tag / pill */ --copper-100:#FBE8D9; /* tint */ /* ── Vote ramps — support / oppose ──────────────────────────────────────── Resolved 19 Aug 2026 (DESIGN.md §7, option 1b). The teal ramp above is BRAND CHROME and holds 182–187°. A vote is not chrome, so it has its own ramps: --sup at 169.5°, taken from the mark's left stroke, and --opp at 21° on the copper. Every --sup rung is the 169.5° rotation of its --teal counterpart, so lightness, saturation and therefore contrast are unchanged. The rule that replaces the old argument: is this chrome, or is this a vote? Chrome teal never appears inside a vote control, and a vote colour never appears on chrome. Non-vote states (abstain, absent, did not vote) take an ink neutral, never chrome teal — adjacent to --sup-600 the 14° gap reads as a rendering error rather than a distinction. */ --sup-800:#0F433A; --sup-700:#145E51; --sup-600:#1A7968; /* light-theme support fill — 5.3:1 on white text */ --sup-500:#2AA38E; --sup-400:#4FBEAB; /* dark-theme support fill — 6.4:1 on #0B2E33 text */ --sup-300:#8FD7CA; --sup-100:#DDF1EE; /* Oppose: new names, existing copper values. Nothing here is a new colour, except --opp-800, added 19 Aug 2026 from the design-system specimen. */ --opp-800:#5C2A10; --opp-700:#9A4A1F; --opp-600:#B85C2A; /* light-theme oppose fill — 4.6:1 on white text */ --opp-500:#D97742; --opp-400:#EFA26E; /* dark-theme oppose fill — 7.8:1 on #3A1608 text */ --opp-300:#F2B48D; --opp-100:#FBE8D9; /* Role tokens — components use THESE, never a raw rung. */ --sup:var(--sup-600); --opp:var(--opp-600); /* ── Neutrals — warm off-white base, not pure grey ────────────────────────*/ --ink-900:#0E1618; /* body text */ --ink-700:#2E3A3C; /* secondary text */ --ink-500:#5C6A6C; /* tertiary / captions */ --ink-400:#8A9698; /* placeholder */ --ink-300:#BDC6C7; /* divider, strong */ --ink-200:#D9DFDF; /* divider */ --ink-100:#ECEFEF; /* subtle surface */ --ink-50:#F6F7F7; /* app background */ /* ── Surfaces ─────────────────────────────────────────────────────────────*/ --paper:#F7F9F9; /* cool off-white, slight teal bias to sit with teals */ --white:#FFFFFF; --card:var(--white); /* raised surface; flips dark under [data-theme=dark] */ --border:var(--ink-200); /* ── Text roles — prefer these over raw ink-* in components ───────────────*/ --fg-1:var(--ink-900); --fg-2:var(--ink-700); --fg-3:var(--ink-500); /* ── Semantic ─────────────────────────────────────────────────────────────*/ --success:#2E8F6B; --success-bg:#E3F2EB; --warning:#C98A2B; --warning-bg:#FBEFD7; --warning-700:#9A6A1F; /* text-safe warning — 4.5:1 on its wash; /voices fate badges */ --danger:#B5463C; --danger-bg:#F6DAD5; /* ── Type ─────────────────────────────────────────────────────────────────*/ --font-display:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif; --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* Short aliases. The legal/utility pages were authored against --fd/--fb with a shorter fallback stack; aliasing rather than renaming lets those pages drop their local declarations without touching every var() reference. */ --fd:var(--font-display); --fb:var(--font-body); /* Figures that align (design system 02): tallies, counts, big stat numbers. */ --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --fm:var(--font-mono); /* ── Elevation ────────────────────────────────────────────────────────────*/ --shadow-sm:0 2px 6px rgba(15,61,67,.10),0 1px 2px rgba(15,61,67,.06); --shadow-md:0 8px 20px rgba(15,61,67,.14),0 2px 5px rgba(15,61,67,.08); /* ── Motion ───────────────────────────────────────────────────────────────*/ --ease-out:cubic-bezier(0.22,1,0.36,1); --ease:var(--ease-out); /* alias — /about and /why were authored on --ease */ color-scheme:light; } /* ============================================================================ Dark theme. The theme is set explicitly on by the boot script on every page (localStorage 'nzvt_theme', else prefers-color-scheme), so this attribute is always present — it is never left to a media query. NOTE the strategy difference, preserved on purpose: home and voices override dark HEADING COLOURS in their own rules and leave --teal-900 alone, while the legal pages flip --teal-900/--teal-700 to light values instead. Both work. This block therefore does NOT touch the teal ramp above teal-100; pages that flip it keep doing so locally. ============================================================================ */ html[data-theme="dark"]{ --teal-50:#101619; --teal-100:#173D43; --copper-100:#3A2315; --copper-700:#EFA26E; --ink-900:#EAF1F0; --ink-700:#C3CFCF; --ink-500:#8CA0A1; --ink-300:#4A5B5D; --ink-200:#2A383B; --ink-100:#1B2629; --ink-50:#161F22; --paper:#141D20; --card:#1B2629; --sup:var(--sup-400); --opp:var(--opp-400); /* Semantic on dark: danger text lightened (B5463C is 2.7:1 on dark paper); value adopted from delete-account.html, now canonical here. */ --danger:#E5564C; --warning-700:#D9B36A; --shadow-sm:none; --shadow-md:0 8px 20px rgba(0,0,0,.45); color-scheme:dark; }