/* ============================================ Dark Mode Overrides Applied when .dark class is on ============================================ */ .dark { /* Override CSS variables for dark theme */ --background: 222 47% 6%; --foreground: 210 40% 98%; --card: 222 47% 9%; --card-foreground: 210 40% 98%; --popover: 222 47% 9%; --popover-foreground: 210 40% 98%; --primary: 206 85% 56%; --primary-foreground: 222 47% 6%; --secondary: 217 33% 15%; --secondary-foreground: 210 40% 98%; --muted: 217 33% 15%; --muted-foreground: 215 20% 65%; --accent: 217 33% 15%; --accent-foreground: 210 40% 98%; --destructive: 0 63% 51%; --destructive-foreground: 210 40% 98%; --border: 217 33% 18%; --input: 217 33% 18%; --ring: 206 85% 56%; /* Chart colors (dark) */ --chart-1: 206 85% 56%; --chart-2: 173 58% 49%; --chart-3: 197 37% 54%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; /* Override gradients */ --primary-gradient: linear-gradient(45deg, #60a5fa, #818cf8, #c084fc); --weather-gradient: linear-gradient(to right, #60a5fa, #818cf8, #c084fc); color-scheme: dark; } /* Body background */ .dark body, html.dark body { background: hsl(var(--background)); color: hsl(var(--foreground)); } /* Typography dark overrides */ .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: hsl(var(--foreground)); } .dark p { color: hsl(var(--muted-foreground)); } .dark label, .dark span { color: hsl(var(--muted-foreground)); } /* Header */ .dark .header { background: rgba(15, 23, 42, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); } .dark .header-logo-icon { color: var(--blue-400); } /* Search */ .dark .search-results { background: var(--gray-900); border-color: var(--gray-800); } .dark .search-result-item:hover { background: var(--gray-800); } .dark .search-section-label { border-color: var(--gray-700); color: var(--gray-400); } /* Footer */ .dark .footer { background: var(--slate-900); border-color: var(--slate-800); } .dark .footer-bottom { border-color: var(--slate-800); } .dark .footer-link { color: var(--gray-400); } .dark .footer-link:hover { color: var(--blue-400); } .dark .footer-copyright { color: var(--gray-400); } .dark .social-link { color: var(--gray-500); } .dark .social-link:hover { color: var(--gray-300); } /* Cards */ .dark .card { background: hsl(var(--card)); border-color: var(--gray-800); } .dark .glass-card { background: rgba(15, 23, 42, 0.7); border-color: rgba(255, 255, 255, 0.1); } .dark .weather-card-inner { background: rgba(15, 23, 42, 0.9); border-color: var(--gray-700); color: var(--gray-200); } .dark .card-highlight { border-color: rgba(255, 255, 255, 0.1); background: rgba(30, 41, 59, 0.9); color: var(--gray-200); } /* Animated background gradient (dark) */ .dark .animated-bg-gradient { background: linear-gradient(to bottom right, var(--slate-900), var(--indigo-950)); } /* Fancy border gradient (dark) */ .dark .fancy-border-gradient::before { background: linear-gradient(to right, var(--blue-500), var(--indigo-500), var(--purple-500)); } /* Text gradient (dark) */ .dark .text-gradient { background: linear-gradient(to right, var(--blue-400), var(--sky-300)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Input */ .dark input, .dark textarea, .dark select { background: hsl(var(--background)); border-color: var(--gray-700); color: var(--gray-200); } /* Buttons */ .dark .btn-outline { border-color: var(--gray-700); color: var(--gray-200); } .dark .btn-outline:hover { background: var(--gray-800); } .dark .btn-ghost:hover { background: var(--gray-800); } /* Theme icon */ .dark .theme-icon { color: var(--yellow-400); } /* Dropdown */ .dark .dropdown-menu { background: var(--gray-900); border-color: var(--gray-800); } .dark .dropdown-item:hover { background: var(--gray-800); } /* Alerts panel */ .dark .alerts-panel { background: var(--gray-900); border-color: var(--gray-800); } /* Dialog */ .dark .dialog { background: hsl(var(--card)); border-color: var(--gray-800); } /* Toast */ .dark .toast { background: var(--gray-900); border-color: var(--gray-800); } .dark .toast-destructive { border-color: var(--red-500); background: rgba(127, 29, 29, 0.3); } /* Tabs */ .dark .tabs-list { background: var(--gray-800); } .dark .tab-trigger.active { background: var(--gray-900); color: #fff; } /* Scrollbar */ .dark ::-webkit-scrollbar-thumb { background: var(--gray-600); } .dark ::-webkit-scrollbar-thumb:hover { background: var(--gray-500); } /* Selection */ .dark ::selection { background: hsl(var(--primary) / 0.3); color: #fff; } /* Location tooltip */ .dark .location-tooltip-content { background: var(--gray-900); border-color: var(--gray-800); } /* Temp unit switch */ .dark .temp-unit-switch { border-color: var(--gray-700); } .dark .temp-unit-btn { color: var(--gray-400); } /* Weather theme dark overrides */ .dark .animated-bg-clear-day { background: radial-gradient(circle, #1e3a8a 0%, #0f172a 100%); } .dark .animated-bg-clear-night { background: radial-gradient(circle, #0f172a 0%, #020617 100%); } .dark .animated-bg-partly-cloudy-day { background: linear-gradient(to bottom, #1e3a8a 0%, #1e293b 100%); } .dark .animated-bg-partly-cloudy-night { background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%); } .dark .animated-bg-cloudy { background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%); } .dark .animated-bg-rain { background: linear-gradient(to bottom, #1e293b 0%, #020617 100%); } .dark .animated-bg-heavy-rain { background: linear-gradient(to bottom, #1e293b 0%, #020617 100%); } .dark .animated-bg-thunderstorm { background: linear-gradient(to bottom, #1e1b4b 0%, #020617 100%); } .dark .animated-bg-snow { background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%); } .dark .animated-bg-fog { background: linear-gradient(to bottom, #334155 0%, #1e293b 100%); } .dark .animated-bg-wind { background: linear-gradient(to bottom, #1e293b 0%, #0f172a 100%); } /* Dialog content */ .dark .dialog-content { background: hsl(var(--card)); border-color: var(--gray-800); } /* Detail stat cards */ .dark .detail-stat-card { background: var(--gray-800); } .dark .detail-stat-value { color: var(--gray-200); } /* Section titles */ .dark .section-title-sm { color: #fff; }