/* MPE shared design tokens — DESIGN_SPEC.md §1 (APPROVED 2026-07-17). Single source of truth for all colors. Never hardcode a color outside this file. This file is duplicated verbatim into both apps (CRM + Field App); announce any token change in STATUS.md. Themes apply via data-theme on (set before first paint by the no-flash inline script in index.html). Light is the default. The legacy aliases at the bottom of each block keep pre-restyle CSS working while screens migrate to the new token names. */ :root { /* ---- shared non-color tokens ---- */ --radius-card: 14px; --radius-control: 10px; --radius-pill: 22px; --font: 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; --fs-base: 15px; --fs-kpi: 27px; --fw-kpi: 780; --space: 8px; /* base grid unit */ } /* ================= LIGHT (default) ================= */ :root, :root[data-theme="light"] { --bg: #FAFBFD; --surface: #FFFFFF; --surface-2: #F1F5F9; --line: #E7EBF1; --ink: #122437; --ink2: #516174; --ink3: #667487; /* was #93A2B4 — darkened for WCAG AA (4.76:1 on white; hints + inactive nav labels) */ --navy: #052E51; --orange: #D6350A; /* was #EA3A0B — darkened for WCAG AA (white-on-orange & orange-on-surface 4.8:1) */ --blue: #009BE6; --accent: #0079c4; --good: #0E9F6E; --warn: #D97706; --bad: #DC2626; --shadow: 0 2px 8px rgba(18, 36, 55, .06), 0 1px 2px rgba(18, 36, 55, .05); /* ---- legacy aliases (pre-restyle CSS) ---- */ --card: var(--surface); --text: var(--ink); --muted: var(--ink2); --border: var(--line); --danger: var(--bad); --ok: var(--good); } /* ================= DARK ================= */ :root[data-theme="dark"] { --bg: #0B1826; --surface: #12233A; --surface-2: #1A2F4A; --line: #24405F; --ink: #E8EFF6; --ink2: #A9BBCE; --ink3: #8098B2; /* was #6E86A0 — lightened for WCAG AA (5.31:1 on dark surface) */ --navy: #009BE6; /* active nav uses blue in dark */ --orange: #FF5A2B; /* kept vibrant: active nav label needs it (5.1:1 on dark surface); dark-theme buttons use dark ink text instead of white */ --blue: #3DB8F5; --accent: #4FC3FF; --good: #2ECF96; --warn: #F5A623; --bad: #FF6B6B; --shadow: 0 2px 8px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3); --card: var(--surface); --text: var(--ink); --muted: var(--ink2); --border: var(--line); --danger: var(--bad); --ok: var(--good); }