/* tokens.css — the design system's custom properties, and nothing else.
*
* Split out of style.css (#46) so a page can adopt the token set without
* also inheriting the base typography: style.css sets `html { font-size:
* 17px }`, which silently rescales every rem on a page that was designed
* at 16px. The public used-bikes shopfront is one such page.
*
* No element or class rules belong in here. Anything that paints rather
* than declares a value goes in style.css / layout.css / components.css.
*
* Link it FIRST, before the stylesheets that consume it:
*
*
*
* A CSS `@import` would not work here — assets.py fingerprints by rewriting
* href attributes in HTML, so an import inside a stylesheet never reaches
* the manifest and would be served unhashed.
*/
:root {
/* Surfaces */
--bg: #f8f7f6;
--bg-card: #ffffff;
--bg-input: #eeecea;
--bg-hover: #e4e2df;
--hover: #e4e2df; /* alias for legacy callers */
--bg-page: #f8f7f6; /* alias for legacy callers */
--surface-raised: #ffffff;
--border: #d0ccc8;
/* Text */
--text: #2e2a26; /* a step below --text-strong so headings and bold stand out */
--text-strong: #0f0d0b;
--text-muted: #6b6460;
/* Semantic colour tokens (solid) */
--accent: #4f8cff;
--accent-hover: #3a7aff;
--success: #117e39;
--warning: #a16207;
--danger: #c62828;
--info: #0ea5e9;
--purple: #8b5cf6;
--teal: #0d9488;
--orange: #f97316;
/* Tinted backgrounds (for soft badges & status pills) */
--accent-soft: rgba(79,140,255,0.10);
--success-soft: rgba(22,163,74,0.12);
--warning-soft: rgba(161,98,7,0.12);
--danger-soft: rgba(198,40,40,0.10);
--info-soft: rgba(14,165,233,0.12);
--purple-soft: rgba(139,92,246,0.12);
--teal-soft: rgba(13,148,136,0.12);
--orange-soft: rgba(249,115,22,0.12);
/* Shape & elevation */
--radius: 8px;
--radius-sm: 4px;
--radius-lg: 12px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 16px rgba(0,0,0,0.10);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.18);
/* Spacing scale (4-step) */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.5rem;
--sp-6: 2rem;
/* Chrome literals, promoted to tokens so the dark theme can move them.
Light values are exactly what layout.css / components.css hard-coded before. */
--sidebar-bg: #0f1117;
--sidebar-border: #1e2130;
--sidebar-link: rgba(255,255,255,0.52);
--sidebar-hover: rgba(255,255,255,0.07);
--nav-active-bg: rgba(79, 140, 255, 0.14);
--scrim: rgba(0,0,0,0.6);
--on-solid: #fff; /* label on a solid signal fill */
--radius-pill: 999px;
/* Badge / stat inks. These were dark hexes on pale tints, which is the one
thing that cannot survive a dark ground. green / olive / amber-2 were
darkened in #48 to clear 4.5:1 against the composited tint they actually
render on (not the bare card) — the rest are unchanged light values. */
--ink-blue: #1d4ed8;
--ink-blue-2: #2563eb;
--ink-green: #117e39;
--ink-olive: #507b00;
--ink-amber: #a16207;
--ink-amber-2: #a55a05;
--ink-orange: #c2410c;
--ink-red: #c62828;
--ink-red-2: #dc2626;
--ink-red-deep: #991b1b;
--ink-rose: #be123c;
--ink-violet: #7c3aed;
--ink-teal: #0f766e;
/* Paid cash / Paid card (#2007): an outline and a label per tender, on a
transparent button, so the two are told apart at a glance. Each label
clears 4.5:1 and each outline 3:1 on the page and on a card. */
--pay-cash-line: #15803d;
--pay-cash-text: #0f6b31;
--pay-card-line: #2563eb;
--pay-card-text: #1d4ed8;
--stat-warn-edge: #f59e0b;
--stat-danger-edge: #ef4444;
/* Layout */
--sidebar-w: 240px;
}
/* ══════════════════════════════════════════════════════════════════════════
DARK THEME
Set by data-theme="dark" on ; see the theme bootstrap in index.html.
Design notes live in the CDC Dashboard design system. Two things to know:
- The page takes the rail's own colour. A page a few percent off #0f1117
makes the rail look like a rendering fault, so the rail stops being a
separate surface and the accent left-border carries the nav instead.
- Elevation inverts: light says a card is whiter than the page, dark says
it is lighter. Shadow does almost nothing here, so surface-raised does
the work a shadow does in light.
══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
/* Surfaces */
--bg: #0f1117;
--bg-card: #1b1f2a;
--bg-input: #252a37;
--bg-hover: #2f3545;
--hover: #2f3545;
--bg-page: #0f1117;
--surface-raised: #232838;
--border: #383f4f;
/* Text */
--text: #cfd4de; /* a step below --text-strong so headings and bold stand out */
--text-strong: #ffffff;
--text-muted: #9ba3b4;
/* Semantic colour. accent, info and orange already clear 4.5:1 on this
ground and are left alone. success moves the least on purpose: a
brighter green would fail the label on a solid .toast-success. */
--accent-hover: #6e9fff;
--success: #2ea45c;
--warning: #e0a72e;
--danger: #e05252;
--purple: #a78bfa;
--teal: #14b8a6;
/* Tints carry more alpha — a 10% wash is invisible on a near-black page */
--accent-soft: rgba(79,140,255,0.18);
--success-soft: rgba(46,164,92,0.18);
--warning-soft: rgba(224,167,46,0.18);
--danger-soft: rgba(224,82,82,0.18);
--info-soft: rgba(14,165,233,0.18);
--purple-soft: rgba(167,139,250,0.18);
--teal-soft: rgba(20,184,166,0.18);
--orange-soft: rgba(249,115,22,0.18);
/* Chrome */
--sidebar-border: #2a2f3d;
--scrim: rgba(0,0,0,0.72);
--on-solid: #0f1117; /* ink, not white: the solid fills lighten */
/* Inks, relit for a dark ground */
--ink-blue: #93b4ff;
--ink-blue-2: #7aa5ff;
--ink-green: #4ade80;
--ink-olive: #a3c93a;
--ink-amber: #e0a72e;
--ink-amber-2: #f0b429;
--ink-orange: #fb923c;
--ink-red: #f08a8a;
--ink-red-2: #f87171;
--ink-red-deep: #fca5a5;
--ink-rose: #fb7185;
--ink-violet: #c4b5fd;
--ink-teal: #5eead4;
/* Pay buttons: a step brighter than the first mock-up (Neil, 1 Oct). */
--pay-cash-line: #45c97f;
--pay-cash-text: #86e0ad;
--pay-card-line: #5a95ee;
--pay-card-text: #a6c8fa;
--stat-warn-edge: #b4790c;
--stat-danger-edge: #b03c3c;
/* Elevation is weak on a near-black page; deepen it so a modal anchors */
--shadow-md: 0 4px 16px rgba(0,0,0,0.45);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
}