/* ============================================================ DESIGN TOKENS - single source of truth ------------------------------------------------------------ Loaded before site.css and every page stylesheet. Why this file exists: colour, spacing and radius values were previously hardcoded per-page (1,300+ literal hex values across 16 stylesheets), which meant dark mode had to be maintained as ~400 hand-written `body.dark-mode` override rules - one per component, forever. Semantic tokens below flip once in the dark block; components that consume them need no override at all. Two rules for anything added here: 1. PRIMITIVES (--brand-*, --neutral-*) are raw values. Never reference them directly from a component. 2. SEMANTIC tokens (--surface, --text, --border, ...) describe a ROLE. Components use only these, so dark mode is free. ============================================================ */ :root { /* --- Layout ------------------------------------------------- Every full-width section shares --container-max. Long-form reading columns (FAQ copy, legal text) use --measure, which is a deliberate reading width, not an accidental one. Previously: hero/how-it-works/footer 80rem, FAQ 43.75rem and final-CTA 46rem - three widths, the narrow two 36px apart, which read as a mistake rather than a decision. */ --container-max: 80rem; /* 1280px - the page grid */ /* 736px. Not an invented number: the closing CTA, how-it-works and /app had each independently settled on 46rem for their reading column, so that is the house measure - this token just gives the three of them one name. (The FAQ was the odd one out at 43.75rem.) */ --measure: 46rem; --gutter: 1rem; /* --- Spacing scale ------------------------------------------ Geometric-ish ramp. Use these instead of ad-hoc rem values. */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; /* Vertical rhythm between page sections. Sections apply this as padding-block, so consecutive sections stack to 2x. At the old 6.25rem that was 200px of dead space between every section - the single biggest reason the page read as unfinished and stretched. */ --space-section: clamp(3rem, 5.5vw, 4.5rem); --sectionPadding: var(--space-section) var(--gutter); /* --- Radius scale ------------------------------------------- Was 15+ distinct values mixing rem and px (18px, 14px, 12px, 24px, 0.75rem, 6.25rem, ...). Four steps plus a pill. */ --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-pill: 999px; /* --- Elevation ---------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(16, 12, 8, 0.06); --shadow-md: 0 4px 12px rgba(16, 12, 8, 0.10); --shadow-lg: 0 8px 24px rgba(16, 12, 8, 0.14); /* --- Brand primitives --------------------------------------- Values unchanged from the previous palette, so nothing shifts visually. --primaryDeep exists because white on --primary is only 2.84:1 (fails WCAG AA); --primaryDeep reaches 4.59:1 while still reading as brand orange. Use --primary for accents, borders and large display type; --primaryDeep wherever white text sits on a filled brand background. */ --brand-500: #ff6a3e; --brand-700: #d1451c; --brand-300: #ffba43; /* --- Neutral primitives ------------------------------------- One ramp. The codebase previously interleaved two Tailwind families - gray-* (#e5e7eb, #6b7280, #111827) and slate-* (#cbd5e1, #64748b, #0f172a) - which is why greys never quite agreed with each other. Standardised on slate, whose values already dominated the darker end. */ --neutral-0: #ffffff; --neutral-50: #f8fafc; --neutral-100: #f1f5f9; --neutral-200: #e2e8f0; --neutral-300: #cbd5e1; --neutral-400: #94a3b8; --neutral-500: #64748b; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1e293b; --neutral-900: #0f172a; --neutral-950: #121212; /* --- Status primitives -------------------------------------- Blue for "info" is a deliberate convention, not a palette leak - it reads as neutral/system rather than brand. */ --info-500: #2563eb; --success-500: #0f6b4f; --danger-500: #dc2626; --warning-500: #ad521b; /* ============================================================ SEMANTIC TOKENS - components consume ONLY these. ============================================================ */ --surface: var(--neutral-0); /* page background */ --surface-raised: var(--neutral-0); /* cards, panels */ --surface-sunken: var(--neutral-50); /* wells, subtle bands */ --surface-inverted: var(--neutral-900); --text: #1a1a1a; /* headings */ --text-body: #4e4b66; /* body copy */ --text-muted: var(--neutral-500); --text-on-dark: #fafbfc; --text-link: var(--brand-700); /* Brand-coloured TEXT (toppers, inline links, emphasis numbers). --brand-500 as text on white is 2.84:1 and fails AA, which is the mirror of the white-on-brand problem --primaryDeep was introduced for. Anything that paints brand-coloured words should use this, not --primary. */ --text-brand: var(--brand-700); --border: var(--neutral-200); --border-strong: var(--neutral-300); --focus-ring: var(--brand-700); /* --- Type scale --------------------------------------------- 13px->16px, 31px->49px. --fontSizeSmall added as a 14px floor so the trust row and disclaimers stop rendering near-illegibly. */ --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); --bodyFontSize: 1rem; --fontSizeSmall: 0.875rem; /* --- Back-compat aliases ------------------------------------ 220KB of existing CSS references these names. They stay as aliases so this file is additive and nothing breaks; prefer the semantic names above in new work. Note --primaryLight, --secondary and --secondaryLight were three separate tokens all holding #ffba43 - now one value with three names pointing at it. */ --primary: var(--brand-500); --primaryDeep: var(--brand-700); --primaryLight: var(--brand-300); --secondary: var(--brand-300); --secondaryLight: var(--brand-300); --headerColor: var(--text); --bodyTextColor: var(--text-body); --bodyTextColorWhite: var(--text-on-dark); /* Dark-mode primitives kept under their old names; existing `body.dark-mode` rules across the app still reference them. */ --dark: var(--neutral-950); --medium: #282828; --accent: #404040; /* Blackjack sub-brand (bj.js / slots) - scoped, not general. */ --blackjackGreen: #0f6b4f; --blackjackGreenDark: #083f31; --blackjackGold: #ffba43; --blackjackRed: #d93434; --blackjackInk: #121212; --blackjackSoft: #fff8ec; } /* ============================================================ DARK MODE - flip the SEMANTIC layer only. Any component built on semantic tokens themes itself from here with zero additional rules. This is the mechanism that lets the ~400 per-component overrides elsewhere be retired incrementally. ============================================================ */ body.dark-mode { --surface: var(--neutral-950); --surface-raised: #1f1f1f; --surface-sunken: #181818; --surface-inverted: var(--neutral-50); --text: var(--text-on-dark); --text-body: #c9c7d1; --text-muted: var(--neutral-400); --text-link: var(--brand-300); /* On a dark surface the deep shade is far too low-contrast, so brand text flips to the light amber (~11:1 on #121212). */ --text-brand: var(--brand-300); --border: #333333; --border-strong: #454545; --focus-ring: var(--brand-300); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.60); /* DELIBERATELY NOT FLIPPED HERE: --headerColor and --bodyTextColor. The legacy aliases must hold their light-mode values in both themes, because existing rules use them to mean "the dark ink colour" rather than "whatever the current theme's text is" — e.g. index.css has body.dark-mode #final-cta .final-cta__primary { color: var(--headerColor); } which paints dark text on a white button sitting on the orange band. Flipping --headerColor to near-white turned that button into a blank white box. Dark-mode text is already handled by the explicit `body.dark-mode p, .cs-title, .cs-text {...}` overrides in site.css. New work should consume --text / --text-body, which DO flip above. */ }