/* =========================================================
   themes.css - Day/Night Theme CSS Custom Properties
   Weather Station Dashboard
   ======================================================= */

:root {
    --transition-theme: background-color 0.5s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ----------------------------------------------------------
   Day Theme
   -------------------------------------------------------- */
[data-theme="day"] {
    --bg-primary: #f0f4f8;
    --bg-secondary: #e2e8f0;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-glass: rgba(255, 255, 255, 0.6);
    --bg-hero: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --bg-nav: rgba(255, 255, 255, 0.9);
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --accent: #3182ce;
    --accent-light: #ebf8ff;
    --border: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.1);
    --glass-blur: blur(12px);
    --chart-grid: rgba(0, 0, 0, 0.06);
    --chart-text: #4a5568;
    --temp-warm: #ef4444;
    --temp-cold: #3b82f6;
    --humidity-color: #14b8a6;
    --rain-color: #2563eb;
    --wind-color: #64748b;
    --pressure-color: #8b5cf6;
    --solar-color: #f59e0b;
    --uv-color: #e11d48;
    --indoor-color: #10b981;
    --scrollbar-thumb: rgba(0,0,0,0.2);
    --scrollbar-track: transparent;
    --badge-bg: rgba(49, 130, 206, 0.1);
    --badge-text: #3182ce;
    --trend-up: #ef4444;
    --trend-down: #3b82f6;
    --trend-stable: #a0aec0;
}

/* ----------------------------------------------------------
   Night Theme
   -------------------------------------------------------- */
[data-theme="night"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: rgba(30, 41, 59, 0.85);
    --bg-glass: rgba(30, 41, 59, 0.6);
    --bg-hero: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    --bg-nav: rgba(15, 23, 42, 0.9);
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent: #60a5fa;
    --accent-light: rgba(96, 165, 250, 0.1);
    --border: rgba(255, 255, 255, 0.08);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.4);
    --glass-blur: blur(12px);
    --chart-grid: rgba(255, 255, 255, 0.06);
    --chart-text: #94a3b8;
    --temp-warm: #f87171;
    --temp-cold: #60a5fa;
    --humidity-color: #2dd4bf;
    --rain-color: #60a5fa;
    --wind-color: #94a3b8;
    --pressure-color: #a78bfa;
    --solar-color: #fbbf24;
    --uv-color: #fb7185;
    --indoor-color: #34d399;
    --scrollbar-thumb: rgba(255,255,255,0.2);
    --scrollbar-track: transparent;
    --badge-bg: rgba(96, 165, 250, 0.15);
    --badge-text: #60a5fa;
    --trend-up: #f87171;
    --trend-down: #60a5fa;
    --trend-stable: #64748b;
}