/* ═══════════════════════════════════════════════════════════ Streetwhacks Theme System — canonical design tokens Light (default) + Dark via [data-theme="dark"] on Loaded BEFORE other stylesheets so all tokens resolve here. NOTE: :root defaults to LIGHT so pages without JS/no attribute render light, matching the theme engine's default. ════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* Surface scale */ --bg: #ffffff; --bg1: #f8f9fb; --bg2: #f1f3f6; --bg3: #e9edf3; --dim: #e2e8f0; --surface: #ffffff; --bg-surface: #ffffff; --bg-surface2: #f8f9fb; --bg-surface3: #e9edf3; --topbar: rgba(255, 255, 255, 0.85); --hover: rgba(15, 26, 36, 0.04); --card-shadow: 0 1px 2px rgba(15, 26, 36, 0.04), 0 8px 24px rgba(15, 26, 36, 0.03); --nav-bg: rgba(255, 255, 255, 0.85); /* Lines */ --border: rgba(15, 26, 36, 0.09); --border2: rgba(15, 26, 36, 0.15); --border-md: rgba(15, 26, 36, 0.15); /* Text */ --text: #0f1a24; --text-1: #0f1a24; --text-2: #5b7a94; --text-3: #8ea3b6; --text-4: #aab9c8; --text2: #5b7a94; --text3: #8ea3b6; /* Accents */ --red: #dc2626; --green: #00c27a; --amber: #c07800; --blue: #378add; --violet: #6d4fd4; --cyan: #089ba8; --pink: #d84a8f; --rs: rgba(220, 38, 38, 0.08); --rb: rgba(220, 38, 38, 0.28); --gs: rgba(0, 194, 122, 0.08); --gb: rgba(0, 194, 122, 0.3); --as: rgba(192, 120, 0, 0.08); --ab: rgba(192, 120, 0, 0.3); --bs: rgba(55, 138, 221, 0.08); --bb: rgba(55, 138, 221, 0.3); --vs: rgba(109, 79, 212, 0.1); --vb: rgba(109, 79, 212, 0.22); --cs: rgba(8, 155, 168, 0.1); --cb: rgba(8, 155, 168, 0.22); --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); /* 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); } /* ── Dark ─────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --bg: #000000; --bg1: #080f18; --bg2: #0d1822; --bg3: #0f1b28; --dim: #152131; --surface: #1e222d; --bg-surface: #0f1923; --bg-surface2: #111f2e; --bg-surface3: #141f2d; --topbar: rgba(0, 0, 0, 0.8); --hover: rgba(255, 255, 255, 0.04); --card-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); --nav-bg: rgba(0, 0, 0, 0.8); --border: rgba(255, 255, 255, 0.08); --border2: rgba(255, 255, 255, 0.15); --border-md: rgba(255, 255, 255, 0.15); --text: #e8f4ff; --text-1: #f0f8ff; --text-2: #6a8fab; --text-3: #334d65; --text-4: #22374a; --text2: #6a8fab; --text3: #334d65; --red: #dc2626; --rs: rgba(220, 38, 38, 0.12); --rb: rgba(220, 38, 38, 0.3); --green: #00c27a; --gs: rgba(0, 194, 122, 0.1); --gb: rgba(0, 194, 122, 0.25); --amber: #c07800; --as: rgba(192, 120, 0, 0.1); --ab: rgba(192, 120, 0, 0.28); --blue: #378add; --bs: rgba(55, 138, 221, 0.1); --bb: rgba(55, 138, 221, 0.28); --violet: #8b5cf6; --vs: rgba(139, 92, 246, 0.1); --vb: rgba(139, 92, 246, 0.26); --cyan: #14b8c4; --cs: rgba(20, 184, 196, 0.1); --cb: rgba(20, 184, 196, 0.26); --pink: #ec4899; --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); }