:root {
  --bg: #050816;
  --bg-alt: #0b1020;
  --card-bg: #111827;
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.2);
  --text-main: #f9fafb;
  --text-muted: #9ca3af;
  --border-subtle: #1f2937;
  --radius-lg: 18px;
  --shadow-soft: 0 18px 35px rgba(0, 0, 0, 0.5);
  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #22c55e;
  --icon-color: #111827;
}

body.theme-light {
  --bg: #f3f4f6;
  --bg-alt: #ffffff;
  --card-bg: #ffffff;
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.12);
  --text-main: #111827;
  --text-muted: #374151;
  --border-subtle: #e5e7eb;
  --shadow-soft: 0 12px 24px rgba(15, 23, 42, 0.08);
  --danger: #b91c1c;
  --warning: #b45309;
  --success: #15803d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #111827 0, #020617 60%);
  color: var(--text-main);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

body.theme-light {
  background: #e5e7eb;
}

/* ------------------------------------------
   GLOBAL IMPROVEMENTS
------------------------------------------- */

body.theme-dark {
    background: #1b1e24;
    color: #e0e0e0;
}

/* Panels */
.theme-dark .details-panel,
.theme-dark .system-card {
    background: #262a31;
    color: #f0f0f0;
}

.theme-light .details-panel,
.theme-light .system-card {
    background: #ffffff;
    color: #222;
}

/* Buttons in Light Mode (contrast fix) */
/* Light mode – neutral buttons ONLY */
.theme-light .btn-ghost,
.theme-light .btn-secondary,
.theme-light .settings-btn {
    background-color: #e5e7eb;
    color: #111827;
    border: 1px solid #d1d5db;
}

.theme-light .btn-ghost:hover,
.theme-light .btn-secondary:hover,
.theme-light .settings-btn:hover {
    background-color: #d1d5db;
}


.theme-light .btn:hover,
.theme-light .toggle-btn:hover,
.theme-light .settings-btn:hover {
    background-color: #666 !important;
}

/* Force search input text to always be white */
.search-input {
    color: #ffffff !important;
}

/* Ensure placeholder text is also visible */
.search-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================
   LIGHT MODE — ICON & PILL CONTRAST FIX
   ============================================================ */
body.theme-light {
  --text-muted: #374151;          /* darker muted text */
  --icon-muted: #1f2937;          /* if defined elsewhere */
  --accent-soft: rgba(37, 99, 235, 0.18);
  --border-subtle: #cbd5e1;
}