/* ============================================================================ ProDAQ design tokens — SINGLE SOURCE OF TRUTH for color. docs/16 §4 (color architecture) + §2/§3 (scale, radius, type). Layer 1 PALETTE (theme-editable) --p-* Layer 2 SEMANTIC (theme-mapped) --c-* <- components consume ONLY these Layer 3 STATUS (LOCKED, not themeable) --s-* Two Layer-2 tokens name a place rather than a depth: --c-rail-bg (navigation rail) and --c-topbar-bg (app header). They exist so those two chrome surfaces can be coloured independently of the cards and table heads that share --c-surface / --c-surface-raised. The CI guard (build/check-no-raw-hex.ps1) forbids raw hex anywhere EXCEPT this file and fonts.css. Never hard-code a color in a component. ============================================================================ */ /* ---- Shared non-color scale (theme-independent) ------------------------- */ :root { /* Type stacks (docs/16 §3) */ --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Archivo', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Spacing unit + scale (docs/16 §2) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; /* Radius (docs/16 §2: 6px cards/inputs, 4px buttons/chips, 0 tables/docs). A custom theme may override the first two per docs/16 §9.1.2; --radius-flat never moves, because tables and the PDF viewer are square by design, not by preference. */ --radius-card: 6px; --radius-control: 4px; --radius-flat: 0; /* Density (docs/16 §2 compact default; §9.1.2 lets a custom theme choose comfortable) */ --row-height: 40px; --cell-pad-y: var(--sp-2); /* Focus ring */ --focus-width: 2px; --focus-offset: 2px; /* Motion (docs/16 §7) */ --motion-fast: 120ms; --motion-base: 200ms; --motion-page: 300ms; --motion-ease: cubic-bezier(0.2, 0, 0, 1); /* ---- Layer 3 STATUS — LOCKED (docs/16 §4). Never remapped by a theme. --- */ --s-normal: #2E7D4F; /* green — within acceptance band */ --s-alert: #B8860B; /* amber — outside alert band */ --s-alarm: #C62828; /* red — outside alarm band / excursion */ --s-offline: #6B7280; /* grey — stale / no data */ --s-info: #1D5B8C; /* blue — neutral notice */ /* ---- Chart paper ink — deliberately theme-independent (docs/16 §5.2) ---- The trend chart paints its own white paper so the picture is identical on screen, in the dark theme, and in the PDF it exports to. Its overlay ink (crosshair, drag-marquee) therefore cannot follow --c-text: that goes near-white under a dark theme and vanishes against the paper. */ --c-chart-ink: #1A1D21; /* ---- Sign-in panel ink — deliberately theme-independent, exactly as the chart paper above is, and for the same shape of reason (docs/16 §6). The auth panel is a photograph under a FIXED dark scrim (auth.css .auth-hero-scrim). That surface is not a themed one: it does not lighten under Ledger or darken under Night Shift, it is the same gradient on all four presets. So its ink cannot follow --c-text — that token is near-black under every light preset and would vanish into the scrim. This pairing is what keeps the §8 floor of 4.5:1 on a screen that carries light-on-dark text. The earlier attempt themed BOTH sides — panel painted --c-primary, text --c-primary-ink — and measured 3.47:1 in Night Shift and 4.21:1 in Ledger dark, failing AA on two shipped presets. Holding the scrim and the ink both constant is what fixed it. Do not re-theme either one. Measured where the TEXT actually sits, not where the scrim is thinnest. Nothing is set in the top band: the mark up there rides its own light plate and takes no contrast from the scrim at all. The headline and its sentence start at the 0.72 stop, and the worst ground they can be given is a photograph that is pure white behind them, which composites to a 28-percent grey. Against that, --c-hero-ink measures 8.8:1 and --c-hero-ink-muted 6.8:1; both improve from there to the 0.90 stop at the foot of the panel. So both clear AA against any photograph a site can upload. */ --c-hero-ink: #FFFFFF; --c-hero-ink-muted: #DCE2E9; /* ---- Layer 2 SAFETY NET ------------------------------------------------- Every colour below is redefined by whichever theme block matches, and by a custom theme's generated sheet — all of which outrank a bare :root. These exist so that an unmatched data-theme still renders something readable. Without them the failure is total rather than graceful: a custom theme whose generated sheet does not load (gated endpoint, stale version in the URL, theme deleted) leaves every --c-* undefined, and the page renders as black text on white with transparent buttons. That is exactly what /login did while the theme stylesheet required authentication. Ledger's light values, because it is the shipped default. */ --c-bg: #FAF9F6; --c-surface: #F3F1EC; --c-surface-raised: #FFFFFF; --c-border: #DDD8CE; --c-text: #1A1D21; --c-text-muted: #5B6169; --c-primary: #0F5257; --c-primary-ink: #FFFFFF; --c-focus: #14666C; --c-selection: #E4EEEE; --c-chart-grid: #C9D2D6; --c-chart-trace-1: #0F5257; --c-chart-trace-2: #8C5A2B; --c-chart-trace-3: #3A5FA0; --c-chart-trace-4: #7A4E8C; --c-chart-trace-5: #2E7D4F; --c-chart-trace-6: #A23B3B; --c-chart-trace-7: #556B2F; --c-chart-trace-8: #1D5B8C; /* --c-rail-bg and --c-topbar-bg are DELIBERATELY absent from this safety net. They arrived after custom themes were already being published, so a theme saved before them carries no value for either. Defining Ledger's here would make that theme's generated sheet lose to a *bare* :root it cannot override — a dark custom theme would get a near-white rail. Instead shell.css asks for them as var(--c-rail-bg, var(--c-surface)), so an older theme falls back to its OWN surface, and an unmatched data-theme still lands on the values above. */ --elev-raised: 0 1px 2px rgba(20, 23, 26, 0.08); --elev-overlay: 0 8px 24px rgba(20, 23, 26, 0.18); } /* ========================================================================= */ /* THEME: Ledger (default light) — warm paper, ink text, deep teal. */ /* docs/16 §4 shipped presets. */ /* ========================================================================= */ :root[data-theme="ledger"], :root[data-theme="ledger"][data-mode="light"] { /* Layer 1 palette */ --p-brand-600: #0F5257; --p-brand-500: #14666C; --p-brand-ink: #FFFFFF; --p-surface-0: #FAF9F6; /* warm paper white, not pure white */ --p-surface-1: #F3F1EC; --p-surface-2: #FFFFFF; --p-ink: #1A1D21; --p-ink-muted: #5B6169; --p-line: #DDD8CE; --p-grid: #C9D2D6; /* graph-paper grey-blue */ /* Layer 2 semantic */ --c-bg: var(--p-surface-0); --c-surface: var(--p-surface-1); --c-surface-raised: var(--p-surface-2); --c-rail-bg: #ECE9E1; /* a step deeper than --c-surface, so the rail reads as its own plane */ --c-topbar-bg: var(--p-surface-2); --c-border: var(--p-line); --c-text: var(--p-ink); --c-text-muted: var(--p-ink-muted); --c-primary: var(--p-brand-600); --c-primary-ink: var(--p-brand-ink); --c-focus: var(--p-brand-500); --c-selection: #E4EEEE; --c-chart-grid: var(--p-grid); --c-chart-trace-1: #0F5257; --c-chart-trace-2: #8C5A2B; --c-chart-trace-3: #3A5FA0; --c-chart-trace-4: #7A4E8C; --c-chart-trace-5: #2E7D4F; --c-chart-trace-6: #A23B3B; --c-chart-trace-7: #556B2F; --c-chart-trace-8: #1D5B8C; --elev-raised: 0 1px 2px rgba(20, 23, 26, 0.08); --elev-overlay: 0 8px 24px rgba(20, 23, 26, 0.18); } /* Ledger — dark mode variant (duality, docs/16 §9.2) */ :root[data-theme="ledger"][data-mode="dark"] { --p-brand-600: #2A8C90; --p-brand-500: #237277; --p-brand-ink: #08211F; --p-surface-0: #16181A; --p-surface-1: #1E2124; --p-surface-2: #262A2E; --p-ink: #ECE9E1; --p-ink-muted: #9AA1A8; --p-line: #34383C; --p-grid: #33474B; --c-bg: var(--p-surface-0); --c-surface: var(--p-surface-1); --c-surface-raised: var(--p-surface-2); --c-rail-bg: #191C1F; /* a step under --c-surface: on dark the rail recedes rather than lifts */ --c-topbar-bg: var(--p-surface-2); --c-border: var(--p-line); --c-text: var(--p-ink); --c-text-muted: var(--p-ink-muted); --c-primary: var(--p-brand-600); --c-primary-ink: var(--p-brand-ink); --c-focus: var(--p-brand-500); --c-selection: #23383A; --c-chart-grid: var(--p-grid); --c-chart-trace-1: #2FB3B8; --c-chart-trace-2: #C68A4E; --c-chart-trace-3: #7CA0E0; --c-chart-trace-4: #B48AC6; --c-chart-trace-5: #5FB985; --c-chart-trace-6: #E07A7A; --c-chart-trace-7: #A6C06B; --c-chart-trace-8: #6FA8D6; --elev-raised: 0 1px 2px rgba(0, 0, 0, 0.5); --elev-overlay: 0 8px 24px rgba(0, 0, 0, 0.6); } /* ========================================================================= */ /* THEME: Night Shift (default dark) — charcoal, off-white, desaturated teal. */ /* ========================================================================= */ :root[data-theme="night-shift"], :root[data-theme="night-shift"][data-mode="dark"] { --p-brand-600: #2C7A7F; --p-brand-500: #246468; --p-brand-ink: #061E1D; --p-surface-0: #14171A; /* charcoal */ --p-surface-1: #1C2024; --p-surface-2: #23282D; --p-ink: #E7E4DC; /* soft off-white */ --p-ink-muted: #949AA1; --p-line: #313640; --p-grid: #2E3A44; --c-bg: var(--p-surface-0); --c-surface: var(--p-surface-1); --c-surface-raised: var(--p-surface-2); --c-rail-bg: #171B1E; /* a step under --c-surface: on dark the rail recedes rather than lifts */ --c-topbar-bg: var(--p-surface-2); --c-border: var(--p-line); --c-text: var(--p-ink); --c-text-muted: var(--p-ink-muted); --c-primary: var(--p-brand-600); --c-primary-ink: var(--p-brand-ink); --c-focus: var(--p-brand-500); --c-selection: #1F3336; --c-chart-grid: var(--p-grid); --c-chart-trace-1: #35B0B6; --c-chart-trace-2: #C98F52; --c-chart-trace-3: #7FA3E3; --c-chart-trace-4: #B58FC8; --c-chart-trace-5: #63BC88; --c-chart-trace-6: #E17E7E; --c-chart-trace-7: #AAC46F; --c-chart-trace-8: #72ABD9; --elev-raised: 0 1px 2px rgba(0, 0, 0, 0.55); --elev-overlay: 0 8px 24px rgba(0, 0, 0, 0.65); } /* ========================================================================= */ /* THEME: Slate (light) — cool neutral grey, corporate blue primary. */ /* ========================================================================= */ :root[data-theme="slate"], :root[data-theme="slate"][data-mode="light"] { --p-brand-600: #1D4E89; --p-brand-500: #24609F; --p-brand-ink: #FFFFFF; --p-surface-0: #F4F6F8; --p-surface-1: #EAEEF2; --p-surface-2: #FFFFFF; --p-ink: #1B2733; --p-ink-muted: #5A6673; --p-line: #D2DAE2; --p-grid: #C3CDD8; --c-bg: var(--p-surface-0); --c-surface: var(--p-surface-1); --c-surface-raised: var(--p-surface-2); --c-rail-bg: #E2E8EF; /* a step deeper than --c-surface, cooled toward the blue primary */ --c-topbar-bg: var(--p-surface-2); --c-border: var(--p-line); --c-text: var(--p-ink); --c-text-muted: var(--p-ink-muted); --c-primary: var(--p-brand-600); --c-primary-ink: var(--p-brand-ink); --c-focus: var(--p-brand-500); --c-selection: #DCE7F3; --c-chart-grid: var(--p-grid); --c-chart-trace-1: #1D4E89; --c-chart-trace-2: #8C5A2B; --c-chart-trace-3: #2E7D4F; --c-chart-trace-4: #7A4E8C; --c-chart-trace-5: #0F5257; --c-chart-trace-6: #A23B3B; --c-chart-trace-7: #556B2F; --c-chart-trace-8: #3A5FA0; --elev-raised: 0 1px 2px rgba(27, 39, 51, 0.10); --elev-overlay: 0 8px 24px rgba(27, 39, 51, 0.20); } /* ========================================================================= */ /* THEME: Graphite (dual) — neutral pencil greys, monochrome graphite primary.*/ /* Unlike Ledger (warm paper/teal) and Slate (cool grey/blue), Graphite has */ /* no colour cast at all: the only hues on screen are the Layer-3 status */ /* colours and the chart traces, so an alarm reads instantly. */ /* ========================================================================= */ :root[data-theme="graphite"], :root[data-theme="graphite"][data-mode="light"] { --p-brand-600: #37474F; --p-brand-500: #4E606B; --p-brand-ink: #FFFFFF; --p-surface-0: #F5F6F7; --p-surface-1: #E9EBED; --p-surface-2: #FFFFFF; --p-ink: #1C1F22; --p-ink-muted: #565C63; --p-line: #D3D7DB; --p-grid: #C2C7CD; --c-bg: var(--p-surface-0); --c-surface: var(--p-surface-1); --c-surface-raised: var(--p-surface-2); --c-rail-bg: #FFFFFF; /* pure white, so rail and topbar sit on the same flat chrome plane */ --c-topbar-bg: var(--c-rail-bg); --c-border: var(--p-line); --c-text: var(--p-ink); --c-text-muted: var(--p-ink-muted); --c-primary: var(--p-brand-600); --c-primary-ink: var(--p-brand-ink); --c-focus: var(--p-brand-500); --c-selection: #DCE1E5; --c-chart-grid: var(--p-grid); --c-chart-trace-1: #37474F; --c-chart-trace-2: #1D4E89; --c-chart-trace-3: #8C5A2B; --c-chart-trace-4: #2E7D4F; --c-chart-trace-5: #7A4E8C; --c-chart-trace-6: #A23B3B; --c-chart-trace-7: #0F5257; --c-chart-trace-8: #556B2F; --elev-raised: 0 1px 2px rgba(28, 31, 34, 0.10); --elev-overlay: 0 8px 24px rgba(28, 31, 34, 0.20); } /* Graphite — dark mode variant (duality, docs/16 §9.2) */ :root[data-theme="graphite"][data-mode="dark"] { --p-brand-600: #8FA3AE; --p-brand-500: #B0C0CA; --p-brand-ink: #10181C; --p-surface-0: #17191B; --p-surface-1: #1F2225; --p-surface-2: #282C30; --p-ink: #E8EAEC; --p-ink-muted: #9BA3AB; --p-line: #383C41; --p-grid: #3A444C; --c-bg: var(--p-surface-0); --c-surface: var(--p-surface-1); --c-surface-raised: var(--p-surface-2); --c-rail-bg: #1B1E20; /* a step under --c-surface: on dark the rail recedes rather than lifts */ --c-topbar-bg: var(--p-surface-2); --c-border: var(--p-line); --c-text: var(--p-ink); --c-text-muted: var(--p-ink-muted); --c-primary: var(--p-brand-600); --c-primary-ink: var(--p-brand-ink); --c-focus: var(--p-brand-500); --c-selection: #2B3439; --c-chart-grid: var(--p-grid); --c-chart-trace-1: #AFC0CB; --c-chart-trace-2: #7CA0E0; --c-chart-trace-3: #C68A4E; --c-chart-trace-4: #5FB985; --c-chart-trace-5: #B48AC6; --c-chart-trace-6: #E07A7A; --c-chart-trace-7: #2FB3B8; --c-chart-trace-8: #A6C06B; --elev-raised: 0 1px 2px rgba(0, 0, 0, 0.5); --elev-overlay: 0 8px 24px rgba(0, 0, 0, 0.6); } /* ========================================================================= */ /* THEME: High Contrast — AAA-targeted, stronger borders, larger focus. */ /* ========================================================================= */ :root[data-theme="high-contrast"], :root[data-theme="high-contrast"][data-mode="light"] { --p-brand-600: #0A3D62; --p-brand-500: #0A3D62; --p-brand-ink: #FFFFFF; --p-surface-0: #FFFFFF; --p-surface-1: #FFFFFF; --p-surface-2: #FFFFFF; --p-ink: #000000; --p-ink-muted: #26303A; --p-line: #000000; --p-grid: #4A5560; --c-bg: var(--p-surface-0); --c-surface: var(--p-surface-1); --c-surface-raised: var(--p-surface-2); --c-rail-bg: #FFFFFF; /* equal to the topbar on purpose: AAA wants pure white, and the black border is what separates them */ --c-topbar-bg: var(--p-surface-2); --c-border: var(--p-line); --c-text: var(--p-ink); --c-text-muted: var(--p-ink-muted); --c-primary: var(--p-brand-600); --c-primary-ink: var(--p-brand-ink); --c-focus: var(--p-brand-600); --c-selection: #D7E3F4; --c-chart-grid: var(--p-grid); --c-chart-trace-1: #0A3D62; --c-chart-trace-2: #7A3B00; --c-chart-trace-3: #1B5E20; --c-chart-trace-4: #4A148C; --c-chart-trace-5: #004D40; --c-chart-trace-6: #8B0000; --c-chart-trace-7: #33440A; --c-chart-trace-8: #0D3B66; --focus-width: 3px; --elev-raised: 0 0 0 1px #000000; --elev-overlay: 0 0 0 2px #000000; }