/* * The single source of color, space, radius, type, motion and layout. * No other file in this project contains a hex literal — tests/Design/TokenUsageTest.php * enforces that. * * Contrast, measured against WCAG 2.1 (see tests/Design/ContrastTest.php): * --text 17.85 on --bg --text-secondary 7.74 on --bg * --text-muted 5.28 on --bg --accent-cyan 8.09 on --bg * --accent-violet-text 7.22 on --bg --state-success 8.62 on --bg * * #8B5CF6 measures 4.23:1 as text on --surface and behind white button text. * It is therefore a SURFACE, BORDER and GLOW color only. Violet text uses * --accent-violet-text; the primary button fills with --accent-violet-strong. * #6B7280 measures 4.06:1 and is banned outright (§16.9). */ /* Operator clean-up §4.9: the bundled fonts, declared where every page loads them. Until 2026-09-30 only styleguide.php declared them, so the app fell back to system fonts on any machine without Inter installed. */ @font-face { font-family: "Inter"; src: url('../fonts/inter-latin-var.woff2') format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url('../fonts/jetbrains-mono-latin-400.woff2') format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url('../fonts/jetbrains-mono-latin-500.woff2') format("woff2"); font-weight: 500; font-display: swap; } :root { color-scheme: dark; /* Ground and surfaces */ --bg: #0B0B0F; --bg-sidebar: #0E0E14; --surface: #14141E; --surface-raised: #161622; --surface-inset: #101018; /* Borders */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --border-violet: rgba(139, 92, 246, 0.45); /* Text */ --text: #F3F4F6; --text-secondary: #9CA3AF; --text-muted: #7D8593; --on-accent: #FFFFFF; /* Accents — violet is surface/border/glow, never text */ --accent-violet: #8B5CF6; --accent-violet-text: #A78BFA; --accent-violet-strong: #7C3AED; --accent-cyan: #06B6D4; /* State ramp — operational state only (§16.4) */ --state-success: #22C55E; --state-warn: #F59E0B; --state-error: #DC2626; --state-error-text: #F87171; /* Badge fills. Solid, not alpha, so contrast is computable and testable. */ --tint-violet: #1E1733; --tint-cyan: #0C2530; --tint-success: #10251A; --tint-warn: #2A2010; --tint-error: #2A1416; --tint-neutral: #1A1A22; /* Glow and shadow */ --glow-violet: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 0 24px rgba(139, 92, 246, 0.12); --glow-cyan: 0 0 0 1px rgba(6, 182, 212, 0.35), 0 0 24px rgba(6, 182, 212, 0.12); --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.45); --focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.35); --mask-fade: rgba(0, 0, 0, 0.55); /* Space */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; /* Radius */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; /* Type */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-lg: 1.0625rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --leading-tight: 1.25; --leading-normal: 1.55; --tracking-label: 0.06em; /* Motion (§16.5) */ --duration: 0.2s; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Layout */ --sidebar-width: 264px; --workspace-padding: var(--space-8); --panel-padding: var(--space-6); /* * Chart series (Phase C3 §16.7): two full palettes, selected explicitly by * Capex\View\Chart\ChartPalette rather than by the print media query above * — screen and print SVGs are composed by separate render paths (§8), so * the choice is made once at render time, not left to redefine under that * query the way --bg and --text do. Series order, line style and marker * shape are identical in both; only these colours differ. */ --chart-screen-1: #22D3EE; --chart-screen-2: #A78BFA; --chart-screen-3: #FBBF24; --chart-screen-4: #34D399; --chart-screen-5: #F472B6; --chart-print-1: #1A7F37; --chart-print-2: #3B3B3B; --chart-print-3: #8A5A00; --chart-print-4: #0B5394; --chart-print-5: #7B1E3A; /* Operator clean-up §4.7: cost-category colours for the stacked bar chart, deliberately outside the five per-engine series hues above, so one colour never means an engine on one chart and a cost on the next. */ --chart-stream-1: #94A3B8; /* fuel */ --chart-stream-2: #64748B; /* lube oil */ --chart-stream-3: #F97316; /* maintenance parts */ --chart-stream-4: #EF4444; /* maintenance labor */ --chart-stream-5: #3B82F6; /* repairs allowance */ --chart-stream-6: #A16207; /* crew */ --chart-stream-print-1: #9CA3AF; --chart-stream-print-2: #6B7280; --chart-stream-print-3: #B45309; --chart-stream-print-4: #7F1D1D; --chart-stream-print-5: #1E3A8A; --chart-stream-print-6: #374151; } /* * Print theme (§16.7). print.css itself is a Phase D deliverable; the tokens * it will drive are declared here so both themes have one source. Glass, blur, * glow and grid do not survive into print — the tokens that carry them go flat. */ @media print { :root { --bg: #FFFFFF; --bg-sidebar: #FFFFFF; --surface: #FFFFFF; --surface-raised: #FFFFFF; --surface-inset: #FFFFFF; --border: #B0B4BC; --border-strong: #6E7480; --border-violet: #6E7480; --text: #000000; --text-secondary: #333940; --text-muted: #4A5058; --on-accent: #FFFFFF; --tint-violet: #FFFFFF; --tint-cyan: #FFFFFF; --tint-success: #FFFFFF; --tint-warn: #FFFFFF; --tint-error: #FFFFFF; --tint-neutral: #FFFFFF; --glow-violet: none; --glow-cyan: none; --shadow-panel: none; --shadow-lift: none; --focus-ring: none; /* Phase D. The charts emit var(--chart-screen-N); a browser resolves a custom property inside an SVG presentation attribute, proved by measurement against production in the C3 screen gate. Without these five lines a print puts the bright screen palette on white paper. Aliased to the print palette declared above rather than copied as hex, so the two can never drift apart. */ --chart-screen-1: var(--chart-print-1); --chart-screen-2: var(--chart-print-2); --chart-screen-3: var(--chart-print-3); --chart-screen-4: var(--chart-print-4); --chart-screen-5: var(--chart-print-5); --chart-stream-1: var(--chart-stream-print-1); --chart-stream-2: var(--chart-stream-print-2); --chart-stream-3: var(--chart-stream-print-3); --chart-stream-4: var(--chart-stream-print-4); --chart-stream-5: var(--chart-stream-print-5); --chart-stream-6: var(--chart-stream-print-6); } }