/* ===================================================================== FreightMath SpotCheck — Canonical Design Tokens SINGLE SOURCE OF TRUTH for the brand palette, radius, and shadows. Linked by EVERY page in public/*.html. Safe to share everywhere: custom properties only define values, they never restyle an element on their own. Never fork or redefine these in a page. Governed by .claude/skills/spotcheck-design/SKILL.md. ===================================================================== */ :root { --fm-dark-blue: #0A2463; --fm-blue: #2C78C9; --fm-blue-light: #EBF5FF; --fm-orange: #E26E17; --fm-orange-light: #FFF4EB; --fm-green: #10b981; --fm-red: #ef4444; --text-main: #0f172a; --text-muted: #64748b; --border: #e2e8f0; --bg-body: #f8fafc; --bg-card: #ffffff; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --radius: 12px; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } /* --------------------------------------------------------------------- DARK THEME — re-maps the UI tokens only. Brand hues (--fm-*) keep their identity; the signature dark-blue surfaces (banners, results cards) are already dark and read fine. Activated by , which shell.js toggles + persists. Components that hardcode a light color get per-component overrides in styles.css / shell.css. --------------------------------------------------------------------- */ html[data-theme="dark"] { --fm-blue-light: #16243d; --fm-orange-light: #2a1d10; --text-main: #e8eef7; --text-muted: #93a4bd; --border: #25324a; --bg-body: #0b1120; --bg-card: #151d2e; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4); --shadow-lg: 0 10px 24px -6px rgb(0 0 0 / 0.55); }