/* ── Theme Variables (dark) ── */
:root {
  --bg-base:    #07091a;
  --bg-surface: #1e2544;
  --bg-elevated:#252d4e;
  --bg-card:    #2d3561;
  --border:     #3a4478;
  --border-soft:#252d4e;
  --accent:     #e8601c;
  --accent-dim: rgba(232,96,28,.15);
  --accent2:    #f6ce5c;
  --accent2-dim:rgba(246,206,92,.12);
  --success:    #16a34a;
  --danger:     #dc2626;
  --text-primary:#e8edf8;
  --text-secondary:#8b98c4;
  --text-muted:  #4a5280;
  --font-title: 'Oswald', sans-serif;
  --font-body:  'Josefin Sans', sans-serif;
  --font-mono:  'Josefin Sans', sans-serif;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow:     0 4px 24px rgba(0,0,0,.4);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.3);
}

/* ── Theme Variables (light) ── */
html[data-theme="light"] {
  --bg-base:    #f4f5f7;
  --bg-surface: #ffffff;
  --bg-elevated:#f0f2f8;
  --bg-card:    #ffffff;
  --border:     #cbd0e0;
  --border-soft:#e0e2e9;
  --accent:     #e8601c;
  --accent-dim: rgba(232,96,28,.1);
  --accent2:    #c94e14;
  --accent2-dim:rgba(201,78,20,.1);
  --success:    #16a34a;
  --danger:     #dc2626;
  --text-primary:#1e2544;
  --text-secondary:#3a4478;
  --text-muted:  #6b7280;
  --shadow:     0 4px 24px rgba(30,37,68,.1);
  --shadow-sm:  0 2px 8px rgba(30,37,68,.07);
}

/* ── Light mode component overrides ── */
html[data-theme="light"] .app-header {
  background: rgba(255,255,255,.96);
  border-bottom-color: var(--border);
}
html[data-theme="light"] .app-logo {
  color: var(--text-primary);
}
html[data-theme="light"] .header-status {
  color: var(--text-secondary);
}
html[data-theme="light"] .status-badge.idle {
  color: var(--text-muted);
  border-color: var(--text-muted);
}
html[data-theme="light"] .status-badge.ready {
  color: var(--success);
  border-color: var(--success);
}
html[data-theme="light"] .status-badge.loading {
  color: var(--accent);
  border-color: var(--accent);
}
html[data-theme="light"] .sidebar {
  box-shadow: 2px 0 12px rgba(30,37,68,.08);
}