/* ============================================================================ DO NOT EDIT — generated from SDLC/design-system/tokens.css by tools/sync-tokens.py Edit the source, then run: python3 tools/sync-tokens.py A commit-time guard (.claude/hooks/tokens-sync-check.cjs) fails if this file is stale. App-only shell tokens live in apps/web/src/styles/app-tokens.css, not here. ============================================================================ */ /* SCORE design tokens — the visual layer (ADR-024, ratified CR-003 2026-06-19; re-themed CR-031 2026-08-07). THIS FILE IS THE SOLE SOURCE OF DESIGN TOKENS. apps/web/public/tokens.css is a GENERATED copy — edit here, then run: python3 tools/sync-tokens.py A commit-time guard (.claude/hooks/tokens-sync-check.cjs) fails if the copy is stale. App-only shell measurements live in apps/web/src/styles/app-tokens.css, not here. Prose source of truth: SDLC/design-system/design-tokens.md. Direction: Warm & Grounded — deep-maroon brand surfaces on a warm cream canvas, one blue spark (CR-031) · Light + Dark both P1 · System font · Rounded-comfortable. */ :root{ /* neutrals — slate scale. The content backbone; CR-031 does not touch it. */ --slate-900:#0F172A; --slate-800:#1E293B; --slate-700:#334155; --slate-600:#475569; --slate-500:#64748B; --slate-400:#94A3B8; --slate-300:#CBD5E1; --slate-200:#E2E8F0; --slate-100:#F1F5F9; --slate-50:#F8FAFC; --white:#FFFFFF; /* ─── raw brand hue ramp (CR-031) ──────────────────────────────────────────────────────────── THE ONLY BLOCK IN THE SYSTEM THAT KNOWS THE BRAND IS CURRENTLY MAROON. Nothing outside the --brand-* role block directly below may reference a --maroon-* name — not a component, not a screen stylesheet, not a .tsx. That indirection is the entire engineering point of CR-031: the next direction change edits this ramp and the two dark role re-points, not 102 consumer files. Enforced as a frontend-react-pwa-ts Red Flag and by /static-review. Theme-invariant: one ordered hue scale, declared once, never repeated in the dark block. The -950 and -300 steps exist because dark mode needs a deeper fill and a light on-fill; DESIGN.md records them as `brand-100-dark` / `brand-fg-dark`, which is the same two values by role name. */ --maroon-950:#2C1219; /* soft brand fill — dark theme */ --maroon-900:#3F0D1D; /* deepest wash stop; the shadow tint */ --maroon-800:#5E1429; /* rail / band base; on-fill text — light theme */ --maroon-700:#7D1D3A; /* THE brand hue — also the PWA theme_color */ --maroon-600:#9B2947; /* wash mid-stop; hover on a brand surface */ --maroon-500:#B8385A; /* lightest ramp step */ --maroon-300:#F0A9BC; /* on-fill text/icon — dark theme */ --maroon-100:#FAE8ED; /* soft brand fill — light theme (the coin pill) */ /* ─── brand ROLES — this is what every consumer references (CR-031) ────────────────────────── Binding rule (CR-031 §3): maroon is a SURFACE, never an action fill and never a status colour. Allowed: the desktop nav rail, the mobile header band, a brand wash, the coin pill, the photo-hero fallback block. A maroon button or a maroon status chip is a defect. */ --brand-900:var(--maroon-900); --brand-800:var(--maroon-800); --brand-700:var(--maroon-700); --brand-600:var(--maroon-600); --brand-500:var(--maroon-500); --brand-100:var(--maroon-100); /* soft brand fill — coin pill */ --brand-fg:var(--maroon-800); /* text/icon ON --brand-100 */ --brand-wash: /* the brand surface itself — rail, header band */ linear-gradient(158deg,var(--brand-800) 0%,var(--brand-700) 52%,var(--brand-600) 100%); /* ─── ON-WASH roles — everything that paints ON TOP of --brand-wash (CR-031 Sprint 03) ───────── White-at-ALPHA, never a --maroon-* step. Two reasons, both load-bearing: 1. An overlay must let the wash's own gradient show through. A flat maroon step cannot. 2. Reaching into the raw ramp from a consumer is the exact leak the block above forbids. Declared once in :root and deliberately NOT re-pointed in the dark block: the wash is dark in BOTH themes, so white-at-alpha is correct in both. That is also why the next re-theme inherits these for free — white on a dark brand surface holds for any brand hue. Consumers: the desktop nav rail + its pinned flyout (CMP-O02), the mobile header band and the on-brand TierChip variant (CMP-A13, Sprint 04). */ --brand-on-wash:var(--white); /* primary + selected text/icon on the wash */ --brand-on-wash-soft:rgba(255,255,255,.86); /* resting body text — nav row labels */ --brand-on-wash-muted:rgba(255,255,255,.74); /* secondary — meta, counts, hints, resting icons */ --brand-on-wash-fill:rgba(255,255,255,.16); /* selected / open row fill; chip + avatar fill */ --brand-on-wash-fill-quiet:rgba(255,255,255,.12); /* count badge on a RESTING row */ --brand-on-wash-fill-strong:rgba(255,255,255,.24); /* count badge on a SELECTED row */ --brand-on-wash-hover:rgba(255,255,255,.10); /* hover fill — one step below the selected fill */ --brand-on-wash-line:rgba(255,255,255,.16); /* borders, separators, rail edge */ --brand-on-wash-line-strong:rgba(255,255,255,.28); /* chip outline — needs to read against its fill */ /* roles */ --color-primary:var(--slate-700); --color-text:var(--slate-800); /* #1E293B — unchanged by CR-031 */ --color-text-muted:var(--slate-600); /* #475569 — CARRIED OVER unchanged from CR-018, where it was raised to slate-600 for AA against the COOL #ECF1F7 page. It must be re-proved against the warm #F2ECE4 canvas: CR-031 Sprint 7. */ --color-border:#DED3C6; /* CR-031: warm border (was var(--slate-200) #E2E8F0) */ --color-surface:var(--white); /* card surface — unchanged in light */ --color-surface-page:#F2ECE4; /* CR-031: the warm cream canvas the whole system sits on (was #ECF1F7) */ --color-surface-tint:#F6EFE9; /* CR-031: warm component/section tint (was #F3F1FB lavender) */ --color-hairline:#E7DED3; /* CR-031: warm in-row partition, lighter than --color-border (was #ECEAF6) */ /* brand accent — use sparingly (one primary action / logo). Royal blue per CR-019. UNCHANGED BY CR-031 (decision D7): maroon took the brand-SURFACE job, not the action job. Three accents, three jobs — blue = the one solid action fill, maroon = brand surface + coin, error red = small soft pills. */ --accent:#1D4ED8; --accent-hover:#1E40AF; --accent-bg:#E4EBFB; /* soft accent tint — active nav row/slot (CMP-O02) */ --accent-fg:#1D4ED8; /* text/icon ON --accent-bg — completes the -bg/-fg pair every status colour already has. Light: equals --accent (5.61:1 on --accent-bg, AA pass) so the CR-019 look is unchanged. */ /* page background wash — CR-019 technique, CR-031 stops. Subtle top-anchored tints over the ratified base; PAGE bg ONLY (wired in global.css body), never a component fill. Anchored in px so it stays a fixed top band. GEOMETRY (radii, positions, layer count) is byte-identical to CR-019 — CR-031 D1 moved only the three light stops warm. */ --gradient-page: radial-gradient(1100px 520px at 12% -170px, rgba(250,232,237,.55), rgba(250,232,237,0) 70%), radial-gradient(1000px 500px at 88% -170px, rgba(247,235,224,.62), rgba(247,235,224,0) 70%), radial-gradient(1200px 520px at 50% -210px, rgba(246,239,233,.72), rgba(246,239,233,0) 72%), var(--color-surface-page); /* semantic (always pair with icon + text) */ --success:#16A34A; --success-bg:#DCFCE7; --success-fg:#166534; --warning:#D97706; --warning-bg:#FEF3C7; --warning-fg:#92400E; --error:#DC2626; --error-bg:#FEE2E2; --error-fg:#991B1B; --info:#2563EB; --info-bg:#DBEAFE; --info-fg:#1E40AF; /* status palette — Milestone bucket (solid chip). See design-system/status-palette.md. CR-031 Sprint 2 inspected this indigo on the new #F2ECE4 canvas and did NOT change it — a change would need its own CR. Finding recorded in the sprint's ## Notes. */ --milestone:#6366F1; --milestone-fg:#FFFFFF; /* membership tiers (badge + label + colour, never colour alone) */ --tier-silver:#94A3B8; --tier-gold:#E0A100; --tier-diamond:#38BDF8; --tier-bluestar:#1E5FB0; /* typography — system stack, Hindi-ready (ADR-019) */ --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans Devanagari",sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --fs-display:24px; --fs-h1:20px; --fs-label:13px; --fs-body:14px; --fs-sm:12px; --fs-micro:11px; --lh-body:1.5; /* amounts (CR-031) — money is the one thing this product is trusted on, so it gets its own scale instead of borrowing the display sizes. Tabular figures, never italic. ADDED, not substituted: the display/h1/body scale above is unchanged. */ --fs-amount-lg:23px; /* a figure inside a card — wallet row, deal value */ --fs-amount-xl:30px; /* the one figure a screen is ABOUT */ --fs-amount-hero:52px; /* the coin/wallet hero balance — at most one per view */ /* responsive breakpoints (mobile-first, ADR-023). --bp-md = the TABLE breakpoint: collections render as cards below it, table/grid at or above it (UX-17 / BR-G08). */ --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; /* radius — softened one step by CR-031 (warm canvas, rounder corners). Four names kept, one added. */ --r-sm:8px; /* was 6px — inputs, small chips */ --r-md:12px; /* was 8px — DEFAULT: buttons, cards-inner */ --r-lg:16px; /* was 12px — cards, panels, nav */ --r-xl:22px; /* NEW — the photo hero, large brand surfaces */ --r-pill:999px; /* unchanged — badges, status pills */ /* spacing — 8px grid. Unchanged by CR-031. */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; /* elevation + focus — retinted slate→maroon by CR-031. The NAMES are unchanged, so nothing that consumes a shadow token needs editing. A slate-tinted shadow over a cream page reads grey and dirty; these carry --brand-900 (#3F0D1D) so they read as depth. The geometry loosened slightly to match the larger radii. DESIGN.md's Whisper Rule ceiling moves 10% → 13% for the OVERLAY tier only (--shadow-md); the resting tiers got quieter (.10 → .08). Maroon-on-warm has less hue contrast than slate-on-cool, so 13% here is the same perceived whisper — a re-calibration, not a licence for heavier shadows. */ --shadow-sm:0 1px 2px rgba(63,13,29,.06); --shadow:0 2px 8px rgba(63,13,29,.08),0 1px 2px rgba(63,13,29,.06); --shadow-md:0 8px 24px rgba(63,13,29,.13); --color-elevated:var(--white); --focus-ring:2px solid var(--info); /* z-index ladder (RBT-030 Sprint 03 / §5.4) — ONE ordered scale so stacked layers stop using ad-hoc magic numbers. Order (low→high): page content sits at the default 0 < the L2 top strip < the peeked/ pinned rail overlay panel < the rail's edge-toggle chip < app banners < the boot banner < the command palette. The nav overlay MUST sit above the top strip (so a peeked rail paints over it) yet below the banners and palette (a boot banner / ⌘K must never be occluded by the rail). The edge-toggle CHIP sits one step ABOVE the overlay (RBT-030 Sprint 03 QA fix): it is the sole collapse/expand affordance, so when the panel expands over the chip's edge position the chip must remain the topmost hit target — otherwise a peeked/pinned rail cannot be toggled (an expanded-panel label would intercept the click). Values keep the promoted ad-hoc numbers; only the chip moved from 6 to 16 to clear the overlay. Theme-invariant, so declared once here (not repeated in the dark block). */ --z-nav-strip:5; --z-nav-rail-overlay:15; --z-nav-rail-chip:16; --z-banner:50; --z-boot-banner:60; --z-palette:1000; } /* Dark theme — P1 deliverable (light + dark both ship in Phase 1). Same tokens, swapped values. Colour-blind verified (icon + text always accompanies status/tier colour — never colour alone). CR-031: the dark side turns WARM too — the surfaces are a dark brown-black rather than the old indigo-navy — and the brand surfaces DARKEN (#3F0D1D → #7D1D3A) rather than desaturating to grey, so dark mode still has a real maroon in it. */ [data-theme="dark"]{ /* brand roles — only three re-point. The raw --maroon-* ramp above is theme-invariant; this is what "the next re-theme costs about eight lines" means in practice. */ --brand-100:var(--maroon-950); /* #2C1219 — soft brand fill on dark */ --brand-fg:var(--maroon-300); /* #F0A9BC — light rose so text on a soft brand fill still reads */ --brand-wash: linear-gradient(158deg,var(--brand-900) 0%,var(--brand-800) 55%,var(--brand-700) 100%); --color-primary:var(--slate-100); --color-text:#F5EFEA; /* CR-031: warm near-white (was var(--slate-100) #F1F5F9) */ --color-text-muted:#B6A49E; /* CR-031: warm muted (was #9C98BE indigo-tinted) */ --color-border:#3A2C29; /* CR-031: warm border (was #2B2650 indigo) */ --color-surface:#201917; /* CR-031: warm card surface (was #191533 indigo) */ --color-surface-page:#15100F; /* CR-031: warm dark canvas (was #0C0A1C indigo-navy) */ --color-surface-tint:#1B1513; /* CR-031: recessed warm component tint (was #12102A) */ --color-hairline:#2E2421; /* CR-031: warm in-row partition (was rgba(160,150,220,.16)) */ --color-elevated:#2A211E; /* CR-031: derived by desaturating --brand-900 toward --color-surface-page. Sprint-6 visual confirmation pending against a re-rendered CMP-M01 card. */ --accent:#2563EB; --accent-hover:#1D4ED8; --accent-bg:#17233F; /* brand accent (Royal, CR-019); dark = #2563EB so white button text ≥4.5:1 AA */ --accent-fg:#93C5FD; /* text/icon ON --accent-bg. NOT --accent: that pair is 3.01:1 here (AA fail) — the value above was validated for white-on-accent, never accent-on-accent-bg. blue-300 = 8.6:1; mirrors --info-fg:#93C5FD on the near-identical --info-bg:#14233F. */ /* CR-031 D1: geometry byte-identical to CR-019; only the two stops moved to maroon. */ --gradient-page: radial-gradient(1000px 540px at 50% -190px, rgba(94,20,41,.42), rgba(94,20,41,0) 70%), radial-gradient(760px 440px at 86% -120px, rgba(63,13,29,.34), rgba(63,13,29,0) 70%), var(--color-surface-page); /* CR-019: subtle top wash (page bg ONLY, never a component fill) */ --success:#4ADE80; --success-bg:#14321F; --success-fg:#86EFAC; --warning:#FBBF24; --warning-bg:#3A2A0A; --warning-fg:#FCD34D; --error:#F87171; --error-bg:#3B1518; --error-fg:#FCA5A5; --info:#60A5FA; --info-bg:#14233F; --info-fg:#93C5FD; --tier-silver:#CBD5E1; --tier-gold:#FBBF24; --tier-diamond:#7DD3FC; --tier-bluestar:#60A5FA; --milestone:#818CF8; --milestone-fg:#1E1B4B; /* milestone bucket — dark (lighter fill, dark label) */ /* Dark shadows stay pure black: design-tokens.md §3 ratifies the maroon retint for the LIGHT column only, and black-on-warm-dark already reads as depth rather than soot. */ --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.35); --shadow-md:0 6px 16px rgba(0,0,0,.5); --focus-ring:2px solid var(--info); }