/* ============================================
   EXTRA WOW - Theme Colors
   Default: Fire/Orange theme
   ============================================ */

/* ── Default (Cold Cyan / Ice) ── */
:root {
    --accent: #2BC5E8;
    --accent-hover: #5AD4F0;
    --accent-dark: #0e7c97;
    --accent-gold: #5AD4F0;
    --accent-gold-dark: #2BC5E8;
    --accent-rgb: 43, 197, 232;
    --gradient-fire: linear-gradient(135deg, #2BC5E8, #0e7c97);
    --gradient-gold: linear-gradient(135deg, #5AD4F0, #2BC5E8);
    --gradient-green: linear-gradient(135deg, #2BC5E8, #0e7c97); /* alias for old code */
    --glow-green: 0 0 20px rgba(43, 197, 232, 0.25), 0 0 40px rgba(43, 197, 232, 0.1); /* alias */
    --border-accent: rgba(43, 197, 232, 0.4);
    --border-color: rgba(43, 197, 232, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(70%) sepia(70%) saturate(500%) hue-rotate(160deg) brightness(100%) contrast(100%);
}

/* ── Green theme (optional) ── */
[data-theme="green"] {
    --accent: #4ade80;
    --accent-hover: #86efac;
    --accent-dark: #16a34a;
    --accent-gold: #4ade80;
    --accent-rgb: 74, 222, 128;
    --gradient-fire: linear-gradient(135deg, #4ade80, #16a34a);
    --gradient-gold: linear-gradient(135deg, #4ade80, #16a34a);
    --gradient-green: linear-gradient(135deg, #4ade80, #16a34a);
    --glow-green: 0 0 20px rgba(74, 222, 128, 0.25), 0 0 40px rgba(74, 222, 128, 0.1);
    --border-accent: rgba(74, 222, 128, 0.4);
    --border-color: rgba(74, 222, 128, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(75%) sepia(50%) saturate(500%) hue-rotate(90deg) brightness(100%) contrast(100%);
}

/* ── Red theme ── */
[data-theme="red"] {
    --accent: #f87171;
    --accent-hover: #fca5a5;
    --accent-dark: #dc2626;
    --accent-gold: #f87171;
    --accent-rgb: 248, 113, 113;
    --gradient-fire: linear-gradient(135deg, #f87171, #dc2626);
    --gradient-gold: linear-gradient(135deg, #f87171, #dc2626);
    --gradient-green: linear-gradient(135deg, #f87171, #dc2626);
    --glow-green: 0 0 20px rgba(248, 113, 113, 0.25), 0 0 40px rgba(248, 113, 113, 0.1);
    --border-accent: rgba(248, 113, 113, 0.4);
    --border-color: rgba(248, 113, 113, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(600%) hue-rotate(300deg) brightness(100%) contrast(100%);
}

/* ── Blue theme ── */
[data-theme="blue"] {
    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-dark: #2563eb;
    --accent-gold: #60a5fa;
    --accent-rgb: 96, 165, 250;
    --gradient-fire: linear-gradient(135deg, #60a5fa, #2563eb);
    --gradient-gold: linear-gradient(135deg, #60a5fa, #2563eb);
    --gradient-green: linear-gradient(135deg, #60a5fa, #2563eb);
    --glow-green: 0 0 20px rgba(96, 165, 250, 0.25), 0 0 40px rgba(96, 165, 250, 0.1);
    --border-accent: rgba(96, 165, 250, 0.4);
    --border-color: rgba(96, 165, 250, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(600%) hue-rotate(200deg) brightness(100%) contrast(100%);
}

/* ── Gold/Yellow theme ── */
[data-theme="yellow"] {
    --accent: #fbbf24;
    --accent-hover: #fcd34d;
    --accent-dark: #d97706;
    --accent-gold: #fbbf24;
    --accent-rgb: 251, 191, 36;
    --gradient-fire: linear-gradient(135deg, #fbbf24, #d97706);
    --gradient-gold: linear-gradient(135deg, #fbbf24, #d97706);
    --gradient-green: linear-gradient(135deg, #fbbf24, #d97706);
    --glow-green: 0 0 20px rgba(251, 191, 36, 0.25), 0 0 40px rgba(251, 191, 36, 0.1);
    --border-accent: rgba(251, 191, 36, 0.4);
    --border-color: rgba(251, 191, 36, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(80%) sepia(80%) saturate(600%) hue-rotate(10deg) brightness(100%) contrast(100%);
}

/* ── Gray theme ── */
[data-theme="gray"] {
    --accent: #94a3b8;
    --accent-hover: #cbd5e1;
    --accent-dark: #475569;
    --accent-gold: #94a3b8;
    --accent-rgb: 148, 163, 184;
    --gradient-fire: linear-gradient(135deg, #94a3b8, #475569);
    --gradient-gold: linear-gradient(135deg, #94a3b8, #475569);
    --gradient-green: linear-gradient(135deg, #94a3b8, #475569);
    --glow-green: 0 0 20px rgba(148, 163, 184, 0.25), 0 0 40px rgba(148, 163, 184, 0.1);
    --border-accent: rgba(148, 163, 184, 0.4);
    --border-color: rgba(148, 163, 184, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(70%) sepia(10%) saturate(300%) hue-rotate(180deg) brightness(100%) contrast(100%);
}

/* ── Cyan theme ── */
[data-theme="cyan"] {
    --accent: #22d3ee;
    --accent-hover: #67e8f9;
    --accent-dark: #0891b2;
    --accent-gold: #22d3ee;
    --accent-rgb: 34, 211, 238;
    --gradient-fire: linear-gradient(135deg, #22d3ee, #0891b2);
    --gradient-gold: linear-gradient(135deg, #22d3ee, #0891b2);
    --gradient-green: linear-gradient(135deg, #22d3ee, #0891b2);
    --glow-green: 0 0 20px rgba(34, 211, 238, 0.25), 0 0 40px rgba(34, 211, 238, 0.1);
    --border-accent: rgba(34, 211, 238, 0.4);
    --border-color: rgba(34, 211, 238, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(70%) sepia(80%) saturate(600%) hue-rotate(160deg) brightness(100%) contrast(100%);
}

/* ── Purple theme ── */
[data-theme="purple"] {
    --accent: #a78bfa;
    --accent-hover: #c4b5fd;
    --accent-dark: #7c3aed;
    --accent-gold: #a78bfa;
    --accent-rgb: 167, 139, 250;
    --gradient-fire: linear-gradient(135deg, #a78bfa, #7c3aed);
    --gradient-gold: linear-gradient(135deg, #a78bfa, #7c3aed);
    --gradient-green: linear-gradient(135deg, #a78bfa, #7c3aed);
    --glow-green: 0 0 20px rgba(167, 139, 250, 0.25), 0 0 40px rgba(167, 139, 250, 0.1);
    --border-accent: rgba(167, 139, 250, 0.4);
    --border-color: rgba(167, 139, 250, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(65%) sepia(60%) saturate(600%) hue-rotate(230deg) brightness(100%) contrast(100%);
}

/* ── Pink theme ── */
[data-theme="pink"] {
    --accent: #f472b6;
    --accent-hover: #f9a8d4;
    --accent-dark: #db2777;
    --accent-gold: #f472b6;
    --accent-rgb: 244, 114, 182;
    --gradient-fire: linear-gradient(135deg, #f472b6, #db2777);
    --gradient-gold: linear-gradient(135deg, #f472b6, #db2777);
    --gradient-green: linear-gradient(135deg, #f472b6, #db2777);
    --glow-green: 0 0 20px rgba(244, 114, 182, 0.25), 0 0 40px rgba(244, 114, 182, 0.1);
    --border-accent: rgba(244, 114, 182, 0.4);
    --border-color: rgba(244, 114, 182, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(600%) hue-rotate(280deg) brightness(100%) contrast(100%);
}

/* ── Lime theme ── */
[data-theme="lime"] {
    --accent: #a3e635;
    --accent-hover: #bef264;
    --accent-dark: #65a30d;
    --accent-gold: #a3e635;
    --accent-rgb: 163, 230, 53;
    --gradient-fire: linear-gradient(135deg, #a3e635, #65a30d);
    --gradient-gold: linear-gradient(135deg, #a3e635, #65a30d);
    --gradient-green: linear-gradient(135deg, #a3e635, #65a30d);
    --glow-green: 0 0 20px rgba(163, 230, 53, 0.25), 0 0 40px rgba(163, 230, 53, 0.1);
    --border-accent: rgba(163, 230, 53, 0.4);
    --border-color: rgba(163, 230, 53, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(75%) sepia(60%) saturate(600%) hue-rotate(60deg) brightness(100%) contrast(100%);
}

/* ── Teal theme ── */
[data-theme="teal"] {
    --accent: #2dd4bf;
    --accent-hover: #5eead4;
    --accent-dark: #0f766e;
    --accent-gold: #2dd4bf;
    --accent-rgb: 45, 212, 191;
    --gradient-fire: linear-gradient(135deg, #2dd4bf, #0f766e);
    --gradient-gold: linear-gradient(135deg, #2dd4bf, #0f766e);
    --gradient-green: linear-gradient(135deg, #2dd4bf, #0f766e);
    --glow-green: 0 0 20px rgba(45, 212, 191, 0.25), 0 0 40px rgba(45, 212, 191, 0.1);
    --border-accent: rgba(45, 212, 191, 0.4);
    --border-color: rgba(45, 212, 191, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(70%) sepia(60%) saturate(500%) hue-rotate(140deg) brightness(100%) contrast(100%);
}

/* ── Indigo theme ── */
[data-theme="indigo"] {
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-dark: #4338ca;
    --accent-gold: #818cf8;
    --accent-rgb: 129, 140, 248;
    --gradient-fire: linear-gradient(135deg, #818cf8, #4338ca);
    --gradient-gold: linear-gradient(135deg, #818cf8, #4338ca);
    --gradient-green: linear-gradient(135deg, #818cf8, #4338ca);
    --glow-green: 0 0 20px rgba(129, 140, 248, 0.25), 0 0 40px rgba(129, 140, 248, 0.1);
    --border-accent: rgba(129, 140, 248, 0.4);
    --border-color: rgba(129, 140, 248, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(60%) sepia(60%) saturate(600%) hue-rotate(210deg) brightness(100%) contrast(100%);
}

/* ── Rose theme ── */
[data-theme="rose"] {
    --accent: #fb7185;
    --accent-hover: #fda4af;
    --accent-dark: #e11d48;
    --accent-gold: #fb7185;
    --accent-rgb: 251, 113, 133;
    --gradient-fire: linear-gradient(135deg, #fb7185, #e11d48);
    --gradient-gold: linear-gradient(135deg, #fb7185, #e11d48);
    --gradient-green: linear-gradient(135deg, #fb7185, #e11d48);
    --glow-green: 0 0 20px rgba(251, 113, 133, 0.25), 0 0 40px rgba(251, 113, 133, 0.1);
    --border-accent: rgba(251, 113, 133, 0.4);
    --border-color: rgba(251, 113, 133, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(60%) sepia(80%) saturate(600%) hue-rotate(310deg) brightness(100%) contrast(100%);
}

/* ── Sky theme ── */
[data-theme="sky"] {
    --accent: #38bdf8;
    --accent-hover: #7dd3fc;
    --accent-dark: #0369a1;
    --accent-gold: #38bdf8;
    --accent-rgb: 56, 189, 248;
    --gradient-fire: linear-gradient(135deg, #38bdf8, #0369a1);
    --gradient-gold: linear-gradient(135deg, #38bdf8, #0369a1);
    --gradient-green: linear-gradient(135deg, #38bdf8, #0369a1);
    --glow-green: 0 0 20px rgba(56, 189, 248, 0.25), 0 0 40px rgba(56, 189, 248, 0.1);
    --border-accent: rgba(56, 189, 248, 0.4);
    --border-color: rgba(56, 189, 248, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(65%) sepia(80%) saturate(500%) hue-rotate(175deg) brightness(100%) contrast(100%);
}

/* ── Emerald theme ── */
[data-theme="emerald"] {
    --accent: #34d399;
    --accent-hover: #6ee7b7;
    --accent-dark: #059669;
    --accent-gold: #34d399;
    --accent-rgb: 52, 211, 153;
    --gradient-fire: linear-gradient(135deg, #34d399, #059669);
    --gradient-gold: linear-gradient(135deg, #34d399, #059669);
    --gradient-green: linear-gradient(135deg, #34d399, #059669);
    --glow-green: 0 0 20px rgba(52, 211, 153, 0.25), 0 0 40px rgba(52, 211, 153, 0.1);
    --border-accent: rgba(52, 211, 153, 0.4);
    --border-color: rgba(52, 211, 153, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(70%) sepia(60%) saturate(500%) hue-rotate(120deg) brightness(100%) contrast(100%);
}

/* ── Silver/White theme ── */
[data-theme="silver"] {
    --accent: #e2e8f0;
    --accent-hover: #f1f5f9;
    --accent-dark: #94a3b8;
    --accent-gold: #e2e8f0;
    --accent-rgb: 226, 232, 240;
    --gradient-fire: linear-gradient(135deg, #e2e8f0, #94a3b8);
    --gradient-gold: linear-gradient(135deg, #e2e8f0, #94a3b8);
    --gradient-green: linear-gradient(135deg, #e2e8f0, #94a3b8);
    --glow-green: 0 0 20px rgba(226, 232, 240, 0.25), 0 0 40px rgba(226, 232, 240, 0.1);
    --border-accent: rgba(226, 232, 240, 0.4);
    --border-color: rgba(226, 232, 240, 0.12);
    --btn-filter: brightness(0) saturate(100%) invert(90%) sepia(5%) saturate(200%) hue-rotate(180deg) brightness(100%) contrast(100%);
}