/* * Design tokens — the single source of truth for color/spacing/type across * the whole site. Server-rendered pages (site.css, templates/*.html) and the * React dashboard island (frontend/src/styles.css) both reference these * custom properties rather than hardcoding values, so the two stay visually * consistent without being the same codebase. * * To add a theme: add another selector block overriding the same variable * names, e.g. * * :root[data-theme="dark"] { --color-bg: #0f172a; --color-text: #f1f5f9; ... } * * and something that sets data-theme on (a toggle, a stored * preference, prefers-color-scheme). Nothing else in the codebase needs to * change — every rule already reads through these names. No second theme * exists yet; this is just the structure for one. */ :root { --color-bg: #f8fafc; --color-surface: #ffffff; --color-border: #e2e8f0; --color-text: #0f172a; --color-text-muted: #64748b; --color-muted: #94a3b8; --color-primary: #2563eb; --color-primary-text: #ffffff; --color-success: #16a34a; --color-danger: #dc2626; --color-warning: #d97706; --font-family: system-ui, -apple-system, "Segoe UI", sans-serif; --font-size-sm: 0.85rem; --font-size-base: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 1.75rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --radius-sm: 4px; --radius: 8px; /* Chart marks (fleet overview / overview sparklines) — series colors * validated for contrast + CVD separation against --color-surface in both * themes; grid/axis are one step off the surface, per-theme. */ --chart-line: #2563eb; --chart-bad: #dc2626; --chart-grid: #eef2f7; --chart-axis: #cbd5e1; } :root[data-theme="dark"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-border: #334155; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-muted: #64748b; --color-primary: #3b82f6; --color-primary-text: #ffffff; --color-success: #22c55e; --color-danger: #ef4444; --color-warning: #f59e0b; --chart-line: #3b82f6; --chart-bad: #ef4444; --chart-grid: #263349; --chart-axis: #3e4c63; }