/* ════════════════════════════════════════════════════════════════════
Delayer design tokens — THE single source of truth for every color.
Canonical file — lives at ui/_shared/. Mirrored into ui/frontend/src/_shared/ and
ui/system-portal/src/_shared/ by scripts/ci/sync_shared.sh (CI gates
drift). Both SPAs it BEFORE their own stylesheet, so either can
override a token by re-declaring it at matching specificity.
Brand palette (coolors.co/000814-001d3d-003566-ffc300-ffd60a):
#000814 rich black · #001d3d oxford blue · #003566 yale blue
#ffc300 mikado yellow · #ffd60a gold
── Why the surfaces are not the raw brand navies ────────────────────
sRGB luminance weights are R 21% · G 72% · B 7%. The raw palette navies
are pure-blue (#001428 is rgb(0,20,40) — literally zero red, zero-ish
green), so stepping them ramps the channel that carries 7% of perceived
lightness. #000814 -> #001428 looks like a big hex jump and buys only
dL* 3.9 — the cards stop lifting off the page and the UI reads flat.
So: surfaces hold the brand HUE (213°) at ~35-40% saturation, and let
green carry the ramp. Same navy character, real luminance steps. The
raw palette survives untouched where it belongs — accent, CTA, focus.
── Invariants (a change that breaks one of these is a bug) ──────────
I1 Every surface step is >= 4.0 dL* (panels visibly lift)
I2 --border is LIGHTER than every surface (edges survive on a
selected row — the old --border sat 1.3 dL* above --panel-3,
so borders vanished exactly where focus mattered most)
I3 --text / --muted / --dim all clear WCAG 4.5:1 on EVERY surface
they can land on, including --panel-3 (worst pair: dim on
panel-3 = 4.55 dark, 5.04 light)
I4 Never put --text on a saturated fill — use --on-fill
I5 Status colors encode compliance semantics, not brand. Don't
retune them for taste: a "pass" that reads amber is a bug.
:root -> dark tokens (default)
:root[data-theme="light"] -> light tokens
@media (prefers-color-scheme: light), no data-theme -> light
The data-theme attribute (stamped by ui/_shared/theme.js) always beats
the media query, in both directions.
════════════════════════════════════════════════════════════════════ */
:root {
/* Raw brand ramp — accents + marketing only. NOT surfaces (see above). */
--brand-black: #000814;
--brand-navy: #001d3d;
--brand-blue: #003566;
--brand-gold: #ffc300;
--brand-gold-hi: #ffd60a;
/* Surfaces — brand hue 213°, desaturated so luminance can actually step */
--bg: #000814; /* page — the brand rich black, kept exactly */
--panel: #111b28; /* cards, drawers, menus L* 9.5 (+7.4) */
--panel-2: #182434; /* nested / hover L* 13.8 (+4.4) */
--panel-3: #1e2d40; /* active / selected L* 18.0 (+4.2) */
--overlay: rgba(0, 8, 20, 0.72);
/* Lines — I2: strictly above every surface */
--border: #2b3d53; /* L* 25.2 (+7.2 over panel-3) */
--border-mid: #3d5470; /* L* 35.0 — emphasis */
/* Type — I3: all three clear 4.5:1 on panel-3 */
--text: #e9eef5; /* L* 93.9 */
--muted: #a7b2bf; /* L* 72.1 */
--dim: #8495a9; /* L* 61.0 — the floor; do not darken */
/* Washes — translucent overlays that must work in BOTH themes.
A raw rgba(255,255,255,.05) is invisible on a white panel: that is
how every hover state and every progress-bar gutter silently died in
light mode. These flip polarity with the theme.
--lift hover / raised row
--lift-2 stronger hover
--track progress-bar gutter (must stay visible at 0% fill)
--inset recessed block: in a banner, expanded audit JSON */
--lift: rgba(255, 255, 255, 0.045);
--lift-2: rgba(255, 255, 255, 0.075);
--track: rgba(255, 255, 255, 0.10);
--inset: rgba(0, 0, 0, 0.28);
--shadow: rgba(0, 0, 0, 0.45);
/* Accent — links, focus, active nav */
--accent: #ffc300;
--accent-hi: #ffd60a;
--accent-fg: #000814; /* text ON an accent fill */
--accent-a04: rgba(255, 195, 0, 0.05);
--accent-a10: rgba(255, 195, 0, 0.11);
--accent-a16: rgba(255, 195, 0, 0.18);
--accent-a35: rgba(255, 195, 0, 0.38);
/* Primary CTA — gold fill in BOTH themes (the brand anchor, ~11:1) */
--cta: #ffc300;
--cta-hi: #ffd60a;
--cta-fg: #000814;
/* I4: text placed ON any saturated fill (accent/status chip, avatar).
Dark-theme fills are LIGHT (gold, mint, salmon) -> near-black text.
Light-theme fills are DARK (navy, forest, maroon) -> white text. */
--on-fill: #000814;
/* Status — I5. Exact pre-rebrand dark values. */
--ok: #6ee7a8;
--ok-2: #22c55e;
--ok-bg: rgba(110, 231, 168, 0.16);
--ok-border: rgba(110, 231, 168, 0.35);
--danger: #ff7a7a;
--danger-2: #ff9a9a;
--danger-3: #ef4444;
--danger-bg: rgba(255, 122, 122, 0.18);
--danger-border: rgba(255, 122, 122, 0.38);
--warn: #f6c76a;
--warn-2: #ffaa55;
--warn-3: #f59e0b;
--warn-bg: rgba(246, 199, 106, 0.16);
--warn-border: rgba(246, 199, 106, 0.35);
--info: #6aaaff;
--info-bg: rgba(106, 170, 255, 0.14);
--info-border: rgba(106, 170, 255, 0.32);
--neutral: #94a3b8;
--neutral-bg: rgba(148, 163, 184, 0.15);
--neutral-border: rgba(148, 163, 184, 0.25);
}
/* ── Light theme ─────────────────────────────────────────────────────── */
:root[data-theme="light"] {
/* The ramp runs the OTHER WAY here: --panel (white) is the peak, and both
the page and the nested surfaces sit below it. --panel-2 is a hover
*inside* a white card, so its neighbour is always --panel, never --bg;
the two are allowed to land near each other. */
--bg: #eef2f6; /* L* 95.3 — the page, so a white card lifts 4.7 */
--panel: #ffffff; /* L* 100 */
--panel-2: #e8edf3; /* L* 93.5 */
--panel-3: #d9e2ec; /* L* 89.5 */
--overlay: rgba(0, 8, 20, 0.45);
--border: #c6d1e0; /* L* 83.4 — 6.05 below panel-3 (I2) */
--border-mid: #a0b2c9;
--text: #000814;
--muted: #38506c;
--dim: #4d6582; /* the floor: 4.58:1 on panel-3, 6.00:1 on white */
--lift: rgba(0, 53, 102, 0.045);
--lift-2: rgba(0, 53, 102, 0.075);
--track: rgba(0, 53, 102, 0.12);
--inset: rgba(0, 53, 102, 0.07);
--shadow: rgba(0, 21, 51, 0.16);
--accent: #003566; /* gold on white is ~1.6:1 — unusable as ink */
--accent-hi: #001d3d;
--accent-fg: #ffffff;
--accent-a04: rgba(0, 53, 102, 0.05);
--accent-a10: rgba(0, 53, 102, 0.09);
--accent-a16: rgba(0, 53, 102, 0.14);
--accent-a35: rgba(0, 53, 102, 0.32);
--cta: #ffc300; /* brand anchor: #000814 on #ffc300 is ~11:1 */
--cta-hi: #ffd60a;
--cta-fg: #000814;
--on-fill: #ffffff; /* light-theme fills are dark -> white text */
--ok: #067647;
--ok-2: #059142;
--ok-bg: rgba(6, 118, 71, 0.10);
--ok-border: rgba(6, 118, 71, 0.28);
--danger: #b42318;
--danger-2: #d64a41;
--danger-3: #b42318;
--danger-bg: rgba(180, 35, 24, 0.09);
--danger-border: rgba(180, 35, 24, 0.26);
--warn: #b54708;
--warn-2: #c2620c;
--warn-3: #b54708;
--warn-bg: rgba(181, 71, 8, 0.10);
--warn-border: rgba(181, 71, 8, 0.26);
--info: #175cd3;
--info-bg: rgba(23, 92, 211, 0.09);
--info-border: rgba(23, 92, 211, 0.26);
--neutral: #52708f;
--neutral-bg: rgba(82, 112, 143, 0.10);
--neutral-border: rgba(82, 112, 143, 0.24);
}
/* OS preference — applies only until the user makes an explicit choice.
Kept byte-identical to the block above; if you edit one, edit both. */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--bg: #eef2f6; --panel: #ffffff; --panel-2: #e8edf3;
--panel-3: #d9e2ec; --overlay: rgba(0, 8, 20, 0.45);
--border: #c6d1e0; --border-mid: #a0b2c9;
--text: #000814; --muted: #38506c; --dim: #4d6582;
--lift: rgba(0, 53, 102, 0.045);
--lift-2: rgba(0, 53, 102, 0.075);
--track: rgba(0, 53, 102, 0.12);
--inset: rgba(0, 53, 102, 0.07);
--shadow: rgba(0, 21, 51, 0.16);
--accent: #003566; --accent-hi: #001d3d; --accent-fg: #ffffff;
--on-fill: #ffffff;
--accent-a04: rgba(0, 53, 102, 0.05);
--accent-a10: rgba(0, 53, 102, 0.09);
--accent-a16: rgba(0, 53, 102, 0.14);
--accent-a35: rgba(0, 53, 102, 0.32);
--ok: #067647; --ok-2: #059142;
--ok-bg: rgba(6, 118, 71, 0.10); --ok-border: rgba(6, 118, 71, 0.28);
--danger: #b42318; --danger-2: #d64a41; --danger-3: #b42318;
--danger-bg: rgba(180, 35, 24, 0.09); --danger-border: rgba(180, 35, 24, 0.26);
--warn: #b54708; --warn-2: #c2620c; --warn-3: #b54708;
--warn-bg: rgba(181, 71, 8, 0.10); --warn-border: rgba(181, 71, 8, 0.26);
--info: #175cd3;
--info-bg: rgba(23, 92, 211, 0.09); --info-border: rgba(23, 92, 211, 0.26);
--neutral: #52708f;
--neutral-bg: rgba(82, 112, 143, 0.10);
--neutral-border: rgba(82, 112, 143, 0.24);
}
}