/* ---------- Themes ---------- */

:root {
  --bg: #0f1117;
  --surface: #1e2130;
  --surface-hover: #1a1d2e;
  --border: #2d3148;
  --border-subtle: #1a1d2e;
  --text: #e2e8f0;
  --text-strong: #f1f5f9;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --text-faint: #475569;
  --accent: #6366f1;

  --status-ok-bg: #052e16;
  --status-ok-border: #166534;
  --status-outage-bg: #2d0a0a;
  --status-outage-border: #7f1d1d;
  --status-warn-bg: #1c1400;
  --status-warn-border: #854d0e;
  --status-unknown-bg: #1c1917;
  --status-unknown-border: #44403c;

  --tag-confirmed-bg: #7f1d1d;
  --tag-confirmed-fg: #fecaca;
  --tag-inferred-bg: #44403c;
  --tag-inferred-fg: #d6d3d1;

  --warning-bg: #1c1400;
  --warning-border: #854d0e;
  --warning-fg: #fbbf24;

  --footer: #334155;
  --backdrop: rgba(0, 0, 0, 0.6);

  --map-default: #1a1d2e;
  --map-stroke: #2d3148;
  --map-on: #166534;
  --map-off: #991b1b;
  --map-unknown: #57534e;
  --history-seg: #991b1b;
}

[data-theme="light"] {
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-hover: #f1f5f9;
  --border: #cbd5e1;
  --border-subtle: #e2e8f0;
  --text: #334155;
  --text-strong: #0f172a;
  --text-muted: #475569;
  --text-subtle: #64748b;
  --text-faint: #94a3b8;
  --accent: #4f46e5;

  --status-ok-bg: #dcfce7;
  --status-ok-border: #86efac;
  --status-outage-bg: #fee2e2;
  --status-outage-border: #fca5a5;
  --status-warn-bg: #fef3c7;
  --status-warn-border: #fcd34d;
  --status-unknown-bg: #f1f5f9;
  --status-unknown-border: #cbd5e1;

  --tag-confirmed-bg: #fecaca;
  --tag-confirmed-fg: #7f1d1d;
  --tag-inferred-bg: #e7e5e4;
  --tag-inferred-fg: #44403c;

  --warning-bg: #fef3c7;
  --warning-border: #fcd34d;
  --warning-fg: #92400e;

  --footer: #94a3b8;
  --backdrop: rgba(15, 23, 42, 0.4);

  --map-default: #cbd5e1;
  --map-stroke: #64748b;
  --map-on: #15803d;
  --map-off: #b91c1c;
  --map-unknown: #94a3b8;
  --history-seg: #dc2626;
}

[data-theme="amoled"] {
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-hover: #141414;
  --border: #262626;
  --border-subtle: #141414;
  --text: #e5e5e5;
  --text-strong: #ffffff;
  --text-muted: #a3a3a3;
  --text-subtle: #737373;
  --text-faint: #525252;
  --accent: #818cf8;

  --status-ok-bg: #001a08;
  --status-ok-border: #166534;
  --status-outage-bg: #1a0000;
  --status-outage-border: #b91c1c;
  --status-warn-bg: #1a1100;
  --status-warn-border: #a16207;
  --status-unknown-bg: #0a0a0a;
  --status-unknown-border: #404040;

  --tag-confirmed-bg: #7f1d1d;
  --tag-confirmed-fg: #fecaca;
  --tag-inferred-bg: #262626;
  --tag-inferred-fg: #d4d4d4;

  --warning-bg: #1a1100;
  --warning-border: #a16207;
  --warning-fg: #fbbf24;

  --footer: #525252;
  --backdrop: rgba(0, 0, 0, 0.8);

  --map-default: #141414;
  --map-stroke: #262626;
  --map-on: #15803d;
  --map-off: #b91c1c;
  --map-unknown: #404040;
  --history-seg: #b91c1c;
}

/* Light-theme elevation: surfaces need shadow to separate from bg */
[data-theme="light"] .status-banner,
[data-theme="light"] .device-card,
[data-theme="light"] .location-card,
[data-theme="light"] .history-grid,
[data-theme="light"] .map-container,
[data-theme="light"] .modal {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.07);
}
[data-theme="light"] .location-card:hover {
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.18);
}