/* Light surfaces when html.light-mode is set (see js/light-mode.js).
   Keeps Kaia teal accents; cool neutrals only (no cream / terracotta).
   Status colors stay clear/saturated (not muddy olive-brown) while
   still readable on white cards. */

html.light-mode {
  color-scheme: light;

  --chrome-surface: #f1f4f8;
  --bg-dark: #e4e9ef;
  --bg-panel: #f1f4f8;
  --bg-card: #ffffff;
  --bg-card-hover: #e8eef4;
  --bg-kill: #ebf0f5;
  /* Soft grey — default/inactive cards must recede vs teal/status borders. */
  --border: #d1d5db;
  /* Idle chrono hatch — light grey on white (very subtle). */
  --card-idle-stripe: rgba(15, 23, 42, 0.045);
  --border-accent: #0d9488;
  --gold: #0d9488;
  --gold-light: #0f766e;
  --gold-dim: #14b8a6;
  --text-primary: #111827;
  --text-secondary: #374151;
  /* Readable muted on white (was too pale at #9ca3af). */
  --text-muted: #6b7280;
  /* Clean teal for open/active (not murky forest green). */
  --green-rgb: 13, 148, 136;
  --red-rgb: 185, 48, 48;
  --green-bg: rgba(var(--green-rgb), 0.12);
  --red-bg: rgba(var(--red-rgb), 0.08);
  --blue: #2563a8;
  --blue-bg: rgba(37, 99, 168, 0.1);
  /* Orange vs yellow stay distinct — yellow is true yellow-gold, not brown amber. */
  --orange-rgb: 194, 65, 12;
  --yellow-rgb: 184, 160, 30;
  --orange: #c2410c;
  --yellow: #b8a01e;
  --orange-bg: rgba(var(--orange-rgb), 0.12);
  --yellow-bg: rgba(var(--yellow-rgb), 0.12);
  /* Ideal upcoming = yellow-gold; now = teal (must not share a hue). */
  --relevant-weather-surface: rgba(var(--yellow-rgb), 0.12);
  --relevant-weather-border: #c4b24a;
  --relevant-weather-ring: 0 0 0 1px rgba(var(--yellow-rgb), 0.3);
  --weather-current-border: #0d9488;
  --weather-current-surface: rgba(var(--green-rgb), 0.1);
  --weather-current-dot: rgb(var(--green-rgb));
  --weather-current-rel: #0f766e;
}

html.light-mode body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--green-rgb), 0.07), transparent),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(29, 155, 240, 0.05), transparent),
    linear-gradient(180deg, #e8edf3 0%, #dde4ec 100%);
}

html.light-mode .header-bar {
  --header-by: #4b5563;
  --header-muted: #4b5563;
  --header-secondary: #374151;
  --header-border: rgba(71, 85, 105, 0.4);
  --header-border-strong: rgba(71, 85, 105, 0.55);
  --header-elevated: #ffffff;
  --header-hover: #e8eef4;
  --header-card: #ffffff;
  --header-tertiary: #ebf0f5;

  background: var(--chrome-surface);
  border-bottom: none;
}

html.light-mode .kaia-mark-kaia {
  color: #0d9488;
  -webkit-text-fill-color: #0d9488;
}

html.light-mode .kaia-mark-tools {
  color: var(--text-primary);
  -webkit-text-fill-color: var(--text-primary);
}

html.light-mode .kaia-mark:hover .kaia-mark-kaia {
  color: #0f766e;
  -webkit-text-fill-color: #0f766e;
}

html.light-mode .server-dropdown {
  --header-by: #4b5563;
  --header-muted: #4b5563;
  --header-secondary: #374151;
  --header-border: rgba(71, 85, 105, 0.4);
  --header-border-strong: rgba(71, 85, 105, 0.55);
  --header-elevated: #ffffff;
  --header-hover: #e8eef4;
  --header-card: #ffffff;
  --header-tertiary: #ebf0f5;

  box-shadow: 0 8px 32px rgba(17, 24, 39, 0.14);
}

html.light-mode .time-icon,
html.light-mode .time-button {
  color: var(--text-primary);
}

html.light-mode .time-label {
  color: #000;
  font-weight: 400;
}

html.light-mode .time-period {
  color: var(--header-muted);
}

html.light-mode .tab-bar {
  border-bottom-color: rgba(71, 85, 105, 0.4);
  background: var(--chrome-surface);
}

html.light-mode .tab-btn {
  color: #4b5563;
}

html.light-mode .tab-btn:hover {
  color: var(--text-primary);
  background: rgba(var(--green-rgb), 0.08);
}

html.light-mode .tab-btn.is-active {
  color: var(--text-primary);
  background: rgba(var(--green-rgb), 0.12);
}

/* Qualifier opacity is tuned for dark; on light it washes status colors. */
html.light-mode .countdown-qualifier {
  opacity: 0.82;
}

/* Zone pills: dark ink on tinted wash (not washed teal-on-teal). */
html.light-mode .chrono-zone-badge {
  color: var(--text-primary);
  background: rgba(var(--green-rgb), 0.12);
  border-color: rgba(var(--green-rgb), 0.45);
}

html.light-mode .chrono-row.chrono-row--active .chrono-zone-badge {
  color: #0f766e;
  background: rgba(var(--green-rgb), 0.16);
  border-color: rgba(var(--green-rgb), 0.55);
}

html.light-mode .chrono-row.chrono-row--upcoming-soon .chrono-zone-badge {
  color: #854d0e;
  background: rgba(var(--yellow-rgb), 0.16);
  border-color: rgba(var(--yellow-rgb), 0.55);
}

html.light-mode .chrono-row.chrono-row--upcoming .chrono-zone-badge {
  color: #9a3412;
  background: rgba(var(--orange-rgb), 0.16);
  border-color: rgba(var(--orange-rgb), 0.55);
}

html.light-mode .chrono-now-pill {
  color: #0f766e;
  background: rgba(var(--green-rgb), 0.14);
  border-color: rgba(var(--green-rgb), 0.55);
}

html.light-mode .weather-history-overlay {
  background: rgba(17, 24, 39, 0.42);
}

html.light-mode .weather-history-modal {
  --wt-name: #000;
  --wt-when: #374151;
  --wt-date: #0d9488;
  --wt-rel: #1f2937;
  --wt-past-when: #4b5563;
  --wt-past-date: #0f766e;
  --wt-past-rel: #4b5563;

  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.18);
}

/* Weather names stay black; past-row opacity (style.css) provides the fade. */
html.light-mode .weather-timeline-weather .weather-name {
  color: #000;
}

html.light-mode footer {
  --footer-bg: #e8edf3;
  --footer-text: #4b5563;
  --footer-text-secondary: #1f2937;
  --footer-border: rgba(71, 85, 105, 0.4);
  --footer-switch-bg: #ffffff;
  --footer-accent: #0d9488;
}

/* Trackers / Chrono Lv. labels — muted grey, not near-black secondary */
html.light-mode .kill-row-level,
html.light-mode .chrono-row-level {
  color: var(--text-muted);
}

@media (max-width: 768px) {
  html.light-mode .weather-history-btn {
    border-color: rgba(71, 85, 105, 0.45);
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
  }

  html.light-mode .weather-history-btn:hover,
  html.light-mode .weather-history-btn:active {
    border-color: rgba(71, 85, 105, 0.7);
    background: var(--bg-card-hover);
  }
}

html.light-mode .settings-overlay {
  background: rgba(17, 24, 39, 0.42);
}

html.light-mode .settings-modal {
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.18);
}