/* Rogue HQ — design tokens (2026 rebuild). Single source of truth for color, type, space. */ :root { /* surfaces — deep indigo slate */ --bg: #0b0c14; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #1a1730 0%, #0b0c14 60%); --surface: #14152300; /* unused alpha base */ --card: #161827; --card-2: #1d2034; --card-hover: #222545; --border: #2a2d44; --border-soft: #21243a; /* text */ --text: #e9eaff; --text-dim: #aab0d4; --muted: #767ca0; /* brand + semantic */ --accent: #8b7cff; /* violet — the "rogue" */ --accent-2: #5cc8ff; /* cyan */ --accent-grad: linear-gradient(135deg, #8b7cff, #5cc8ff); --good: #3ddc97; --warn: #ffb454; --bad: #ff6b81; --gold: #ffce6b; --silver: #c2cadd; --bronze: #d79152; /* rarity */ --rare: #5b8def; --epic: #b069f0; --legendary: #f0b34a; --mythic: #f0566e; /* type */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* space scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* radii + elevation */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 8px 24px rgba(0,0,0,.45); --shadow-3: 0 18px 50px rgba(0,0,0,.55); --ring: 0 0 0 3px rgba(139,124,255,.35); --header-h: 64px; --content-max: 1200px; --speed: .18s; } /* ── Themes (set via ; default :root above = "Violet"). Each only re-tints the surfaces + accent so the whole token system (and every component) recolors with no other change. */ :root[data-theme="ocean"] { --bg: #0a0f1a; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #102236 0%, #0a0f1a 60%); --card: #121a2b; --card-2: #18233a; --card-hover: #1f2c48; --border: #243349; --border-soft: #1b2840; --accent: #38bdf8; --accent-2: #818cf8; --accent-grad: linear-gradient(135deg, #38bdf8, #818cf8); --ring: 0 0 0 3px rgba(56,189,248,.35); } :root[data-theme="emerald"] { --bg: #0a1310; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #0f2a20 0%, #0a1310 60%); --card: #111f1a; --card-2: #172a22; --card-hover: #1e382d; --border: #244031; --border-soft: #1b3227; --accent: #34d399; --accent-2: #5cc8ff; --accent-grad: linear-gradient(135deg, #34d399, #5cc8ff); --ring: 0 0 0 3px rgba(52,211,153,.32); } :root[data-theme="ember"] { --bg: #140d0a; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #311a11 0%, #140d0a 60%); --card: #1f1511; --card-2: #2a1c16; --card-hover: #3a2820; --border: #432c22; --border-soft: #33211a; --accent: #ff7a45; --accent-2: #ffce6b; --accent-grad: linear-gradient(135deg, #ff7a45, #ffce6b); --ring: 0 0 0 3px rgba(255,122,69,.32); } :root[data-theme="rose"] { --bg: #140a10; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #2e1226 0%, #140a10 60%); --card: #1f1320; --card-2: #2a1a2c; --card-hover: #38243b; --border: #422a44; --border-soft: #331f34; --accent: #ff6b9d; --accent-2: #c084fc; --accent-grad: linear-gradient(135deg, #ff6b9d, #c084fc); --ring: 0 0 0 3px rgba(255,107,157,.32); } :root[data-theme="slate"] { --bg: #0d0f13; --bg-grad: radial-gradient(1200px 600px at 50% -10%, #1a1e26 0%, #0d0f13 60%); --card: #161922; --card-2: #1d222e; --card-hover: #252b3a; --border: #2c3340; --border-soft: #222834; --accent: #9db2d4; --accent-2: #cbd5e1; --accent-grad: linear-gradient(135deg, #9db2d4, #cbd5e1); --ring: 0 0 0 3px rgba(157,178,212,.3); }