/* ============================================================ * BrainX themes — controlled by admin panel. * Apply by setting . * Defaults: theme = "dark-gold", font = "inter". * * Every theme overrides this set of CSS variables on :root so * every page (using --bg, --surface, --gold, --text, etc.) * inherits the new look without any markup changes. * ============================================================ */ /* ============================================================ * FONT FAMILIES — 8 options. Each [data-font="..."] sets the * --font-body variable AND uses high-specificity selectors to * override the per-page body / input fonts. Numeric labels in * Orbitron stay untouched (those are intentional). * ============================================================ */ :root[data-font="inter"] { --font-body: 'Inter', system-ui, -apple-system, sans-serif; } :root[data-font="poppins"] { --font-body: 'Poppins', system-ui, -apple-system, sans-serif; } :root[data-font="roboto"] { --font-body: 'Roboto', system-ui, -apple-system, sans-serif; } :root[data-font="outfit"] { --font-body: 'Outfit', system-ui, -apple-system, sans-serif; } :root[data-font="space-grotesk"] { --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif; } :root[data-font="manrope"] { --font-body: 'Manrope', system-ui, -apple-system, sans-serif; } :root[data-font="dm-sans"] { --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; } :root[data-font="plus-jakarta"] { --font-body: 'Plus Jakarta Sans',system-ui, -apple-system, sans-serif; } /* High-specificity overrides so the per-page hardcoded `font-family: 'Inter'` * gets replaced by the theme's choice. We intentionally do NOT touch any * element whose font-family was set to 'Orbitron' (the numeric display font), * which keeps the chunky money digits looking right. */ html[data-font] body, html[data-font] input, html[data-font] select, html[data-font] textarea, html[data-font] button { font-family: var(--font-body), system-ui, sans-serif; } /* ============================================================ * MONEY / NUMBERS FONT — controls the chunky display font used * for wallet balances, BTC price, countdowns, and stats. * Defaults to Orbitron. Each [data-money="..."] sets --font-money. * ============================================================ */ :root[data-money="orbitron"] { --font-money: 'Orbitron', 'Inter', sans-serif; } :root[data-money="rajdhani"] { --font-money: 'Rajdhani', 'Inter', sans-serif; } :root[data-money="russo"] { --font-money: 'Russo One', 'Inter', sans-serif; } :root[data-money="audiowide"] { --font-money: 'Audiowide', 'Inter', sans-serif; } :root[data-money="exo"] { --font-money: 'Exo 2', 'Inter', sans-serif; } :root[data-money="chakra"] { --font-money: 'Chakra Petch', 'Inter', sans-serif; } :root[data-money="jetbrains"] { --font-money: 'JetBrains Mono', monospace; } :root[data-money="bebas"] { --font-money: 'Bebas Neue', 'Inter', sans-serif; } /* Override every element that originally used 'Orbitron'. We use a high- * specificity attribute selector so per-page rules can't override us. * This rule deliberately uses a CSS attribute selector trick: any element * whose computed font-family contains "Orbitron" picks up --font-money. */ html[data-money] [style*="Orbitron"], html[data-money] [style*="orbitron"] { font-family: var(--font-money) !important; } /* And the catchall: every per-page declaration of `font-family: 'Orbitron'` * targets specific class names. We override the most common ones below. * If you add new pages later, no change needed — just keep using 'Orbitron' * in the page CSS and it'll inherit the active money font. */ html[data-money] .currency, html[data-money] .wallet-amount, html[data-money] .stat-tile-value, html[data-money] .perf-tile .v, html[data-money] .countdown-time, html[data-money] .stat-value, html[data-money] .balance-value, html[data-money] .chart-price, html[data-money] .price, html[data-money] .amount, html[data-money] .bw-value, html[data-money] .stat .v, html[data-money] .summary .v, html[data-money] .v { font-family: var(--font-money) !important; } /* ============================================================ * COLOR THEMES * ============================================================ */ /* ---------- DARK THEMES ---------- */ :root[data-theme="dark-gold"], html:root { --bg: #0f1218; --surface: #1a1f2a; --surface-2: #232838; --content-bg: #f5f7fb; --content-2: #f1f3f8; --border: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.04); --border-gold: rgba(245,183,0,0.18); --text: #ffffff; --text-dim: #a0a8bd; --text-faint: #6b7280; --gold: #f5b700; --gold-bright: #ffc93c; --gold-deep: #d49a00; --gold-glow: rgba(245,183,0,0.35); --success: #10b981; --danger: #ef4444; --info: #3b82f6; --warn: #f59e0b; } :root[data-theme="dark-emerald"] { --bg: #0a1612; --surface: #122620; --surface-2: #1a3530; --border: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.04); --border-gold: rgba(16,185,129,0.22); --text: #ffffff; --text-dim: #a0bdb0; --text-faint: #6b8780; --gold: #10b981; --gold-bright: #34d399; --gold-deep: #059669; --gold-glow: rgba(16,185,129,0.4); --success: #10b981; --danger: #ef4444; --info: #06b6d4; --warn: #f59e0b; } :root[data-theme="dark-sapphire"] { --bg: #0a0e1a; --surface: #131a2c; --surface-2: #1c2540; --border: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.04); --border-gold: rgba(59,130,246,0.22); --text: #ffffff; --text-dim: #99adcf; --text-faint: #6178a0; --gold: #3b82f6; --gold-bright: #60a5fa; --gold-deep: #2563eb; --gold-glow: rgba(59,130,246,0.4); --success: #10b981; --danger: #ef4444; --info: #06b6d4; --warn: #f59e0b; } :root[data-theme="dark-rose"] { --bg: #14080d; --surface: #221218; --surface-2: #341924; --border: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.04); --border-gold: rgba(236,72,153,0.22); --text: #ffffff; --text-dim: #c5a0b3; --text-faint: #8a6c7d; --gold: #ec4899; --gold-bright: #f472b6; --gold-deep: #be185d; --gold-glow: rgba(236,72,153,0.4); --success: #10b981; --danger: #ef4444; --info: #3b82f6; --warn: #f59e0b; } :root[data-theme="dark-amethyst"] { --bg: #100a1c; --surface: #1d1432; --surface-2: #2a1d4a; --border: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.04); --border-gold: rgba(168,85,247,0.22); --text: #ffffff; --text-dim: #b3a0cc; --text-faint: #7d6c99; --gold: #a855f7; --gold-bright: #c084fc; --gold-deep: #7e22ce; --gold-glow: rgba(168,85,247,0.4); --success: #10b981; --danger: #ef4444; --info: #3b82f6; --warn: #f59e0b; } :root[data-theme="dark-cyan"] { --bg: #061416; --surface: #0e2326; --surface-2: #15363a; --border: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.04); --border-gold: rgba(6,182,212,0.22); --text: #ffffff; --text-dim: #9ec0c5; --text-faint: #608086; --gold: #06b6d4; --gold-bright: #22d3ee; --gold-deep: #0891b2; --gold-glow: rgba(6,182,212,0.4); --success: #10b981; --danger: #ef4444; --info: #3b82f6; --warn: #f59e0b; } :root[data-theme="dark-amber"] { --bg: #15110a; --surface: #241d11; --surface-2: #382c1a; --border: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.04); --border-gold: rgba(249,115,22,0.22); --text: #ffffff; --text-dim: #c5af9e; --text-faint: #8a7864; --gold: #f97316; --gold-bright: #fb923c; --gold-deep: #c2410c; --gold-glow: rgba(249,115,22,0.4); --success: #10b981; --danger: #ef4444; --info: #3b82f6; --warn: #f59e0b; } :root[data-theme="dark-crimson"] { --bg: #170a0c; --surface: #2a1216; --surface-2: #401920; --border: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.04); --border-gold: rgba(239,68,68,0.22); --text: #ffffff; --text-dim: #c5a0a3; --text-faint: #8a6c70; --gold: #ef4444; --gold-bright: #f87171; --gold-deep: #b91c1c; --gold-glow: rgba(239,68,68,0.4); --success: #10b981; --danger: #ef4444; --info: #3b82f6; --warn: #f59e0b; } :root[data-theme="dark-mint"] { --bg: #081813; --surface: #112a22; --surface-2: #1a4034; --border: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.04); --border-gold: rgba(20,184,166,0.22); --text: #ffffff; --text-dim: #9ec5b8; --text-faint: #608680; --gold: #14b8a6; --gold-bright: #2dd4bf; --gold-deep: #0d9488; --gold-glow: rgba(20,184,166,0.4); --success: #10b981; --danger: #ef4444; --info: #3b82f6; --warn: #f59e0b; } :root[data-theme="dark-monochrome"] { --bg: #0a0a0a; --surface: #161616; --surface-2: #232323; --border: rgba(255,255,255,0.08); --border-soft: rgba(255,255,255,0.04); --border-gold: rgba(255,255,255,0.18); --text: #ffffff; --text-dim: #a8a8a8; --text-faint: #6e6e6e; --gold: #ffffff; --gold-bright: #f4f4f4; --gold-deep: #d4d4d4; --gold-glow: rgba(255,255,255,0.25); --success: #10b981; --danger: #ef4444; --info: #3b82f6; --warn: #f59e0b; } :root[data-theme="dark-midnight"] { --bg: #050810; --surface: #0d111c; --surface-2: #161c2c; --border: rgba(255,255,255,0.05); --border-soft: rgba(255,255,255,0.03); --border-gold: rgba(99,102,241,0.22); --text: #ffffff; --text-dim: #94a3b8; --text-faint: #5e6b80; --gold: #6366f1; --gold-bright: #818cf8; --gold-deep: #4338ca; --gold-glow: rgba(99,102,241,0.4); --success: #10b981; --danger: #ef4444; --info: #3b82f6; --warn: #f59e0b; } :root[data-theme="dark-forest"] { --bg: #0a1410; --surface: #11241c; --surface-2: #1a3528; --border: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.04); --border-gold: rgba(132,204,22,0.22); --text: #ffffff; --text-dim: #a8c5a0; --text-faint: #6b8064; --gold: #84cc16; --gold-bright: #a3e635; --gold-deep: #65a30d; --gold-glow: rgba(132,204,22,0.4); --success: #10b981; --danger: #ef4444; --info: #3b82f6; --warn: #f59e0b; } /* ---------- LIGHT THEMES ---------- */ :root[data-theme="light-gold"] { --bg: #faf9f5; --surface: #ffffff; --surface-2: #f5f3ec; --border: rgba(0,0,0,0.08); --border-soft: rgba(0,0,0,0.05); --border-gold: rgba(217,119,6,0.3); --text: #1a1f2a; --text-dim: #5c6779; --text-faint: #8a93a3; --gold: #d97706; --gold-bright: #f59e0b; --gold-deep: #b45309; --gold-glow: rgba(217,119,6,0.25); --success: #059669; --danger: #dc2626; --info: #2563eb; --warn: #d97706; } :root[data-theme="light-sky"] { --bg: #f0f7ff; --surface: #ffffff; --surface-2: #e6f1fc; --border: rgba(0,0,0,0.08); --border-soft: rgba(0,0,0,0.05); --border-gold: rgba(37,99,235,0.3); --text: #0f1724; --text-dim: #4a5b78; --text-faint: #7a8aa3; --gold: #2563eb; --gold-bright: #3b82f6; --gold-deep: #1d4ed8; --gold-glow: rgba(37,99,235,0.25); --success: #059669; --danger: #dc2626; --info: #2563eb; --warn: #d97706; } :root[data-theme="light-mint"] { --bg: #f0fdf8; --surface: #ffffff; --surface-2: #e0f7ee; --border: rgba(0,0,0,0.08); --border-soft: rgba(0,0,0,0.05); --border-gold: rgba(5,150,105,0.3); --text: #0f1f1a; --text-dim: #4a6b62; --text-faint: #7a948b; --gold: #059669; --gold-bright: #10b981; --gold-deep: #047857; --gold-glow: rgba(5,150,105,0.25); --success: #059669; --danger: #dc2626; --info: #2563eb; --warn: #d97706; } :root[data-theme="light-rose"] { --bg: #fff5f8; --surface: #ffffff; --surface-2: #fce7ef; --border: rgba(0,0,0,0.08); --border-soft: rgba(0,0,0,0.05); --border-gold: rgba(219,39,119,0.3); --text: #1a0d14; --text-dim: #6b4a59; --text-faint: #94797f; --gold: #db2777; --gold-bright: #ec4899; --gold-deep: #be185d; --gold-glow: rgba(219,39,119,0.25); --success: #059669; --danger: #dc2626; --info: #2563eb; --warn: #d97706; } :root[data-theme="light-lavender"] { --bg: #f8f5ff; --surface: #ffffff; --surface-2: #ede4fc; --border: rgba(0,0,0,0.08); --border-soft: rgba(0,0,0,0.05); --border-gold: rgba(124,58,237,0.3); --text: #15101f; --text-dim: #594a6b; --text-faint: #8a7fa3; --gold: #7c3aed; --gold-bright: #a855f7; --gold-deep: #6d28d9; --gold-glow: rgba(124,58,237,0.25); --success: #059669; --danger: #dc2626; --info: #2563eb; --warn: #d97706; } :root[data-theme="light-coral"] { --bg: #fff5f0; --surface: #ffffff; --surface-2: #fce4d6; --border: rgba(0,0,0,0.08); --border-soft: rgba(0,0,0,0.05); --border-gold: rgba(234,88,12,0.3); --text: #1f0d05; --text-dim: #6b4a3a; --text-faint: #94796b; --gold: #ea580c; --gold-bright: #f97316; --gold-deep: #c2410c; --gold-glow: rgba(234,88,12,0.25); --success: #059669; --danger: #dc2626; --info: #2563eb; --warn: #d97706; } :root[data-theme="light-graphite"] { --bg: #f5f5f5; --surface: #ffffff; --surface-2: #ebebeb; --border: rgba(0,0,0,0.1); --border-soft: rgba(0,0,0,0.06); --border-gold: rgba(31,41,55,0.3); --text: #1f2937; --text-dim: #4b5563; --text-faint: #94a3b8; --gold: #1f2937; --gold-bright: #374151; --gold-deep: #111827; --gold-glow: rgba(31,41,55,0.18); --success: #059669; --danger: #dc2626; --info: #2563eb; --warn: #d97706; } :root[data-theme="light-teal"] { --bg: #effdfd; --surface: #ffffff; --surface-2: #d6f5f5; --border: rgba(0,0,0,0.08); --border-soft: rgba(0,0,0,0.05); --border-gold: rgba(8,145,178,0.3); --text: #0a1f24; --text-dim: #475e69; --text-faint: #7a8d94; --gold: #0891b2; --gold-bright: #06b6d4; --gold-deep: #0e7490; --gold-glow: rgba(8,145,178,0.25); --success: #059669; --danger: #dc2626; --info: #2563eb; --warn: #d97706; }