:root {
    /* Default Classic Theme (Slate + Blue) */
    --c-50: 248 250 252; --c-100: 241 245 249; --c-200: 226 232 240; --c-300: 203 213 225;
    --c-400: 148 163 184; --c-500: 100 116 139; --c-600: 71 85 105; --c-700: 51 65 85;
    --c-800: 30 41 59; --c-850: 30 41 59; --c-900: 15 23 42; --c-950: 2 6 23;
    --p-500: 59 130 246; --p-600: 37 99 235; --p-700: 29 78 216;
}
html, body { width: 100%; height: 100%; margin: 0; }
body { min-height: 100vh; overflow: auto; transition: background-color 0.3s; }
#root { height: 100%; }
/* Custom scrollbar for dark mode compatibility */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent; 
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #475569; 
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #64748b; 
}
/* Fireworks */
.firework {
    position: absolute;
    width: 12px;
    height: 12px;
    animation: firework-pop 1.4s ease-out forwards;
}
.firework-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 14px;
    border-radius: 9999px;
    transform-origin: center calc(100%);
    opacity: 0;
    animation: firework-line 1.4s ease-out forwards;
}
.firework-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    border-radius: 9999px;
    filter: blur(0.4px);
    opacity: 0;
    animation: firework-core 1.4s ease-out forwards;
}
@keyframes firework-pop {
    0% { transform: scale(0.8); }
    100% { transform: scale(1.1); }
}
@keyframes firework-line {
    0% { transform: translate(-50%, -50%) rotate(var(--deg)) scaleY(0.2); opacity: 1; }
    60% { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(var(--deg)) scaleY(1.4); opacity: 0; }
}
@keyframes firework-core {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.3); }
    60% { opacity: 0.9; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}
.firework-launch {
    position: absolute;
    width: 2px;
    height: 0;
    left: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.1));
    transform-origin: center bottom;
    animation: firework-launch 0.7s ease-out forwards;
}
.firework-launch-head {
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    transform: translate(-50%, 0);
    box-shadow: 0 0 12px 4px rgba(255,255,255,0.7);
    filter: blur(0.2px);
}
@keyframes firework-launch {
    0% { transform: translate(-50%, 110vh) scaleY(0.4); opacity: 0.9; }
    80% { opacity: 0.9; }
    100% { transform: translate(-50%, var(--ty, 60vh)) scaleY(1); opacity: 0; }
}
.firework-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--size, 6px);
    height: var(--size, 6px);
    border-radius: 9999px;
    opacity: 0;
    animation: firework-particle 1.6s ease-out forwards;
}
@keyframes firework-particle {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
    65% { opacity: 0.95; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px)) scale(0.9); }
}
/* City Weather Animations */
@keyframes fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}
@keyframes rain {
    0% { transform: translateY(0); opacity: 0.6; }
    100% { transform: translateY(100vh); opacity: 0.6; }
}
@keyframes leaf {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0.8; }
    25% { transform: translate(20px, 25vh) rotate(90deg); }
    50% { transform: translate(-20px, 50vh) rotate(180deg); }
    75% { transform: translate(20px, 75vh) rotate(270deg); }
    100% { transform: translate(0, 100vh) rotate(360deg); opacity: 0; }
}
@keyframes float {
    0% { transform: translateX(0); }
    100% { transform: translateX(120vw); }
}