/* * Design tokens — the single source of truth for color, type, spacing, and * motion timing. Components reference ONLY these variables; no raw hex, no magic * numbers in component rules. * * Theme model (per the brand doc): Solar Pop lives on :root as the light default; * Midnight Neon overrides under `.dark-theme` on . Toggling the class is * the ONLY thing that changes color — instantly, with no other layout shift. * * Brand palette values are verbatim from the design system (Appendix A). */ :root { /* --- Solar Pop (light, default) --- */ --bg-canvas: #F7F9FC; /* icy off-white */ --text-primary: #1A1A3A; /* deep indigo */ --text-streak: #7C3AED; /* vivid violet */ --color-success: #2563EB; /* cobalt blue */ --color-error: #FF453A; /* bright vermillion */ /* Derived surfaces — tinted from the canvas so cards/buttons read on both themes without introducing new brand colors. */ --surface: rgba(26, 26, 58, 0.04); --surface-border: rgba(26, 26, 58, 0.16); --text-muted: rgba(26, 26, 58, 0.62); /* --- Typography --- */ --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* --- Spacing scale --- */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4rem; /* the breathing room around the expression */ /* --- Radii --- */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; /* --- Motion timing (one place to retune feel) --- */ --dur-flash: 0.4s; --dur-shatter: 0.4s; --dur-pulse: 1.1s; --ease-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275); color-scheme: light; } .dark-theme { /* --- Midnight Neon (dark) --- */ --bg-canvas: #0B0C10; /* abyss navy/black */ --text-primary: #FFFFFF; /* pure white */ --text-streak: #00F0FF; /* electric cyan */ --color-success: #00FF87; /* neon mint */ --color-error: #FF007A; /* hot magenta */ --surface: rgba(255, 255, 255, 0.05); --surface-border: rgba(255, 255, 255, 0.16); --text-muted: rgba(255, 255, 255, 0.64); color-scheme: dark; }