/* * Design tokens (§33.1–33.3, §33.7). This is a functional first-pass * palette, not final branding — real visual design happens as a later * pass. What matters structurally: light/dark variants exist for both * surfaces from day one, and every later screen is built against these * tokens rather than hard-coded colours. * * Theme is switched by [data-theme="light"|"dark"] on , set by * assets/js/theme-toggle.js. Customer surface defaults light; admin * defaults dark (§33.7) — the default is applied server-side via a * body class (customer-surface / admin-surface) combined with the * user's stored preference, falling back to prefers-color-scheme. */ :root { --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --radius-sm: 4px; --radius-md: 8px; --risk-critical: #C0362C; --risk-high: #C0362C; --risk-caution: #B8790C; --risk-low: #1F7A4D; --risk-info: #2F6FED; } /* Customer surface — light (default) */ [data-theme="light"].customer-surface, .customer-surface:not([data-theme]) { --bg: #F7F8FA; --surface: #FFFFFF; --text: #1B2430; --text-muted: #5B6472; --border: #E1E4E9; --structural: #0B1220; --accent: #2F6FED; } /* Customer surface — dark */ [data-theme="dark"].customer-surface { --bg: #10151D; --surface: #171E28; --text: #EAEDF2; --text-muted: #98A2B3; --border: #2A3341; --structural: #EAEDF2; --accent: #5B90FF; } /* Admin surface — dark (default) */ [data-theme="dark"].admin-surface, .admin-surface:not([data-theme]) { --bg: #0D1117; --surface: #151B23; --text: #E6E9EE; --text-muted: #8B94A3; --border: #232B36; --accent: #5B90FF; } /* Admin surface — light */ [data-theme="light"].admin-surface { --bg: #F2F3F5; --surface: #FFFFFF; --text: #1B2430; --text-muted: #5B6472; --border: #DDE1E6; --accent: #2F6FED; } /* No stored preference (theme_preference_* = 'system', or logged out): follow the OS setting rather than the hardcoded per-surface default. */ @media (prefers-color-scheme: dark) { .customer-surface:not([data-theme]) { --bg: #10151D; --surface: #171E28; --text: #EAEDF2; --text-muted: #98A2B3; --border: #2A3341; --structural: #EAEDF2; --accent: #5B90FF; } } @media (prefers-color-scheme: light) { .admin-surface:not([data-theme]) { --bg: #F2F3F5; --surface: #FFFFFF; --text: #1B2430; --text-muted: #5B6472; --border: #DDE1E6; --accent: #2F6FED; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }