/* ══ Providentia EWS — canonical semantic theme tokens ═══════════════ One token vocabulary, three first-class themes: - Dark — the product's home theme: the approved Providentia brand-board palette (near-black/deep-navy foundations, electric-blue identity), the exact-match baseline for the approved compositions. - Light — a full ice-white/navy counterpart, every text pair verified >= 4.5:1 and every UI boundary >= 3:1 (see Dashboard/test/run_theme_light_contrast_audit.js for the actual WCAG computation over these exact values). - System — not a third palette: theme.js resolves the operating- system preference to dark or light before first paint and re-resolves live if the OS preference changes. Loaded by EVERY page (public landing, sign-in, reset-password, and the authenticated app) BEFORE the page's own stylesheet, so the same semantic vocabulary styles the whole product. theme.js (loaded in before this file's consumers paint; external because the CSP has no 'unsafe-inline' for scripts) stamps the resolved theme onto — the light block below activates on that attribute, never on a class an individual page must remember. No-JS / failed-JS fallback: no data-theme attribute means the :root defaults below apply — the product stays in its home dark theme rather than flashing or half-switching. Standing restrictions (both themes): no gradients in ordinary controls/cards/tables/nav (atmospheric artwork only); no warm IDENTITY hues (the approved severity ramp is priority display only); red reserved for genuine severity/failure/overdue/action-required; bright green only for the genuinely-supported Data Connected state. */ :root{ color-scheme: dark; /* ══ Dark — Providentia approved-comp palette (brand board) ═════ Near-black/deep-navy foundations, electric-blue identity, silver structure, ice-white typography — anchor values from the approved brand reference. Contrast (WCAG relative luminance, verified): --ink/--surface 17.9, --ink-secondary/--surface-2 10.4, --ink-muted >= 4.9 everywhere it appears, --brand as text 4.85, white on --brand-deep fill 4.98, severity text >= 6.5 — every text pair clears 4.5:1 and every UI boundary clears 3:1. */ --bg: #050A12; /* providentia near-black */ --surface: #08111C; /* surface-1 */ --surface-2: #0B1623; /* surface-2 */ --surface-3: #0E1A28; /* surface-3 */ --surface-selected: #122238; --surface-deep: #02080E; /* landing panels/cards (measured ref) */ --border: #1A2835; /* border-soft */ --border-strong: #263544; /* border-strong */ --divider-quiet: rgba(38,53,68,.5); --ink: #F8FAFC; /* text-primary */ --ink-secondary: #B6BDC6; /* silver / text-secondary */ --ink-muted: #7F8A98; /* text-muted */ --steel: #B6BDC6; --gunmetal: #263544; /* Electric-blue identity. The CTA fill is a marginally deepened electric blue (#1266F2) so white button text clears 4.5:1 — the open identity blue itself (#1E7BFF) is used for text/accents. */ --brand-deep: #1266F2; /* primary/CTA fills (white text 4.98:1) */ --brand: #1E7BFF; /* electric blue — links, identity text */ --brand-bright: #1E7BFF; /* identity/active/selected accents */ --brand-hover: #3B8DFF; --brand-soft: rgba(30,123,255,.14); --brand-border: rgba(30,123,255,.48); /* Alert red is reserved for genuine failure/overdue/Action Required. The approved comp introduces a dedicated severity ramp (below) for PRIORITY display only — neutral workflow statuses keep the cool neutral set so a generic badge never reads as a caution. */ --critical: #EF4444; /* alert red — failure; overdue; Action Required */ --critical-bright: #F87171; --critical-soft: rgba(239,68,68,.12); --critical-border: rgba(239,68,68,.44); /* Neutral silver-blue for NON-priority neutral statuses (generic workflow badges, Experiencing Delays) — kept deliberately separate from the approved severity ramp below so a neutral "Monitoring" badge can never read as a caution. */ --medium: #8FA3B8; --medium-bright: #C7D3DE; --medium-soft: rgba(143,163,184,.13); --medium-border: rgba(143,163,184,.44); --monitor: #3B82F6; /* Monitor priority (= severity-monitoring) */ --monitor-bright: #7FB1F7; --monitor-soft: rgba(59,130,246,.14); --monitor-border: rgba(59,130,246,.44); /* Approved severity ramp (brand board / Daily Brief reference). */ --severity-high: #F97316; --severity-high-soft: rgba(249,115,22,.12); --severity-high-border: rgba(249,115,22,.5); --severity-medium: #EAB308; --severity-medium-soft: rgba(234,179,8,.12); --severity-medium-border: rgba(234,179,8,.5); --severity-monitoring: #3B82F6; --good: #22C55E; /* connected green; verified/approved */ /* The Data Connected success dot must read as unmistakably, brightly green — distinct from --good (calmer "verified/approved" text) so the one indicator that is genuinely supported stays punchy. */ --connected-dot: #22C55E; --violet: #9b89d6; /* AI-origin / unsettled machine-analysis states only */ --focus-ring: #3B8DFF; /* Rounded-rectangle radius system, applied by component intent (panels/cards/dialogs/menus vs. buttons/inputs vs. compact tags). Data Connected keeps its dedicated --radius-pill exception. */ --radius-panel: 10px; --radius-control: 8px; --radius-tag: 6px; --radius-small: 5px; --radius-pill: 999px; /* Legacy alias bridge — existing rules still read var(--accent). */ --accent: var(--brand); --accent-ink: #eaf6fc; --wf-danger: #e2685f; /* ── Theme-dependent literals, tokenized (Providentia theme pass) ── Every hex/rgba that used to be hardcoded in component rules but cannot survive a light background unchanged now lives here, one token per formerly-hardcoded value, dark values preserved exactly. */ --critical-text: #F87171; /* error text, overdue badges, chip-reason, sh-bad */ --critical-text-hover: #FCA5A5; /* qa-danger hover */ --critical-text-strong: #F98D8D; /* Sync Failed pill, wf-tool-danger */ --critical-text-strong-hover: #FCA5A5; /* wf-tool-danger hover */ --critical-border-strong: rgba(239,68,68,.6); --good-text: #4ADE80; /* chip-good, sh-good, approved statuses */ --good-soft: rgba(34,197,94,.10); --good-border: rgba(34,197,94,.4); --violet-text: #c3bdf5; /* chip-violet */ --violet-text-soft: #c9c0ee; /* ai-draft-label */ --violet-soft: rgba(155,137,214,.12); --violet-border: rgba(155,137,214,.4); --info-text: #6FB1FF; /* intel-status-HumanReviewed */ --info-soft: rgba(30,123,255,.14); --info-border: rgba(30,123,255,.4); --neutral-soft: rgba(255,255,255,.06); --on-brand: #ffffff; /* text on --brand-deep fills */ --on-critical: #2b0805; /* text on --critical-bright fills */ --overlay: rgba(0,0,0,.6); /* dialog backdrop */ --shadow-pop: 0 12px 32px rgba(0,0,0,.55); /* floating menus */ --shadow-dialog: 0 20px 60px rgba(0,0,0,.5); --shadow-tip: 0 8px 24px rgba(0,0,0,.45); /* Approved typography system: Cormorant Garamond (display/brand/ editorial) + Inter (UI/body) — self-hosted, see fonts.css. */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Cascadia Code', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; --font-wordmark: var(--font-display); /* V6.1 spacing rhythm — unchanged; high information density is a stated product requirement. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; } /* ══ Light — ice-white foundations, navy ink, the same Honolulu-blue identity family darkened to text-safe strengths. Every value below was chosen against the WCAG relative-luminance formula BEFORE landing (run_theme_light_contrast_audit.js re-computes them on every test run): ink 16.9:1 on surface, ink-secondary 9.3:1 on surface-2, ink-muted >= 5.0:1 everywhere it appears, brand link text 6.1:1, white on brand-deep 5.9:1, focus ring >= 4.0:1 on every surface, border-strong >= 3:1 as a UI boundary. ═══════════════════════════ */ :root[data-theme="light"]{ color-scheme: light; --bg: #eef2f7; --surface: #ffffff; --surface-2: #f1f5fa; --surface-3: #e3eaf3; --surface-selected: #d7e5f5; --surface-deep: #ffffff; --border: rgba(16,42,77,.22); --border-strong: rgba(16,42,77,.56); --divider-quiet: rgba(16,42,77,.12); --ink: #101d2f; --ink-secondary: #39485c; --ink-muted: #51637a; --steel: #54687f; --gunmetal: #c6d2e0; --brand-deep: #1059D6; --brand: #0E56C8; --brand-bright: #0B57C2; --brand-hover: #1266F2; --brand-soft: rgba(18,102,242,.10); --brand-border: rgba(18,102,242,.5); --critical: #b3372f; /* Light --critical-bright doubles as small badge TEXT over the --critical-soft tint (.b-High), which needs 4.5:1 there — #a02c24 measures 6.3:1 on the tint and 7.0:1 as a fill under white text. */ --critical-bright: #a02c24; --critical-soft: rgba(179,55,47,.10); --critical-border: rgba(179,55,47,.5); --medium: #5b6b80; --medium-bright: #42536a; --medium-soft: rgba(91,107,128,.12); --medium-border: rgba(91,107,128,.5); --monitor: #1D63C9; --monitor-bright: #1A57B0; --monitor-soft: rgba(29,99,201,.12); --monitor-border: rgba(29,99,201,.5); --severity-high: #9A470C; --severity-high-soft: rgba(154,71,12,.10); --severity-high-border: rgba(154,71,12,.5); --severity-medium: #755A00; --severity-medium-soft: rgba(117,90,0,.10); --severity-medium-border: rgba(117,90,0,.5); --severity-monitoring: #1D63C9; --good: #257a50; --connected-dot: #0a9157; --violet: #574aa8; --focus-ring: #1059D6; --accent-ink: #0c2233; --wf-danger: #b3372f; --critical-text: #a02c24; --critical-text-hover: #8c241d; --critical-text-strong: #a02c24; --critical-text-strong-hover: #8c241d; --critical-border-strong: rgba(179,55,47,.65); --good-text: #1e6b45; --good-soft: rgba(37,122,80,.12); --good-border: rgba(37,122,80,.5); --violet-text: #574aa8; --violet-text-soft: #574aa8; --violet-soft: rgba(99,83,184,.10); --violet-border: rgba(99,83,184,.5); --info-text: #155a81; --info-soft: rgba(21,90,129,.12); --info-border: rgba(21,90,129,.45); --neutral-soft: rgba(16,42,77,.06); --on-brand: #ffffff; --on-critical: #ffffff; --overlay: rgba(15,23,42,.45); --shadow-pop: 0 12px 32px rgba(15,30,60,.22); --shadow-dialog: 0 20px 60px rgba(15,30,60,.25); --shadow-tip: 0 8px 24px rgba(15,30,60,.2); }