/* Stormbird design tokens. Light mode is the default (:root); dark mode overrides via [data-theme="dark"], set on by js/theme.js. Same hue family in both modes (not inverted). */ :root { /* Brand palette — light mode */ --color-bg: #F4F5F7; --color-surface: #FFFFFF; --color-text-primary: #1B2838; --color-text-secondary: #5B6B79; --color-border: #D8DDE2; --color-interactive: #3D6A94; --color-interactive-hover: #2C4E6E; /* Destructive-action red — a distinct shade from --color-risk-high on purpose (more saturated vs. that muted brick tone), so this button doesn't get mistaken for a risk indicator. Used only for account-destructive actions like Sign Out, never risk indicators. */ --color-danger: #C62828; --color-danger-hover: #A31E1E; /* Risk status colors — reserved exclusively for risk indicators, never decorative/UI chrome */ --color-risk-low: #3C8558; --color-risk-caution: #C77E1B; --color-risk-high: #B23A3A; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --focus-ring: 0 0 0 3px rgba(61, 106, 148, 0.45); --shadow-card: 0 1px 2px rgba(27, 40, 56, 0.06), 0 1px 8px rgba(27, 40, 56, 0.04); } [data-theme="dark"] { --color-bg: #0F1720; --color-surface: #1B2838; --color-text-primary: #F4F5F7; --color-text-secondary: #9AA7B2; --color-border: #2A3A4A; --color-interactive: #5C8AC0; --color-interactive-hover: #7BA3D1; --color-danger: #E2574F; --color-danger-hover: #EE7A73; --color-risk-low: #4FA06D; --color-risk-caution: #E0973A; --color-risk-high: #D15656; --focus-ring: 0 0 0 3px rgba(92, 138, 192, 0.5); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 8px rgba(0, 0, 0, 0.2); } /* Printing always uses light-mode color values, regardless of which theme was active when the user hit print. Every component in styles.css reads color from these variables rather than hardcoding hex, so resetting them here is enough to make the whole printed report light-on-white — without this, dark theme's near-black surfaces/backgrounds and lower-contrast risk colors would carry into print, fighting the plain white/black overrides already in styles.css's own @media print block (which only covers body and a few explicitly-selected elements, not every var(--color-surface) card/table background in the app). */ @media print { :root, [data-theme="dark"] { --color-bg: #F4F5F7; --color-surface: #FFFFFF; --color-text-primary: #1B2838; --color-text-secondary: #5B6B79; --color-border: #D8DDE2; --color-interactive: #3D6A94; --color-interactive-hover: #2C4E6E; --color-danger: #C62828; --color-danger-hover: #A31E1E; --color-risk-low: #3C8558; --color-risk-caution: #C77E1B; --color-risk-high: #B23A3A; --shadow-card: none; } }