/* ================================================
   WHEEL 2 DECIDE - Theme Variables
   ================================================ */

:root {
    /* Educational Theme (Default) */
    --gold: #f59e0b; /* amber-500 */
    --panel-bg: rgba(255, 255, 255, 0.05); /* Clean dark mode panel */
    --border-color: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(0, 0, 0, 0.3);
    --wheel-shadow: 0 0 50px rgba(245, 158, 11, 0.3), 0 0 80px rgba(245, 158, 11, 0.1), inset 0 0 50px rgba(0, 0, 0, 0.5);
}

/* Alternative Themes */
.theme-ocean {
    --gold: #00d4ff;
    --panel-bg: linear-gradient(145deg, rgba(26, 46, 68, 0.95), rgba(26, 26, 46, 0.95));
    --border-color: rgba(0, 212, 255, 0.1);
    --input-bg: rgba(61, 92, 112, 0.8);
    --wheel-shadow: 0 0 50px rgba(0, 212, 255, 0.3), 0 0 80px rgba(0, 212, 255, 0.1), inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.theme-forest {
    --gold: #00ff88;
    --panel-bg: linear-gradient(145deg, rgba(26, 68, 46, 0.95), rgba(26, 46, 26, 0.95));
    --border-color: rgba(0, 255, 136, 0.1);
    --input-bg: rgba(61, 112, 92, 0.8);
    --wheel-shadow: 0 0 50px rgba(0, 255, 136, 0.3), 0 0 80px rgba(0, 255, 136, 0.1), inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.theme-sunset {
    --gold: #ff6b35;
    --panel-bg: linear-gradient(145deg, rgba(68, 45, 45, 0.95), rgba(46, 26, 26, 0.95));
    --border-color: rgba(255, 107, 53, 0.1);
    --input-bg: rgba(112, 61, 61, 0.8);
    --wheel-shadow: 0 0 50px rgba(255, 107, 53, 0.3), 0 0 80px rgba(255, 107, 53, 0.1), inset 0 0 50px rgba(0, 0, 0, 0.5);
}

.theme-purple {
    --gold: #bf00ff;
    --panel-bg: linear-gradient(145deg, rgba(68, 45, 90, 0.95), rgba(46, 26, 68, 0.95));
    --border-color: rgba(191, 0, 255, 0.1);
    --input-bg: rgba(92, 61, 112, 0.8);
    --wheel-shadow: 0 0 50px rgba(191, 0, 255, 0.3), 0 0 80px rgba(191, 0, 255, 0.1), inset 0 0 50px rgba(0, 0, 0, 0.5);
}