/* ============================================================ * css/tokens.css — TinkyTown canonical brand tokens * * Canonical brand tokens. Add new tokens here, never inline * hex codes for these values in component / page CSS. * * Spec source of truth: * docs/specs/tinkytown-platform-spec.md § 3 Brand System * * Fonts (declared in HTML , referenced by per-page CSS): * Fraunces → headings * General Sans → UI / body * * Load order: tokens.css MUST come first in so per-page * stylesheets resolve var() references. * * P1.T4 — Design token consolidation (2026-05-11) * ============================================================ */ :root { /* ── Surface system ── */ --surface-deep: #0d0b10; /* canonical app backdrop */ --surface-card: #15131a; /* raised panel / card */ --surface-overlay: #1d1a23; /* modal / dropdown layer */ --border-subtle: rgba(255, 255, 255, 0.08); /* ── Brand accents ── */ --amber: #e8a33d; /* canonical action color */ --amber-soft: #f0bb6b; /* hover / lighter */ --amber-strong: #c98620; /* active / pressed */ --green: #22c55e; /* canonical success */ --green-soft: #4ade80; /* canonical success light*/ --red: #ef4444; /* error / destructive */ --blue: #3b82f6; /* info / link */ --purple: #a855f7; /* AI / intelligence */ /* ── Text hierarchy ── */ --text-primary: #f4f1ec; /* warm off-white */ --text-secondary: #c8c2b8; --text-muted: #8d877d; --text-faint: #5d584f; /* ── Map / coverage tiers (Regions tab) ── * Existing s-pct-* class colors from outreach.css 1827-1830. * Promoted to tokens so the SVG legend (outreach.html L346-350) * can stop hard-coding them. */ --map-empty: #2a2330; /* uncontacted */ --map-pct1: #7e3b3b; /* started */ --map-pct2: #b88331; /* in flight */ --map-pct3: #3a8a4f; /* converting */ --map-pct4: #1f9d5b; /* live / paid */ } /* ── Dark-mode parity ── * * outreach.css already ships a full dark-mode :root override * (its own light→dark flip). The canonical brand tokens above * are already dark-surface designs, so no separate dark override * is strictly needed. We keep this block as the documented * extension point — when a per-page stylesheet wants to vary a * token by color scheme, the override goes here. */ @media (prefers-color-scheme: dark) { :root { /* canonical tokens are already dark-mode by design. * Reserved for future overrides; leave empty intentionally. */ } }