/* ============================================================ * user_ui — design tokens * ============================================================ * * Phase 7 Package B. CSS custom properties for the user-facing * site. Single source of truth for brand colors, surface colors * (light + dark), radii, typography, container width, and the * responsive container padding. * * Authoritative reference for what each token means: * documentation/user_ui/DESIGN_SYSTEM.md * * Light theme variables live on :root. Dark theme overrides live * inside html[data-theme="dark"] { ... }. The site is dark by * default (data-theme="dark" set on ); switching themes is * a single attribute swap — the JS that toggles it ships with * Phase 7 Package C as a registry module. * * Token values are mirrored verbatim from the landing mockup so * the live site and the mockup render identically. Do not invent * new tokens or new color values here without updating * DESIGN_SYSTEM.md first (§9 — Don't introduce new colors). * ============================================================ */ :root { /* -------- Brand -------- */ --orange: #DC800A; --orange-2: #C87509; --orange-3: #F0A055; --gold: #E2B33B; --purple: #7C5BE6; --blue: #3D6FE8; --cyan: #3DC8E8; /* -------- Surfaces — light theme defaults -------- */ --bg: #EEF1F4; --bg-2: #E3E7EC; --surface: #F6F8FA; --surface-2: #FFFFFF; --line: rgba(20, 28, 40, .10); --line-2: rgba(20, 28, 40, .06); --text: #1B2230; --text-dim: #5B6577; --text-mute: #8A93A4; --chip: #EAEDF1; /* -------- Radii -------- */ --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --radius-btn: 16px; /* -------- Typography stack -------- */ --font-head: "Saira Semi Condensed", ui-sans-serif, system-ui, sans-serif; --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* -------- Layout -------- */ --container: 1240px; --pad: clamp(20px, 3vw, 40px); } /* -------- Dark theme overrides -------- */ html[data-theme="dark"] { --bg: #0B0E13; --bg-2: #0F131B; --surface: #141B26; --surface-2: #1A2230; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .05); --text: #FFFFFF; --text-dim: #ACACAC; --text-mute: #6B7588; --chip: #1B2331; } /* ============================================================ * Responsive container padding shrinks on iPad and phone. The * media-query overrides live here next to the token they modify * so the value chain is in one place. Component-level responsive * rules live with the component CSS. * ============================================================ */ @media (max-width: 1100px) { :root { --pad: 28px; } } @media (max-width: 760px) { :root { --pad: 18px; } }