/* ═══════════════════════════════════════════════════════════════════════ SolPulse — design tokens ("Studio", 11 Sep 2026) The ONE place the palette lives. styles.css, project.html, login.html and chart.html all import this file. Light is the default, dark is a [data-theme="dark"] override set on by js/theme-boot.js before the first paint, so there is never a flash of the wrong theme. Two layers: 1. Canonical tokens — the names new CSS should use. 2. Compatibility aliases — every token the old stylesheet and ~1,200 inline style="…" attributes in public/js reference. They are re-pointed at the canonical tokens, so an inline `color:var(--text-dim)` is theme-safe without touching the JS. Nothing is removed here; dead aliases are pruned only once a grep proves nothing reads them. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. Canonical — light ── */ :root, :root[data-theme="light"]{ color-scheme:light; --bg:#f5f5f7; --surface:#ffffff; --raised:#fbfbfc; --line:rgba(15,17,23,0.08); --line-strong:rgba(15,17,23,0.14); --ink:#14161c; --dim:#5d6270; --muted:#8f94a3; --accent:#5b5bd6; --on-accent:#ffffff; --accent-soft:rgba(91,91,214,0.10); --accent-line:rgba(91,91,214,0.35); --accent-strong:#4a4ac4; --good:#3a9a6a; --good-soft:rgba(58,154,106,0.12); --good-line:rgba(58,154,106,0.35); --bad:#d05a5a; --bad-soft:rgba(208,90,90,0.12); --bad-line:rgba(208,90,90,0.35); --warn:#c98a1e; --warn-soft:rgba(201,138,30,0.14); --warn-line:rgba(201,138,30,0.35); --info:#3b82c4; --info-soft:rgba(59,130,196,0.12); --info-line:rgba(59,130,196,0.35); --hover:rgba(15,17,23,0.04); --hover-strong:rgba(15,17,23,0.08); --shadow:0 1px 2px rgba(15,17,23,0.04),0 8px 24px rgba(15,17,23,0.06); --shadow-lg:0 8px 24px rgba(15,17,23,0.10),0 24px 64px rgba(15,17,23,0.12); --scrim:rgba(15,17,23,0.40); /* chart series — muted in light, brighter in dark */ --series-1:#5b5bd6; --series-2:#1f9e8f; --series-3:#d68a1e; --series-4:#d0557a; --series-5:#5a7fd0; --series-6:#3a9a6a; --chart-grid:rgba(15,17,23,0.06); } /* ── 1. Canonical — dark ── */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#0f1117; --surface:#161923; --raised:#1b1f2b; --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.14); --ink:#eceef4; --dim:#a0a6b8; --muted:#6b7185; --accent:#8b8bf0; --on-accent:#0f1117; --accent-soft:rgba(139,139,240,0.14); --accent-line:rgba(139,139,240,0.40); --accent-strong:#a3a3f5; --good:#5cc490; --good-soft:rgba(92,196,144,0.14); --good-line:rgba(92,196,144,0.40); --bad:#e07474; --bad-soft:rgba(224,116,116,0.14); --bad-line:rgba(224,116,116,0.40); --warn:#e0a33a; --warn-soft:rgba(224,163,58,0.14); --warn-line:rgba(224,163,58,0.40); --info:#6aa8e0; --info-soft:rgba(106,168,224,0.14); --info-line:rgba(106,168,224,0.40); --hover:rgba(255,255,255,0.04); --hover-strong:rgba(255,255,255,0.08); --shadow:0 1px 2px rgba(0,0,0,0.3),0 12px 32px rgba(0,0,0,0.35); --shadow-lg:0 12px 32px rgba(0,0,0,0.45),0 32px 80px rgba(0,0,0,0.5); --scrim:rgba(0,0,0,0.60); --series-1:#8b8bf0; --series-2:#3ec9b8; --series-3:#f0a93a; --series-4:#ef7a9c; --series-5:#7c9ff0; --series-6:#5cc490; --chart-grid:rgba(255,255,255,0.06); } /* ── Theme-independent: type, spacing, radii ── */ :root{ --font-ui:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* Serif is retired: every selector that wore it now wears the UI face. */ --font-serif:var(--font-ui); --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15px; --fs-lg:18px; --fs-xl:22px; --fs-2xl:28px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-pill:999px; /* layout heights the full-bleed review layout subtracts from 100dvh */ --nav-h:56px; --bar-h:44px; --bottom-h:0px; /* phones set 56px for the bottom tab bar */ --safe-b:env(safe-area-inset-bottom,0px); } /* ── 2. Compatibility aliases (old names → canonical) ── */ :root{ /* backgrounds */ --bg-sidebar:var(--bg); --bg-card:var(--surface); --bg-card-hover:var(--raised); --bg-input:var(--surface); --bg-surface:var(--surface); --bg-primary:var(--surface); --card:var(--surface); --card-bg:var(--surface); --input-bg:var(--surface); /* borders */ --border:var(--line); --border-hover:var(--line-strong); --border-active:var(--accent-line); /* the old named palette */ --yale:var(--raised); --baltic:var(--raised); --cerulean:var(--accent); --sky:var(--accent); --alabaster:var(--ink); /* semantic */ --accent-light:var(--accent-strong); --accent-dim:var(--accent-soft); --accent-border:var(--accent-line); --accent-primary:var(--accent); --accent-secondary:var(--accent-strong); --gold:var(--accent); --green:var(--good); --green-dim:var(--good-soft); --green-border:var(--good-line); --red:var(--bad); --red-dim:var(--bad-soft); --danger:var(--bad); --orange:var(--warn); --orange-dim:var(--warn-soft); --yellow:var(--warn); --blue:var(--info); --blue-dim:var(--info-soft); --purple:var(--accent); --purple-dim:var(--accent-soft); --purple-border:var(--accent-line); /* text */ --text:var(--ink); --text-primary:var(--ink); --text-dim:var(--dim); --text-secondary:var(--dim); --text-muted:var(--muted); /* dead sidebar geometry, kept until the CSS that reads it is deleted */ --sidebar-w:220px; --sidebar-collapsed:56px; }