/* ============================================================ GameChanger Charity — canonical design tokens · v1.0 · 2026-06-11 Source of truth: design/DESIGN_GUIDE.md (JSON mirror: tokens.json) Two looks, one brand: PRODUCT look (default) + LIVE-SITE look (legacy-match overrides at the bottom). Contrast ratios computed 2026-06-11 (WCAG 2.2). Update in place; log changes in guide §12. Ratio method (keep edits reproducible): WCAG relative luminance, sRGB linearization (c/12.92 if c<=0.04045 else ((c+.055)/1.055)^2.4), ratio = (L1+0.05)/(L2+0.05), rounded to 2dp — computed in Python. ============================================================ */ :root { /* ---------- COLOR · brand green (locked equity) ---------- #00B073 is THE brand color and the single highest-contrast element on any surface — reserved for the ask. */ --green: #00B073; /* CTA fill; ink text on it = 6.05:1 AA; NEVER white on it (2.82:1); never as text on light */ --green-cta: #00a86e; /* hover + active state of --green — ink text on it 5.54:1 AA (old #009462 failed at 4.39); fill only, never as text (3.08:1 on white) */ --green-deep: #007a50; /* green TEXT on light (5.39:1 white / 5.08:1 paper / 4.59:1 paper-2 / 4.85:1 green-soft); NEVER a fill behind ink text (3.16:1) */ --green-bright: #1fd790; /* green on DARK only — stats/links (9.07:1 ink / 9.25:1 navy) */ --green-soft: #e6f7f0; /* soft wash fills; pair w/ ink or green-deep text */ /* ---------- COLOR · product palette (Power of Play) ---------- */ --terra: #d8603f; /* energy / corporate lane; text >=24px only (3.50:1 paper) */ --terra-deep: #b94a2c; /* terra hover + filled bg (white on it 5.15:1); as text on paper 4.86:1 */ --terra-text: #9e3d1c; /* terracotta SMALL text on light (6.32:1 paper) */ --amber: #f0a93b; /* highlight; on navy 8.64:1, ink on amber 8.48:1; NEVER text on light (2.01:1 white / 1.90:1 paper) */ --gold: #F5C518; /* earned reward + credential ONLY — never a CTA (ink/gold 10.45:1; gold/navy 10.66:1) */ --gold-deep: #caa00f; /* gold companion on DARK only — fails on light (2.46:1 white / 2.32:1 paper) */ /* ---------- COLOR · surfaces + text ---------- */ --navy: #0e1b2a; /* product dark band (paper on it 16.40:1) */ --navy-2: #16273b; /* widget panel on navy (paper 14.29:1) */ --navy-3: #1d3148; /* raised panel on navy (paper 12.51:1) */ --ink: #1C1C1C; /* universal text color; live-look dark band (on paper 16.09:1) */ --slate: #333740; /* secondary text (11.25:1 on paper) */ --paper: #fbf8f3; /* product page background (warm) */ --paper-2: #f3ece1; /* warm tinted band — kicker floor: green-deep on it = 4.59:1 (passes by 0.09); paper-2 cannot get darker without breaking the kicker */ --white: #ffffff; --paper-cool: #f6f8f7; /* live-look tinted band */ --line: #e7ddcd; /* warm hairline (product) — decorative only (1.34:1 vs white); never the sole boundary of a control */ --line-strong: #8a8378; /* component boundaries that must be perceivable (WCAG 1.4.11 ≥3:1) — form inputs (3.75:1 white / 3.54:1 paper) */ --line-cool: #e7e9ec; /* cool hairline (live look) */ /* ---------- COLOR · data-viz extension (charts only) ---------- */ --viz-coral: #e0654f; --viz-teal: #119a9a; /* charts use: green, gold, viz-coral, viz-teal; labels stay ink/slate */ /* ---------- COLOR · semantic roles ---------- */ --color-bg: var(--paper); --color-bg-band: var(--paper-2); --color-bg-dark: var(--navy); --color-text: var(--ink); --color-text-secondary:var(--slate); --color-text-on-dark: var(--paper); --color-cta-bg: var(--green); --color-cta-bg-hover: var(--green-cta); /* ink on it 5.54:1 ✓ — the hover pair, documented */ --color-cta-bg-active: var(--green-cta); /* active = hover fill + 1px press translate; green-deep behind ink fails (3.16:1) — D16 */ --color-cta-text: var(--ink); /* D8: ink, not white, on green */ --color-link: var(--ink); /* D15: incidental links are ink + underline (guide §4 kill-rule); CTA-adjacent links may opt in to green-deep */ --color-link-on-dark: var(--green-bright); --color-focus: var(--green-deep); --color-focus-on-dark: var(--green-bright); --color-error: var(--terra-text); /* ---------- TYPE ---------- */ --font-display: "Fraunces", Georgia, serif; /* opsz 88, wght >=500 at display sizes */ --font-body: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif; --font-mono: "Space Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; /* ACCENT ONLY */ --text-display-1: clamp(2.75rem, 5.5vw, 4.75rem); /* Fraunces 500 / 1.05 / -0.01em */ --text-display-2: clamp(2rem, 3.5vw, 3rem); /* Fraunces 500 / 1.12 */ --text-h3: 1.75rem; /* Fraunces 600 / 1.2 */ --text-h4: 1.25rem; /* Hanken 700 / 1.3 */ --text-body-lg: 1.25rem; /* Hanken 400 / 1.6 */ --text-body: 1.125rem; /* Hanken 400 / 1.65 — the default */ --text-small: 0.9375rem; /* Hanken 400 / 1.5 */ --text-kicker: 0.8125rem; /* Mono 700 / 1.2 / UPPERCASE / 0.24em */ --text-stat: clamp(2.5rem, 4vw, 4rem); /* Mono 700 / 1.0 / tabular-nums */ --text-label: 1rem; /* Mono 700 / 1.3 — $ amounts, badges */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --leading-tight: 1.05; --leading-display:1.12; --leading-heading:1.2; --leading-ui: 1.3; --leading-body: 1.65; --tracking-display: -0.01em; --tracking-kicker: 0.24em; /* ---------- SPACING (8-step scale; bands pace at s-6/7/8) ---------- */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px; /* ---------- LAYOUT ---------- */ --wrap: 1180px; /* product container (live look: 1340px) */ --wrap-prose: 70ch; /* ---------- RADII ---------- */ --r-md: 14px; /* inputs, small cards */ --r-lg: 22px; /* cards, widgets (supersedes legacy 20) */ --r-pill: 50px; /* buttons */ /* ---------- BORDERS ---------- */ --border-hairline: 1px solid var(--line); --border-strong: 2px solid var(--ink); --border-focus: 2px solid var(--color-focus); /* + 2px offset */ /* ---------- SHADOWS (warm) ---------- */ --shadow-card: 0 1px 2px rgba(20,18,12,.06), 0 6px 18px rgba(20,18,12,.08); --shadow-elevated: 0 2px 6px rgba(20,18,12,.08), 0 16px 40px rgba(20,18,12,.14); /* ---------- MOTION ---------- */ --duration-hover: 150ms; --duration-ui: 250ms; --duration-reveal: 450ms; --duration-orchestration: 900ms; /* total page-load reveal budget */ --stagger-reveal: 75ms; /* 60–90ms per element */ --ease-brand: cubic-bezier(.2,.7,.2,1); --ease-out: cubic-bezier(0,0,.2,1); /* ---------- BREAKPOINTS (reference — use in media queries) ---------- --bp-xs: 375px smallest verified --bp-sm: 640px --bp-md: 900px --bp-lg: 1180px product wrap --bp-xl: 1440px verify --bp-2x: 1920px verify --bp-3x: 2560px MANDATORY wide-screen check (the 1340px lesson) */ } /* ---------- LIVE-SITE LOOK (legacy match for production-mirror surfaces) ---------- */ .theme-live { --color-bg: var(--white); --color-bg-band: var(--paper-cool); --color-bg-dark: var(--ink); --line: var(--line-cool); --wrap: 1340px; --r-lg: 20px; /* Space Mono headings legal ONLY inside this look */ } /* ---------- REDUCED MOTION (mandatory) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* count-ups render final value; marquees render static */ }