/* ═══════════════════════════════════════════════════════════ Streetwhacks Theme System — canonical design tokens Dark (default) + Light via [data-theme="light"] on Loaded BEFORE other stylesheets so all tokens resolve here. ════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; /* Surface scale */ --bg: #080f17; --bg1: #0c1620; --bg2: #0f1b28; --bg3: #111f2e; --dim: #152131; --surface: #1e222d; --bg-surface: #0f1923; --bg-surface2: #111f2e; --bg-surface3: #141f2d; --topbar: rgba(8, 15, 23, 0.94); --hover: rgba(255, 255, 255, 0.04); /* Lines */ --border: rgba(255, 255, 255, 0.07); --border2: rgba(255, 255, 255, 0.13); --border-md: rgba(255, 255, 255, 0.13); /* Text */ --text: #d0e4f4; --text2: #8fb0c8; --text3: #486480; --text-1: #e8f0f8; --text-2: #93b2cc; --text-3: #5d7d9b; --text-4: #445e7a; /* Accents */ --green: #00c27a; --red: #e8302a; --amber: #c07800; --blue: #378add; --violet: #8b5cf6; --cyan: #14b8c4; --pink: #ec4899; --gs: rgba(0, 194, 122, 0.09); --gb: rgba(0, 194, 122, 0.2); --rs: rgba(232, 48, 42, 0.09); --rb: rgba(232, 48, 42, 0.2); --as: rgba(192, 120, 0, 0.09); --ab: rgba(192, 120, 0, 0.2); --bs: rgba(55, 138, 221, 0.09); --bb: rgba(55, 138, 221, 0.2); --vs: rgba(139, 92, 246, 0.1); --vb: rgba(139, 92, 246, 0.26); --cs: rgba(20, 184, 196, 0.1); --cb: rgba(20, 184, 196, 0.26); --ps: rgba(236, 72, 153, 0.1); --pb: rgba(236, 72, 153, 0.26); /* Brand (legacy template tokens) */ --primary: #e11d48; --secondary: #12151c; --light: #b0b4c4; --dark: #0b0e14; --accent-glow: rgba(225, 29, 72, 0.15); /* Fonts */ --font: 'DM Sans', system-ui, sans-serif; --sans: 'DM Sans', system-ui, sans-serif; --mono: 'DM Mono', monospace; --radius: 10px; /* Alias — page-specific token names share the canonical scale */ --txt: var(--text); --txt2: var(--text2); --txt3: var(--text3); --line: var(--border); --line2: var(--border2); --red-s: var(--rs); --red-b: var(--rb); --green-s: var(--gs); --green-b: var(--gb); --c-red: var(--red); --c-red-dim: var(--rs); --c-red-bdr: var(--rb); --c-green: var(--green); --c-green-dim: var(--gs); --c-green-bdr: var(--gb); --c-amber: var(--amber); --c-amber-dim: var(--as); --c-amber-bdr: var(--ab); --c-blue: var(--blue); --c-blue-dim: var(--bs); --c-blue-bdr: var(--bb); --c-violet: var(--violet); --c-violet-dim: var(--vs); --c-violet-bdr: var(--vb); --bg-elevated: var(--bg3); --surface-2: var(--bg-surface2); --surface-3: var(--bg-surface3); --t1: var(--text-1); --t3: var(--text-3); --t4: var(--text-4); --shell-bg: var(--bg); --shell-bg-nav: var(--bg1); --shell-bg-topbar: var(--topbar); --shell-bg-surface: var(--bg2); --shell-bg-surface-2: var(--bg3); --shell-bg-hover: var(--hover); --shell-border: var(--border); --shell-border-strong: var(--border2); --shell-text: var(--text); --shell-text-secondary: var(--text2); --shell-text-dim: var(--text3); --shell-text-faint: var(--text-4); --shell-red: var(--red); --shell-red-soft: var(--rs); --shell-green: var(--green); --shell-green-soft: var(--gs); --shell-amber: var(--amber); --panel: var(--bg1); --surface2: var(--bg-surface2); --red-dim: var(--rs); --green-dim: var(--gs); --text-secondary: var(--text2); --red-soft: var(--rs); --red-border: var(--rb); --bg-secondary: var(--bg2); } /* ── Light ─────────────────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; --bg: #f2f5fa; --bg1: #ffffff; --bg2: #eef2f7; --bg3: #e6edf5; --dim: #dfe7f0; --surface: #ffffff; --bg-surface: #ffffff; --bg-surface2: #f2f5fa; --bg-surface3: #e9eef6; --topbar: rgba(255, 255, 255, 0.92); --hover: rgba(20, 40, 70, 0.05); --border: rgba(15, 30, 55, 0.12); --border2: rgba(15, 30, 55, 0.2); --border-md: rgba(15, 30, 55, 0.2); --text: #243244; --text-1: #1b2634; --text-2: #43546a; --text-3: #75899e; --text-4: #a2b3c6; --text2: #43546a; --text3: #6b8198; --green: #0a9c6c; --gs: rgba(10, 156, 108, 0.1); --gb: rgba(10, 156, 108, 0.22); --red: #d72632; --rs: rgba(215, 38, 50, 0.1); --rb: rgba(215, 38, 50, 0.22); --amber: #b47500; --as: rgba(180, 117, 0, 0.1); --ab: rgba(180, 117, 0, 0.22); --blue: #2f6fd8; --bs: rgba(47, 111, 216, 0.1); --bb: rgba(47, 111, 216, 0.22); --violet: #6d4fd4; --vs: rgba(109, 79, 212, 0.1); --vb: rgba(109, 79, 212, 0.22); --cyan: #089ba8; --cs: rgba(8, 155, 168, 0.1); --cb: rgba(8, 155, 168, 0.22); --pink: #d84a8f; --ps: rgba(216, 78, 143, 0.1); --pb: rgba(216, 78, 143, 0.22); /* Brand / legacy template tokens */ --primary: #e11d48; --secondary: #ffffff; --light: #f1f3f7; --dark: #243044; --accent-glow: rgba(225, 29, 72, 0.08); }