/* =========================================================================
RPM — DESIGN TOKENS (the skin)
-------------------------------------------------------------------------
This file is the entire theming surface. Every color, font, radius and
shadow used by the UI is defined here as a CSS custom property, once per
theme (dark is the default :root block, light overrides below it).
app.css (components/layout) references ONLY these variables — restyle the
whole product by editing this file; you should not need to touch app.css
unless you're changing structure/spacing of a specific component.
Quick recolor: change --brand-base in each theme block. Every brand-
derived tone (hover, glow, ring, gradients) recomputes via color-mix().
See DESIGN.md at the project root for the full guide.
========================================================================= */
:root {
color-scheme: dark;
/* ---- DARK (default) ---- */
--bg-0: #06080d; /* page background */
--bg-1: #0a0e16; /* topbar / cards */
--bg-2: #0d121c; /* subtle elevation */
--bg-3: #131a27; /* controls */
--bg-hover: #161e2c; /* row hover */
--bg-row-stripe: rgba(255, 255, 255, 0.012);
--line-faint: rgba(255, 255, 255, 0.045);
--line-soft: rgba(255, 255, 255, 0.08);
--line-strong: rgba(255, 255, 255, 0.14);
--fg-0: #ecf0f8; /* primary text */
--fg-1: #b9c2d2; /* secondary text */
--fg-2: #7d8699; /* muted text */
--fg-3: #525b6f; /* faint text */
--fg-mute: #3a4257; /* disabled / dashes */
/* Brand: change --brand-base, everything else recomputes via color-mix.
For a complete recolor, this is the only line you need to edit per theme. */
--brand-base: #a78bfa;
--brand: var(--brand-base);
--brand-dim: color-mix(in oklab, var(--brand-base) 62%, #000);
--brand-soft: color-mix(in oklab, var(--brand-base) 85%, transparent);
--brand-glow: color-mix(in srgb, var(--brand-base) 18%, transparent);
--brand-ring: color-mix(in srgb, var(--brand-base) 30%, transparent);
--brand-on: #150929; /* legible text color when sitting on --brand */
/* gradient stops used by the composed brand mark */
--brand-mark-1: color-mix(in oklab, var(--brand-base) 60%, #fff);
--brand-mark-2: var(--brand-base);
--brand-mark-3: color-mix(in oklab, var(--brand-base) 55%, #000);
--mint: #6df5d0;
--mint-dim: #2dd4bf;
/* semantic status colors (ok/warn/crit drive signal-level color coding) */
--ok: #4ade80;
--ok-bg: rgba(74, 222, 128, 0.08);
--ok-line: rgba(74, 222, 128, 0.22);
--ok-glow: 0 0 6px var(--ok);
--warn: #fbbf24;
--warn-bg: rgba(251, 191, 36, 0.08);
--warn-line: rgba(251, 191, 36, 0.28);
--warn-glow: 0 0 6px var(--warn);
--crit: #fb7185;
--crit-bg: rgba(251, 113, 133, 0.09);
--crit-line: rgba(251, 113, 133, 0.28);
--crit-glow: 0 0 6px var(--crit);
--info: #7dd3fc;
/* chart series colors (RF history graphs read these at draw time) */
--chart-1: #a78bfa; /* upstream SNR */
--chart-2: #7dd3fc; /* downstream SNR */
--chart-3: #fbbf24; /* upstream power */
--chart-4: #6df5d0; /* downstream power */
--chart-grid: rgba(255, 255, 255, 0.05);
--chart-label: var(--fg-3);
/* atmosphere — body::before */
--atmos-glow-1: rgba(167, 139, 250, 0.08);
--atmos-glow-2: rgba(109, 245, 208, 0.045);
--atmos-base: linear-gradient(180deg, #060810 0%, #06080d 60%, #050709 100%);
/* grain — body::after */
--grain-opacity: 0.5;
--grain-blend: overlay;
--grain-image: url("data:image/svg+xml;utf8,");
/* shadows */
--shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 12px 28px -10px rgba(0, 0, 0, 0.6);
/* typography */
--font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
--font-ui: "Geist", ui-sans-serif, system-ui, sans-serif;
--font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SFMono-Regular", monospace;
/* sizing */
--topbar-h: 80px;
--subnav-h: 40px;
--row-h: 36px;
--r-sm: 4px;
--r-md: 6px;
--r-lg: 10px;
--r-pill: 999px;
}
/* ---- LIGHT ---- */
[data-theme="light"] {
color-scheme: light;
--bg-0: #f4f5fa; /* page bg — cool paper */
--bg-1: #ffffff; /* topbar / cards */
--bg-2: #fafbfd; /* subtle elevation */
--bg-3: #eef0f6; /* control bg */
--bg-hover: #e7eaf3; /* row hover */
--bg-row-stripe: rgba(15, 23, 42, 0.014);
--line-faint: rgba(15, 23, 42, 0.06);
--line-soft: rgba(15, 23, 42, 0.10);
--line-strong: rgba(15, 23, 42, 0.16);
--fg-0: #0f1424; /* primary — deep navy */
--fg-1: #3d4558;
--fg-2: #6c7488;
--fg-3: #9aa1b2;
--fg-mute: #c2c8d4;
--brand-base: #7c3aed; /* deepened for contrast on white */
--brand: var(--brand-base);
--brand-dim: color-mix(in oklab, var(--brand-base) 70%, #000);
--brand-soft: color-mix(in oklab, var(--brand-base) 85%, transparent);
--brand-glow: color-mix(in srgb, var(--brand-base) 16%, transparent);
--brand-ring: color-mix(in srgb, var(--brand-base) 28%, transparent);
--brand-on: #ffffff;
--brand-mark-1: color-mix(in oklab, var(--brand-base) 50%, #fff);
--brand-mark-2: var(--brand-base);
--brand-mark-3: color-mix(in oklab, var(--brand-base) 55%, #000);
--mint: #14b8a6;
--mint-dim: #0d9488;
--ok: #16a34a;
--ok-bg: rgba(22, 163, 74, 0.10);
--ok-line: rgba(22, 163, 74, 0.30);
--ok-glow: 0 0 0 transparent;
--warn: #d97706;
--warn-bg: rgba(217, 119, 6, 0.10);
--warn-line: rgba(217, 119, 6, 0.32);
--warn-glow: 0 0 0 transparent;
--crit: #dc2626;
--crit-bg: rgba(220, 38, 38, 0.09);
--crit-line: rgba(220, 38, 38, 0.30);
--crit-glow: 0 0 0 transparent;
--info: #0284c7;
--chart-1: #7c3aed;
--chart-2: #0284c7;
--chart-3: #d97706;
--chart-4: #0d9488;
--chart-grid: rgba(15, 23, 42, 0.07);
--chart-label: var(--fg-3);
--atmos-glow-1: rgba(124, 58, 237, 0.10);
--atmos-glow-2: rgba(20, 184, 166, 0.07);
--atmos-base: linear-gradient(180deg, #fbfafd 0%, #f4f5fa 60%, #eef0f6 100%);
--grain-opacity: 0.55;
--grain-blend: multiply;
--grain-image: url("data:image/svg+xml;utf8,");
--shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 8px 22px -10px rgba(15, 23, 42, 0.12),
0 1px 0 rgba(15, 23, 42, 0.04);
}