/* ============================================================ SPMS DESIGN TOKENS — v2.0 The ONLY place colours are defined. Every page (app shell, login) reads these variables; components never hard-code a hex value. Two themes share the same token NAMES: light (default) — soft grey canvas, white cards, electric blue dark — the original "Slate & Signal" palette The theme is chosen by , set by a tiny script in the before the page draws (no flash). Status colours in light mode are darker than the brief's brand values (#16A34A / #D97706 / #DC2626) so small badge text still passes WCAG AA (4.5:1) on its tinted background, even on a hovered row. Don't swap them for brighter values without re-checking. ============================================================ */ :root { /* -- non-colour tokens (same in both themes) ----------------- */ --radius: 10px; --radius-sm: 6px; --control-h: 38px; /* inputs, selects */ --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-head: var(--font-body); /* Inter for headings too: one UI typeface */ --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; } /* ---------------- LIGHT (default) ---------------- */ :root, [data-theme="light"] { color-scheme: light; --bg-void: #FFFFFF; /* sidebar */ --bg-base: #F8FAFC; /* app canvas */ --bg-surface: #FFFFFF; /* cards, tables, panels */ --bg-elevated: #F1F5F9; /* hover rows, secondary buttons */ --bg-inset: #F8FAFC; /* table headers, wells */ --bg-input: #FFFFFF; --bg-hover-strong: #E2E8F0; --border-strong: #CBD5E1; --border: #E2E8F0; --border-subtle: #EEF2F6; --border-hover: #94A3B8; --border-input: #8592A6; /* form fields need 3:1 against the page */ --border-input-hover: #5E6E82; --text-hi: #0F172A; --text-mid: #475569; --text-low: #5E6E82; --blue: #0052FF; --blue-hover: #0046DB; --blue-press: #003BB8; --blue-dim: rgba(0, 82, 255, .08); --blue-ring: rgba(0, 82, 255, .25); --blue-border: rgba(0, 82, 255, .30); --on-blue: #FFFFFF; --blue-fill: #0052FF; /* filled buttons */ --blue-fill-hover: #0046DB; --blue-fill-press: #003BB8; --success: #146C36; --success-dim: rgba(22, 163, 74, .10); --success-border: rgba(22, 163, 74, .35); --warning: #A3500A; --warning-dim: rgba(217, 119, 6, .11); --warning-border: rgba(217, 119, 6, .35); --critical: #C42020; --critical-dim: rgba(220, 38, 38, .09); --critical-border: rgba(220, 38, 38, .35); --critical-hover: #A51B1B; --info: #0369A1; --info-dim: rgba(2, 132, 199, .10); --info-border: rgba(2, 132, 199, .35); --neutral-dim: rgba(100, 116, 139, .12); --ti-edge: inset 0 0 0 transparent; /* no "titanium" highlight on light */ --shadow-1: 0 1px 2px rgba(15, 23, 42, .06); --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12); --backdrop: rgba(15, 23, 42, .40); --chart-grid: rgba(15, 23, 42, .07); --chart-series-2: #0F172A; /* contrast line next to blue */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); } /* ---------------- DARK ("Slate & Signal") ---------------- */ [data-theme="dark"] { color-scheme: dark; --bg-void: #070A0F; --bg-base: #0B1017; --bg-surface: #101724; --bg-elevated: #161F2E; --bg-inset: #0D1320; --bg-input: #0D1320; --bg-hover-strong: #1B2536; --border-strong: #2C3A4E; --border: #1E2836; --border-subtle: #161E2A; --border-hover: #3A4A62; --border-input: #5A6A80; --border-input-hover: #7A899E; --text-hi: #EAF0F7; --text-mid: #98A6B9; --text-low: #7A899E; /* was #5D6C80 — raised to pass AA on dark surfaces */ --blue: #2E7CF6; --blue-hover: #4C90F8; --blue-press: #1E63D6; --blue-dim: rgba(46, 124, 246, .13); --blue-ring: rgba(46, 124, 246, .35); --blue-border: rgba(46, 124, 246, .28); --on-blue: #FFFFFF; --blue-fill: #1F6AE6; /* a shade deeper than --blue so white button text passes AA */ --blue-fill-hover: #2E7CF6; --blue-fill-press: #1A58C2; --success: #2FBF71; --success-dim: rgba(47, 191, 113, .13); --success-border: rgba(47, 191, 113, .35); --warning: #E8A13C; --warning-dim: rgba(232, 161, 60, .13); --warning-border: rgba(232, 161, 60, .35); --critical: #E5484D; --critical-dim: rgba(229, 72, 77, .14); --critical-border: rgba(229, 72, 77, .40); --critical-hover: #C93A3F; --info: #45A2FF; --info-dim: rgba(69, 162, 255, .13); --info-border: rgba(69, 162, 255, .35); --neutral-dim: rgba(152, 166, 185, .12); --ti-edge: inset 0 1px 0 rgba(255, 255, 255, .045); --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .5); --backdrop: rgba(5, 8, 14, .70); --chart-grid: rgba(30, 40, 54, .70); --chart-series-2: #EAF0F7; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2398A6B9' stroke-width='2'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E"); } /* ---------------- LEGACY ALIASES ---------------- Older templates reference these names inline (style="color:var(--purple)"). They point at the tokens above, so they follow the theme automatically. New code should use the token names, not these. */ :root { --bg: var(--bg-base); --surface: var(--bg-surface); --surface-solid: var(--bg-surface); --text: var(--text-hi); --text-muted: var(--text-mid); --purple: var(--blue); --purple-soft: var(--blue-dim); --green: var(--success); --green-soft: var(--success-dim); --orange: var(--warning); --orange-soft: var(--warning-dim); --red: var(--critical); --red-soft: var(--critical-dim); --blue-soft: var(--info-dim); --accent: var(--blue); --accent-soft: var(--blue-dim); --warn: var(--warning); --warn-soft: var(--warning-dim); --danger: var(--critical); --danger-soft: var(--critical-dim); }