: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;

  /* ── Spacing scale (4px base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ── Type scale ── */
  --text-xs:   0.7rem;
  --text-sm:   0.8rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;

  /* ── Glassmorphism surface system ── */
  --glass-bg:        rgba(255, 255, 255, 0.04);
  --glass-bg-hover:  rgba(255, 255, 255, 0.07);
  --glass-border:    rgba(255, 255, 255, 0.08);
  --glass-blur:      blur(14px);
  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.45);

  /* ── Row selected-state tokens ── */
  --row-selected-bg:     rgba(59, 130, 246, 0.17);
  --row-selected-border: rgba(59, 130, 246, 0.40);
  --row-selected-shadow: 0 2px 12px rgba(59, 130, 246, 0.22);
  --row-selected-rail:   #3b82f6;
  --row-selected-bg-hover:     rgba(59, 130, 246, 0.26);
  --row-selected-border-hover: rgba(59, 130, 246, 0.52);
  --row-selected-shadow-hover: 0 3px 16px rgba(59, 130, 246, 0.30);
}

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;

  /* Light-mode glass: frosted-white interpretation */
  --glass-bg:        rgba(255, 255, 255, 0.72);
  --glass-bg-hover:  rgba(255, 255, 255, 0.88);
  --glass-border:    rgba(15, 23, 42, 0.12);
  --glass-blur:      blur(10px);
  --glass-shadow:    0 4px 18px rgba(15, 23, 42, 0.10);

  /* Row selected-state tokens — light mode */
  --row-selected-bg:     rgba(37, 99, 235, 0.11);
  --row-selected-border: rgba(37, 99, 235, 0.32);
  --row-selected-shadow: 0 2px 8px rgba(37, 99, 235, 0.16);
  --row-selected-rail:   #2563eb;
  --row-selected-bg-hover:     rgba(37, 99, 235, 0.18);
  --row-selected-border-hover: rgba(37, 99, 235, 0.46);
  --row-selected-shadow-hover: 0 3px 14px rgba(37, 99, 235, 0.24);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(59, 130, 246, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(34, 197, 94, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, #0b1120 0%, #020617 100%);
  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:not(.btn-primary):not(.btn-danger):hover,
.theme-light .toggle-btn:hover,
.theme-light .settings-btn:hover {
    background-color: #dbe4f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1;
}

/* 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;
}