/* ============================================================================ themes.css — Theme Variants Toggle via [data-theme] attribute on ============================================================================ */ /* --- Theme 1: Dark + Electric Blue (default) --------------- */ /* Already defined in :root in base.css — no overrides needed */ /* --- Theme 2: Dark + Gold/Amber ---------------------------- */ [data-theme="dark-gold"] { --color-accent: #f59e0b; --color-accent-hover: #fbbf24; --color-accent-dim: rgba(245, 158, 11, 0.15); --color-accent-glow: rgba(245, 158, 11, 0.35); } /* --- Theme 4: Terminal — phosphor green, brutalist ---------- */ [data-theme="terminal"] { --color-accent: #3ddc84; --color-accent-hover: #6ff2a5; --color-accent-dim: rgba(61, 220, 132, 0.10); --color-accent-glow: rgba(61, 220, 132, 0.22); --color-bg-primary: #05070a; --color-bg-secondary: #080b0f; --color-bg-tertiary: #0b0f14; --color-bg-card: #0a0d11; --color-bg-elevated: #10151b; --color-border: rgba(61, 220, 132, 0.16); --color-border-light: rgba(61, 220, 132, 0.28); --color-text-primary: #d4d8dc; --color-text-secondary: #8f9aa3; --color-text-muted: #5c6670; --color-text-inverse: #05070a; --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 2px; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-glow: none; } [data-theme="terminal"] body { font-family: 'JetBrains Mono', 'Fira Code', monospace; } [data-theme="terminal"] .text-gradient { background: none; -webkit-text-fill-color: var(--color-accent); color: var(--color-accent); } [data-theme="terminal"] .hero::before { background: radial-gradient(circle, rgba(61, 220, 132, 0.06), transparent 70%); } /* --- Theme 3: Light + Corporate Blue ----------------------- */ [data-theme="light-blue"] { --color-accent: #2563eb; --color-accent-hover: #3b82f6; --color-accent-dim: rgba(37, 99, 235, 0.12); --color-accent-glow: rgba(37, 99, 235, 0.25); --color-bg-primary: #f8fafc; --color-bg-secondary: #ffffff; --color-bg-tertiary: #f1f5f9; --color-bg-card: #ffffff; --color-bg-elevated: #e2e8f0; --color-border: rgba(0, 0, 0, 0.08); --color-border-light: rgba(0, 0, 0, 0.14); --color-text-primary: #0f172a; --color-text-secondary: #475569; --color-text-muted: #94a3b8; --color-text-inverse: #ffffff; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 30px var(--color-accent-glow); }