/* ========================================================================== DESIGN TOKENS Single source of truth for color, spacing, type, radius, shadow. THEMING ------- Light is the base, declared on :root. Dark overrides ONLY the colour tokens, at the bottom of this file, under :root[data-theme="dark"]. There is exactly one dark block, not one per media query, because the theme is always resolved to an explicit data-theme attribute by assets/js/theme.js before first paint — including the "follow the operating system" case, which JS resolves and re-resolves if the OS setting changes while the app is open. That keeps this file DRY: a duplicated @media (prefers-color-scheme) block would be a second copy of every value to keep in step. Nothing outside this file should name a colour. If a component needs one that does not exist here, add a semantic token here rather than a hex value there — that is what makes a theme switch a token change instead of a sweep through twenty components. ========================================================================== */ :root { /* What the browser should assume for form controls, scrollbars and the like. Overridden in the dark block. */ color-scheme: light; /* Brand — blue and white, anchored on the logo's own blue. Hierarchy comes from tonal weight within this one hue (a deep shade for primary buttons and headline surfaces, the base shade for structural/nav elements, pale tints for backgrounds and badge fills) rather than a second color family doing the "important vs. secondary" job blue alone can already do. */ --color-primary: #2f5fed; --color-primary-dark: #2447c2; --color-primary-light: #e3e9ff; --color-primary-50: #f2f5ff; /* The strongest filled primary surface — the hero stat chip. Separate from --color-primary-dark because that token also means "primary hover" and "primary accent text", and in dark mode those want to get LIGHTER while a filled chip carrying white text has to stay dark. */ --color-primary-emphasis: #2447c2; /* Reserved, not used on any primary surface — kept only as the documented escape hatch for a chart that someday needs a genuine second series. Buttons, hero cards, nav and badges must stay on the blue scale above. */ --color-accent: #d97a1f; --color-accent-dark: #a85a0d; --color-accent-light: #fbe4cc; --color-accent-50: #fef6ec; /* Neutrals — clean, light, low-contrast surfaces */ --color-bg: #f7f8fa; --color-surface: #ffffff; /* A surface that sits ABOVE another surface: modal sheets, dropdown menus, hover fills. In light mode it is the page tint (a card's hover reads as a faint grey); in dark mode it is LIGHTER than the card, because on dark backgrounds elevation reads as light, not shadow. */ --color-surface-raised: #f7f8fa; /* Floating panels that sit OVER the page: modal sheets, combobox dropdowns, the date picker. Light mode wants plain white here (same as a card) while dark mode wants a lifted grey, so this cannot just be --color-surface. */ --color-surface-overlay: #ffffff; --color-border: #e7e9ee; --color-border-strong: #d3d7e0; --color-text: #14161f; --color-text-muted: #63697b; --color-text-faint: #6b7184; /* ~4.9:1 on white — passes WCAG AA for normal text */ /* Text/icons drawn ON a filled primary surface (buttons, the brand mark, the active bottom-nav chip). Named rather than hardcoded to #fff so the dark theme can change it if its primary ever gets light enough to need dark text on top. */ --color-on-primary: #ffffff; /* Body links. Separate from --color-primary because primary doubles as a button background: a background wants to be dark enough for white text, while a link on the page background wants to be light enough to read. One value cannot do both once the page goes dark. */ --color-link: #2f5fed; /* Scrim behind modals and the mobile drawer. */ --color-scrim: rgba(16, 24, 40, 0.5); /* The animated highlight that sweeps a loading skeleton. */ --color-skeleton-sheen: #eef1f5; /* Caret for a native