/* ===== CPC — black & yellow instrument theme ==============================
An engineering instrument, not a dashboard. Three rules hold the design
together; break one and it stops being a system:
1. YELLOW IS THE ONLY ACCENT. Every interactive affordance, focus ring and
primary readout is --accent. Nothing else in the UI may introduce a new
hue to mean "important" — if something needs emphasis, it gets weight,
size or position, not a new colour.
2. DATA SURFACES ARE OPAQUE. Cards, tables, popups and modal bodies use the
--canvas/--panel/--panel-2/--raised ramp, so text contrast is a FIXED,
stated number. Glass (--glass-*) survives only on chrome the eye passes
over — the sticky header and the modal scrim — where nothing is read
through it. The previous theme floated translucent panels over a photo,
which made every contrast ratio a function of the pixels behind it.
3. HUE ONLY ENCODES CATEGORY. The seven category tokens are generated in
OKLCH at ONE lightness (.78) and ONE chroma (.085), varying only in hue,
so no category shouts and none disappears (1.08x luminance spread).
State (--pass/--warn/--err) carries HIGHER chroma so a failure always
outranks a category tint. Never hand-pick a category colour by eye —
regenerate it, or the set loses the property that makes it fair.
Every colour below clears WCAG AA (4.5:1) against --raised, the LIGHTEST
surface text ever sits on — not merely against --panel. Checking against the
panel alone is how the old palette shipped 3.4:1 badges and a 2.1:1 grey.
Density stays deliberately compact, but the type FLOOR is --t-micro (11px):
the old 8.5-10px text was the legibility problem, not the density.
Solid fallbacks live in the @supports block at the end of the file. */
:root {
/* ---- surfaces: opaque, deterministic contrast ---- */
--bg: #090a0e; /* page canvas, behind everything */
--canvas: #090a0e;
--panel: #15171b; /* cards — the main data surface */
--panel-2: #202328; /* nested surface, table stripe, chips */
--raised: #2b2e34; /* inputs, hover, sticky table head */
--solid: #202328; /* legacy name: anything that must stay opaque */
--line: #3b3e45; /* borders */
--glass-brd: #3b3e45;
/* ---- ink ramp ---- */
--ink: #f6f7f8; /* 12.69:1 on --raised */
--ink-2: #bcbec2; /* 7.31:1 — secondary text, labels */
--muted: #979a9f; /* 4.82:1 — units, hints (AA at the 11px floor) */
--faint: #75777c; /* 3.04:1 — DISABLED STATE ONLY, never real text */
/* ---- brand: the only accent ---- */
--accent: #facc15; /* 8.89:1 — primary / confirm / focus */
--accent-2: #f9e03f; /* hover-bright */
--accent-dim:#a38b23; /* quiet accent borders, tick rules */
--accent-ink:#141207; /* text on a filled accent button — 12.25:1 */
--neutral: #a3b3c4; /* secondary / utility buttons */
/* ---- categories: OKLCH L.78 C.085, hue only (see rule 3) ---- */
--hover: #8ebcec; /* multicopter / hover 250° */
--cruise: #90c79b; /* forward flight 150° */
--hybrid: #bfabe6; /* tilt / hybrid 300° */
--battery: #72c7d5; /* energy: battery 210° */
--tank: #e2a983; /* energy: fuel tank 55° */
--electric: #7acab4; /* motor: electric 175° */
--engine: #e9a29c; /* motor: engine 25° */
/* ---- state: higher chroma than any category ---- */
--pass: #7bd77f; --pass-bg: #223d23;
--warn: #ffa746; --warn-bg: #492f14;
--err: #fe626c; --err-bg: #4b2224;
/* ---- type: 6 steps, 11px floor. NO ad-hoc px sizes. ---- */
--t-micro: 11px; /* labels, units, badges — the floor */
--t-small: 12px; /* table cells, secondary text */
--t-body: 13px; /* base */
--t-lead: 15px; /* card / panel titles */
--t-head: 18px; /* section heads */
--t-hero: 34px; /* the single big readout (torque) */
/* ---- font roles: Segoe = the interface speaking, mono = a MEASURED value.
Both ship with Windows/macOS, so nothing loads from a CDN (the app is
CSP-restricted — see SECURITY.md). ---- */
--ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto,
Helvetica, Arial, sans-serif;
--data: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
/* ---- space / radius / motion ---- */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
/* Radius scale by ROLE, not by taste: --r1 small (badges, chips, tiny
buttons) · --r2 controls (inputs, dropdowns, buttons — they sit next to
each other, so they must match) · --r3 panels (cards, modals) · --r-pill
fully round. There were 9 different radii before this. */
--r1: 5px; --r2: 8px; --r3: 10px; --r-pill: 999px;
/* ONE height for every control that can share a row. An input at 26px beside
a 28px dropdown beside a ~29px button reads as sloppy at a glance even when
nothing is technically broken — and that mismatch is what "the fields look
misaligned" usually means. Buttons/inputs get min-height (they must grow
with content); the dropdown's react-select markup needs a fixed height. */
--ctl-h: 28px;
--dur: .15s;
--shadow: 0 10px 30px rgba(0, 0, 0, .5);
/* ---- glass: CHROME ONLY (header, modal scrim). Not for data surfaces. ---- */
--glass-bg: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
rgba(18, 18, 24, .72);
--glass-blur: blur(18px) saturate(140%);
--glass-edge: inset 0 1px 0 rgba(255,255,255,.07);
}
/* ===== form controls on this Dash build =====
dcc.Input renders a BARE `` (no wrapper), the
Dropdown is react-select v1 (`.Select-*` classes inside `.dash-dropdown`),
and dcc.Textarea is a classless `