.theme-light {
  --bg-primary: #ffffff;
  --bg-secondary: #f6f8fa;
  --bg-card: #ffffff;
  --bg-hover: #f3f4f6;
  --text-primary: #1f2328;
  --text-secondary: #656d76;
  --text-muted: #8b949e;
  --border-color: #d0d7de;
  --border-light: #e8eaed;
}

.theme-light .header {
  background: rgba(255, 255, 255, 0.9);
}

.theme-light .overall-card,
.theme-light .status-card,
.theme-light .incident-card {
  box-shadow: var(--shadow-sm);
}

.theme-system {
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  .theme-system {
    --bg-primary: #ffffff;
    --bg-secondary: #f6f8fa;
    --bg-card: #ffffff;
    --bg-hover: #f3f4f6;
    --text-primary: #1f2328;
    --text-secondary: #656d76;
    --text-muted: #8b949e;
    --border-color: #d0d7de;
    --border-light: #e8eaed;
    color-scheme: light;
  }

  .theme-system .header {
    background: rgba(255, 255, 255, 0.9);
  }

  .theme-system .overall-card,
  .theme-system .status-card,
  .theme-system .incident-card {
    box-shadow: var(--shadow-sm);
  }
}
.theme-ocean {
  --bg-primary: #0a1929;
  --bg-secondary: #0d2137;
  --bg-card: #11243a;
  --bg-hover: #153250;
  --text-primary: #e3f2fd;
  --text-secondary: #90caf9;
  --text-muted: #64748b;
  --border-color: #1e3a5f;
  --border-light: #1a3050;
  --accent-green: #4ade80;
  --accent-yellow: #fbbf24;
  --accent-orange: #fb923c;
  --accent-red: #f87171;
  --accent-blue: #60a5fa;
}

.theme-forest {
  --bg-primary: #0a1f0e;
  --bg-secondary: #0f2814;
  --bg-card: #14331a;
  --bg-hover: #1a3d22;
  --text-primary: #e0f2e2;
  --text-secondary: #a5d6a7;
  --text-muted: #6b8e6b;
  --border-color: #1e4620;
  --border-light: #1a3d1e;
  --accent-green: #66bb6a;
  --accent-yellow: #ffd54f;
  --accent-orange: #ffa726;
  --accent-red: #ef5350;
  --accent-blue: #42a5f5;
}.theme-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.813rem;
  cursor: pointer;
  transition: all var(--transition);
}
.theme-btn:hover { background: var(--bg-hover); }
.theme-btn.active { border-color: var(--accent-blue); background: rgba(88,166,255,0.1); }
.theme-picker { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 0; }
/* updated: 2026-07-15 11:36:50 */