/* ============================================
   Weather Condition Gradients & Themes
   ============================================ */

/* Weather background gradients */
.weather-bg-clear-day { background: linear-gradient(to bottom, #60a5fa, #fdba74); }
.weather-bg-clear-night { background: linear-gradient(to bottom, #111827, #1e3a8a); }
.weather-bg-partly-cloudy-day { background: linear-gradient(to bottom, #60a5fa, #d1d5db); }
.weather-bg-partly-cloudy-night { background: linear-gradient(to bottom, #1f2937, #1e3a8a); }
.weather-bg-cloudy { background: linear-gradient(to bottom, #9ca3af, #4b5563); }
.weather-bg-rain { background: linear-gradient(to bottom, #4b5563, #1d4ed8); }
.weather-bg-heavy-rain { background: linear-gradient(to bottom, #4b5563, #1d4ed8); }
.weather-bg-thunderstorm { background: linear-gradient(to bottom, #1f2937, #312e81); }
.weather-bg-snow { background: linear-gradient(to bottom, #f3f4f6, #dbeafe); }
.weather-bg-fog { background: linear-gradient(to bottom, #d1d5db, #6b7280); }
.weather-bg-wind { background: linear-gradient(to bottom, #bae6fd, #7dd3fc); }

/* Animated background full-screen gradients (light mode) */
.animated-bg-clear-day { background: radial-gradient(circle, #7dd3fc 0%, #0ea5e9 100%); }
.animated-bg-clear-night { background: radial-gradient(circle, #1e3a8a 0%, #0f172a 100%); }
.animated-bg-partly-cloudy-day { background: linear-gradient(to bottom, #7dd3fc 0%, #bae6fd 100%); }
.animated-bg-partly-cloudy-night { background: linear-gradient(to bottom, #1e3a8a 0%, #1e293b 100%); }
.animated-bg-cloudy { background: linear-gradient(to bottom, #cbd5e1 0%, #94a3b8 100%); }
.animated-bg-rain { background: linear-gradient(to bottom, #94a3b8 0%, #64748b 100%); }
.animated-bg-heavy-rain { background: linear-gradient(to bottom, #64748b 0%, #475569 100%); }
.animated-bg-thunderstorm { background: linear-gradient(to bottom, #334155 0%, #1e293b 100%); }
.animated-bg-snow { background: linear-gradient(to bottom, #e2e8f0 0%, #cbd5e1 100%); }
.animated-bg-fog { background: linear-gradient(to bottom, #cbd5e1 0%, #e2e8f0 100%); }
.animated-bg-wind { background: linear-gradient(to bottom, #bae6fd 0%, #7dd3fc 100%); }

/* Weather icon colors */
.weather-icon-clear-day { color: var(--yellow-400); }
.weather-icon-clear-night { color: var(--gray-300); }
.weather-icon-partly-cloudy-day { color: var(--yellow-300); }
.weather-icon-partly-cloudy-night { color: var(--gray-300); }
.weather-icon-cloudy { color: var(--gray-400); }
.weather-icon-rain { color: var(--gray-500); }
.weather-icon-heavy-rain { color: var(--gray-600); }
.weather-icon-thunderstorm { color: var(--yellow-500); }
.weather-icon-snow { color: var(--blue-200); }
.weather-icon-fog { color: var(--gray-400); }
.weather-icon-wind { color: var(--gray-400); }

/* Location card gradients */
.location-gradient-clear { background: linear-gradient(to bottom right, var(--yellow-400), var(--orange-500)); }
.location-gradient-night { background: linear-gradient(to bottom right, var(--gray-700), var(--gray-900)); }
.location-gradient-rain { background: linear-gradient(to bottom right, var(--gray-600), var(--gray-800)); }
.location-gradient-default { background: linear-gradient(to bottom right, var(--blue-500), var(--blue-700)); }

/* Alert severity colors */
.alert-minor { border-left: 4px solid var(--blue-500); }
.alert-moderate { border-left: 4px solid var(--yellow-500); }
.alert-severe { border-left: 4px solid var(--orange-500); }
.alert-extreme { border-left: 4px solid var(--red-500); }

/* Temperature range bar */
.temp-range-bar {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--blue-400), var(--yellow-400), var(--red-400));
}

.temp-range-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    border: 2px solid hsl(var(--primary));
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* UV Index colors */
.uv-low { color: var(--green-500); }
.uv-moderate { color: var(--yellow-500); }
.uv-high { color: var(--orange-500); }
.uv-very-high { color: var(--red-500); }
.uv-extreme { color: #7c3aed; }

/* Air quality levels */
.aqi-good { color: var(--green-500); background: rgba(34, 197, 94, 0.1); }
.aqi-fair { color: var(--yellow-500); background: rgba(234, 179, 8, 0.1); }
.aqi-moderate { color: var(--orange-500); background: rgba(249, 115, 22, 0.1); }
.aqi-poor { color: var(--red-500); background: rgba(239, 68, 68, 0.1); }
.aqi-very-poor { color: #7c3aed; background: rgba(124, 58, 237, 0.1); }

/* Weather card gradient overlays (used on current-weather-card) */
.weather-gradient-clear-day { background: linear-gradient(135deg, #38bdf8 0%, #0284c7 50%, #fdba74 100%); }
.weather-gradient-clear-night { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #312e81 100%); }
.weather-gradient-partly-cloudy-day { background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #94a3b8 100%); }
.weather-gradient-partly-cloudy-night { background: linear-gradient(135deg, #1e293b 0%, #1e3a8a 50%, #334155 100%); }
.weather-gradient-cloudy { background: linear-gradient(135deg, #64748b 0%, #475569 50%, #334155 100%); }
.weather-gradient-rain { background: linear-gradient(135deg, #475569 0%, #1e40af 50%, #1e3a8a 100%); }
.weather-gradient-heavy-rain { background: linear-gradient(135deg, #334155 0%, #1e3a8a 50%, #1e293b 100%); }
.weather-gradient-thunderstorm { background: linear-gradient(135deg, #1e293b 0%, #312e81 50%, #1e1b4b 100%); }
.weather-gradient-snow { background: linear-gradient(135deg, #e2e8f0 0%, #bfdbfe 50%, #93c5fd 100%); }
.weather-gradient-fog { background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 50%, #94a3b8 100%); }
.weather-gradient-wind { background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 50%, #0ea5e9 100%); }
.weather-gradient-drizzle { background: linear-gradient(135deg, #94a3b8 0%, #64748b 50%, #475569 100%); }
.weather-gradient-mist { background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 50%, #64748b 100%); }
.weather-gradient-haze { background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 50%, #64748b 100%); }
.weather-gradient-dust { background: linear-gradient(135deg, #d97706 0%, #92400e 50%, #78350f 100%); }
.weather-gradient-tornado { background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #1f2937 100%); }
.weather-gradient-undefined { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%); }