/* Theme Variables */
:root {
    --bg-primary: #0b0b0b;
    --bg-secondary: #1a1a1a;
    --bg-card: #0b0b0b;
    --text-primary: #fff;
    --text-secondary: #666;
    --text-completed: #888;
    --color-primary: #8a2be2;
    --color-secondary: #ff8c00;
    --border-primary: #8a2be2;
    --border-secondary: #ff8c00;
    --border-completed: #4a4a4a;
    --shadow-primary: rgba(138, 43, 226, 0.3);
    --shadow-secondary: rgba(255, 140, 0, 0.3);
    --gradient-bg-1: rgba(138, 43, 226, 0.1);
    --gradient-bg-2: rgba(255, 140, 0, 0.1);
    --fog-color-1: rgba(138, 43, 226, 0.05);
    --fog-color-2: rgba(255, 140, 0, 0.05);
}

/* Light Mode Theme */
body.light-mode {
    --bg-primary: #fff5e6;
    --bg-secondary: #ffe4b3;
    --bg-card: #fff9f0;
    --text-primary: #2d1b00;
    --text-secondary: #996600;
    --text-completed: #b38600;
    --color-primary: #ff8c00;
    --color-secondary: #ffa500;
    --border-primary: #ff8c00;
    --border-secondary: #ffa500;
    --border-completed: #cccccc;
    --shadow-primary: rgba(255, 140, 0, 0.4);
    --shadow-secondary: rgba(255, 165, 0, 0.4);
    --gradient-bg-1: rgba(255, 140, 0, 0.15);
    --gradient-bg-2: rgba(255, 165, 0, 0.15);
    --fog-color-1: rgba(255, 140, 0, 0.08);
    --fog-color-2: rgba(255, 165, 0, 0.08);
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 3rem;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    animation: pumpkinPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px var(--color-secondary));
}

.theme-toggle:hover {
    transform: scale(1.2);
    animation: pumpkinPulse 0.5s ease-in-out infinite;
}

.theme-toggle:active {
    animation: pumpkinSpin 0.5s ease-out;
}

@keyframes pumpkinPulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px var(--color-secondary));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 25px var(--color-secondary)) 
                drop-shadow(0 0 35px var(--color-secondary));
        transform: scale(1.1);
    }
}

@keyframes pumpkinSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.3);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}