/* Dark mode theming using CSS variables and attribute selector */
:root {
  color-scheme: light dark;
}

/* Base palette for dark theme */
:root[data-theme="dark"] {
  --primary-color: #94b8ff;
  --secondary-color: #6aa0ff;
  --dark-blue: #0b1320;
  --background-grey: #0e1220;
  --dark-grey: #d0d3d7;
  --light-grey: #1a2233;
  --text-dark: #e7ecf3;
  --text-light: #f5f7fb;
  --border-color: #2b3448;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.6);
  --shadow-md: 0 8px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.5);
  /* Surface tones */
  --surface-bg: #0f1726;      /* page and main container */
  --surface-card: #141e33;    /* cards slightly lighter for contrast */
  --surface-card-2: #16233d;  /* optional elevated cards */
  /* Material tokens (used by md-card / as-md-outlined) */
  --md-sys-color-surface: var(--surface-card);
  --md-sys-color-on-surface: #e7ecf3;
  --md-sys-color-outline: #2b3448;
  --md-state-layer-hover: rgba(255,255,255,0.04);
}

/* Page background */
:root[data-theme="dark"] body {
  background: radial-gradient(1200px 600px at 50% -200px, #142036, #0b1320 60%);
  color: var(--text-dark);
}

/* Main containers */
:root[data-theme="dark"] .main-grid,
:root[data-theme="dark"] .sidebar-card,
:root[data-theme="dark"] .conditions-card {
  background: var(--surface-bg);
  color: var(--text-dark);
  box-shadow: var(--shadow-md);
}

/* Header bars */
:root[data-theme="dark"] .site-header,
:root[data-theme="dark"] .header-wrapper,
:root[data-theme="dark"] .main-nav {
  background: linear-gradient(135deg, #0f1a2c, #152747) !important;
}
:root[data-theme="dark"] .top-search-bar {
  background: linear-gradient(135deg, #12203a, #1a345e) !important;
}
:root[data-theme="dark"] .header-social a { color: #cfe0ff; }
:root[data-theme="dark"] .header-social a:hover { color: #ffdf6b; }

/* Header image overlay text remains legible */
:root[data-theme="dark"] .site-title { color: #f5f7fb; }

/* Nav links */
:root[data-theme="dark"] .nav-links a { color: #e6eeff; }
:root[data-theme="dark"] .nav-links a:hover { color: #94b8ff; }

/* Cards and panels */
:root[data-theme="dark"] .weather-graphic,
:root[data-theme="dark"] .forecast-container,
:root[data-theme="dark"] .hourly-container,
:root[data-theme="dark"] .discussion-container,
:root[data-theme="dark"] .current-weather-card,
:root[data-theme="dark"] .about-card,
:root[data-theme="dark"] .alert-details,
:root[data-theme="dark"] .daily-card,
:root[data-theme="dark"] .weather-graphics-card {
  background: var(--md-sys-color-surface);
  color: var(--text-dark);
  border-color: var(--border-color);
}

/* Generic borders */
:root[data-theme="dark"] .md-card,
:root[data-theme="dark"] .weather-graphic,
:root[data-theme="dark"] .forecast-card,
:root[data-theme="dark"] .hourly-card,
:root[data-theme="dark"] .discussion-card,
:root[data-theme="dark"] .conditions-card,
:root[data-theme="dark"] .about-card,
:root[data-theme="dark"] .daily-card,
:root[data-theme="dark"] .alert-details,
:root[data-theme="dark"] .weather-graphics-card {
  border: 1px solid var(--border-color);
}

/* Search input and buttons */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: #0f1a2c;
  color: var(--text-dark);
  border: 1px solid var(--border-color);
}
:root[data-theme="dark"] button {
  background: #23365c;
  color: #e7ecf3;
  border: 1px solid #2c416d;
}
:root[data-theme="dark"] button:hover { background: #2d497c; }

/* Forecast/Hourly cards that JS renders */
:root[data-theme="dark"] .forecast-card,
:root[data-theme="dark"] .hourly-card,
:root[data-theme="dark"] .discussion-card,
:root[data-theme="dark"] .about-card,
:root[data-theme="dark"] .daily-card,
:root[data-theme="dark"] .alert-details {
  background: var(--surface-card-2);
  color: var(--text-dark);
}
:root[data-theme="dark"] .forecast-card .temp-high { color: #ffaf91; }
:root[data-theme="dark"] .forecast-card .temp-low { color: #9bc2ff; }

/* Conditions grid text */
:root[data-theme="dark"] .weather-grid,
:root[data-theme="dark"] .weather-footer { color: var(--text-dark); }

/* Discussion pre */
:root[data-theme="dark"] pre.discussion-text {
  background: #0d1424;
  color: #dfe7f5;
  border: 1px solid var(--border-color);
}

/* Ticker */
:root[data-theme="dark"] .weather-ticker-container { border-color: #24407a; }
:root[data-theme="dark"] .weather-ticker { background: linear-gradient(90deg, rgba(50,90,180,.6), rgba(50,90,180,.25), rgba(50,90,180,.6)); }

/* Leaflet map adjustments */
:root[data-theme="dark"] .leaflet-container { background: #0b1320; }
:root[data-theme="dark"] .leaflet-control-zoom a,
:root[data-theme="dark"] .leaflet-control-layers-toggle {
  background: #1b2a49;
  color: #e7ecf3;
  border: 1px solid #2b3f6b;
}
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip {
  background: #121b2e;
  color: #e7ecf3;
  border: 1px solid #2b3f6b;
}

/* Alert banners keep their warning colors; ensure text is legible */
:root[data-theme="dark"] .alert-banner { filter: saturate(1.1) contrast(1.05); }

/* Sidebar */
:root[data-theme="dark"] .sidebar { background: #0e1526; color: var(--text-dark); }
:root[data-theme="dark"] .sidebar a { color: #dce6ff; }

/* Toggle button */
.theme-toggle {
  appearance: none;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  width: 38px;
  height: 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.theme-toggle:hover { border-color: #ffd36b; color: #ffd36b; }
:root[data-theme="dark"] .theme-toggle { border-color: #6b87c9; color: #cfe0ff; }
:root[data-theme="dark"] .theme-toggle:hover { border-color: #ffdf6b; color: #ffdf6b; }

/* Charts (Chart.js) */
:root[data-theme="dark"] canvas { background: transparent; }

/* Utility */
:root[data-theme="dark"] .source-link { color: #a9c6ff; }

/* Do not apply any dark-mode filters or overrides to SPC mesoanalysis images/cards */
:root[data-theme="dark"] .no-dark-filter,
:root[data-theme="dark"] .no-dark-filter img,
:root[data-theme="dark"] .no-dark-filter .image-container {
  filter: none !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
}

/* Container-level opt-out for mesoanalysis sections */
:root[data-theme="dark"] .meso-no-dark,
:root[data-theme="dark"] .meso-no-dark * {
  filter: none !important;
  mix-blend-mode: normal !important;
}