/* theme.css — Centralized theme tokens for Fbots frontend. Single source of truth for all color variables. Theme class is applied to by theme.js based on server config. */ /* ─── DEFAULT THEME (purple) ─── */ :root { --primary: #7441FF; --primary-light: #9B6FFF; --primary-dark: #3B1FA8; --primary-rgb: 116, 65, 255; --primary-dim: rgba(116, 65, 255, 0.14); --primary-glow: rgba(116, 65, 255, 0.28); --bg: #080811; --bg-rgb: 8, 8, 17; --bg-surface: #0D0D1A; --bg-card: rgba(255,255,255,0.04); --bg-card-hover: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.12); --text: #FFFFFF; --text-muted: rgba(255,255,255,0.48); --text-dim: rgba(255,255,255,0.26); --green: #22C55E; --red: #EF4444; --amber: #F59E0B; --blue: #3B82F6; } /* ─── ALTERNATIVE THEME (orange) ─── */ .theme-alternative { --primary: #FF6B35; --primary-light: #FF8C5A; --primary-dark: #CC4A1A; --primary-rgb: 255, 107, 53; --primary-dim: rgba(255, 107, 53, 0.14); --primary-glow: rgba(255, 107, 53, 0.28); --bg: #0A0604; --bg-rgb: 10, 6, 4; --bg-surface: #120D08; --bg-card: rgba(255,160,100,0.04); --bg-card-hover: rgba(255,160,100,0.06); --border: rgba(255,140,80,0.08); --border-strong: rgba(255,140,80,0.14); } /* ─── AMBER THEME (gold) ─── */ .theme-amber { --primary: #F59E0B; --primary-light: #FBBF24; --primary-dark: #B45309; --primary-rgb: 245, 158, 11; --primary-dim: rgba(245, 158, 11, 0.14); --primary-glow: rgba(245, 158, 11, 0.28); --bg: #0A0804; --bg-rgb: 10, 8, 4; --bg-surface: #110E07; --bg-card: rgba(255,220,140,0.04); --bg-card-hover: rgba(255,220,140,0.06); --border: rgba(255,200,100,0.08); --border-strong: rgba(255,200,100,0.14); } /* ─── CYAN THEME (teal) ─── */ .theme-cyan { --primary: #06B6D4; --primary-light: #22D3EE; --primary-dark: #0E7490; --primary-rgb: 6, 182, 212; --primary-dim: rgba(6, 182, 212, 0.14); --primary-glow: rgba(6, 182, 212, 0.28); --bg: #040A0C; --bg-rgb: 4, 10, 12; --bg-surface: #071114; --bg-card: rgba(100,220,255,0.04); --bg-card-hover: rgba(100,220,255,0.06); --border: rgba(100,200,230,0.08); --border-strong: rgba(100,200,230,0.14); } /* ─── ROSE THEME (crimson) ─── */ .theme-rose { --primary: #F43F5E; --primary-light: #FB7185; --primary-dark: #BE123C; --primary-rgb: 244, 63, 94; --primary-dim: rgba(244, 63, 94, 0.14); --primary-glow: rgba(244, 63, 94, 0.28); --bg: #0A0406; --bg-rgb: 10, 4, 6; --bg-surface: #12080B; --bg-card: rgba(255,130,160,0.04); --bg-card-hover: rgba(255,130,160,0.06); --border: rgba(255,120,140,0.08); --border-strong: rgba(255,120,140,0.14); } /* ─── EMERALD THEME (green) ─── */ .theme-emerald { --primary: #10B981; --primary-light: #34D399; --primary-dark: #047857; --primary-rgb: 16, 185, 129; --primary-dim: rgba(16, 185, 129, 0.14); --primary-glow: rgba(16, 185, 129, 0.28); --bg: #040A07; --bg-rgb: 4, 10, 7; --bg-surface: #07120D; --bg-card: rgba(100,255,180,0.04); --bg-card-hover: rgba(100,255,180,0.06); --border: rgba(80,220,160,0.08); --border-strong: rgba(80,220,160,0.14); }