:root {
  /* Base */
  --bg:            #f8fafc;  /* slate-50 */
  --surface:       #ffffff;  /* cards, tables, modals */
  --surface-2:     #f1f5f9;  /* slate-100 */
  --text:          #0f172a;  /* slate-900 */
  --text-muted:    #475569;  /* slate-600 */

  /* Brand */
  --primary:       #2563eb;  /* blue-600 */
  --primary-700:   #1d4ed8;
  --primary-800:   #1e40af;
  --primary-50:    #eff6ff;

  /* Feedback */
  --accent:        #22c55e;  /* green-500 */
  --warning:       #f59e0b;  /* amber-500 */
  --danger:        #ef4444;  /* red-500 */

  /* Lines / Dividers / Fills */
  --border:        #e2e8f0;  /* slate-200 */
  --border-strong: #cbd5e1;  /* slate-300 */
  --ring:          #a5b4fc;  /* indigo-300 focus ring */
  --shadow:        0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.06);

  /* Tables */
  --th-bg:         #f8fafc;
  --th-text:       #0f172a;
  --tr-alt:        #f9fafb;

  /* Buttons */
  --btn-text:      #0b1220;
  --btn-bg:        #e2e8f0;
  --btn-bg-hover:  #dbe2ea;

  /* Inputs */
  --input-bg:      #ffffff;
  --input-text:    #0f172a;
  --input-ph:      #64748b;
}

/* Optional dark mode that respects the OS setting */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0b1220; /* near-slate-950 */
    --surface:       #0f172a; /* slate-900 */
    --surface-2:     #111827; /* gray-900 */
    --text:          #e5e7eb; /* gray-200 */
    --text-muted:    #9ca3af; /* gray-400 */

    --primary:       #60a5fa; /* blue-400 */
    --primary-700:   #3b82f6;
    --primary-800:   #2563eb;
    --primary-50:    #0b1220;

    --accent:        #34d399; /* emerald-400 */
    --warning:       #fbbf24; /* amber-400 */
    --danger:        #f87171; /* red-400 */

    --border:        #1f2937; /* gray-800 */
    --border-strong: #374151; /* gray-700 */
    --ring:          #818cf8; /* indigo-400 */
    --shadow:        0 1px 2px rgba(0,0,0,0.25), 0 6px 24px rgba(0,0,0,0.35);

    --th-bg:         #0f172a;
    --th-text:       #e5e7eb;
    --tr-alt:        #0c1426;

    --btn-text:      #e5e7eb;
    --btn-bg:        #1f2937;
    --btn-bg-hover:  #273041;

    --input-bg:      #0f172a;
    --input-text:    #e5e7eb;
    --input-ph:      #9ca3af;
  }
}

/* ---------- Base surfaces ---------- */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

body, .card, .panel, .sheet, .modal, .drawer, .dropdown, .menu, .chip, .tag {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

hr, .divider {
  border: 0;
  border-top: 1px solid var(--border);
}

/* ---------- Links ---------- */
a {
  color: var(--primary);
  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
a:hover { color: var(--primary-700); }
a:active { color: var(--primary-800); }

/* ---------- Buttons ---------- */
.btn {
  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 8px 12px;
  line-height: 1.2;
  box-shadow: var(--shadow);
  transition: background .15s ease, border-color .15s ease, transform .02s ease-in-out;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring);
}

.btn.primary {
  background: var(--primary);
  color: #fff;
  border-color: color-mix(in srgb, var(--primary) 70%, #000 0%);
}
.btn.primary:hover { background: var(--primary-700); }
.btn.primary:active { background: var(--primary-800); }

.btn.success { background: var(--accent); color: #062a12; border-color: transparent; }
.btn.warning { background: var(--warning); color: #231803; border-color: transparent; }
.btn.danger  { background: var(--danger);  color: #fff;      border-color: transparent; }

/* Icon-only buttons / subtle */
.btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}
.btn.ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* ---------- Inputs, Selects, Textareas ---------- */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="datetime-local"],
select,
textarea {
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 10px !important;
  outline: none !important;
  box-shadow: none;
}
input::placeholder, textarea::placeholder { color: var(--input-ph); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--ring);
  border-color: var(--primary);
}

/* ---------- Tables ---------- */
table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

thead th {
  background: var(--th-bg) !important;
  color: var(--th-text) !important;
  border-bottom: 1px solid var(--border-strong);
}

tbody tr {
  border-bottom: 1px solid var(--border);
}
tbody tr:nth-child(even) {
  background: var(--tr-alt);
}
tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

td, th {
  border-right: 1px solid var(--border);
}
td:last-child, th:last-child { border-right: 0; }

/* Virtual header & rows if you use .vhead/.vrow */
#table-viewport .vhead {
  background: var(--th-bg);
  color: var(--th-text);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: 0 1px 0 var(--border);
}
#table-viewport .vrow {
  border-bottom: 1px solid var(--border);
}
#table-viewport .vrow:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

/* ---------- Chips / Tags / Badges ---------- */
.tag, .chip, .badge {
  background: var(--primary-50);
  color: var(--primary-800);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.4;
}

/* ---------- Alerts ---------- */
.alert {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
}
.alert.success { border-left-color: var(--accent); }
.alert.warning { border-left-color: var(--warning); }
.alert.danger  { border-left-color: var(--danger);  }

/* ---------- Modals / Overlays ---------- */
.modal, #desc-sheet {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(2, 6, 23, 0.35);
}
.modal-backdrop, #desc-sheet-backdrop, .overlay {
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: saturate(120%) blur(2px);
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

/* ---------- Focus visible utility ---------- */
:where(button, [role="button"], a, input, select, textarea):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ring);
}

/* ---------- Subtle separators ---------- */
.section-title, .subtle-divider {
  border-bottom: 1px solid var(--border);
}

/* ---------- Utility ---------- */
.muted { color: var(--text-muted) !important; }
.link-muted { color: var(--text-muted); text-decoration: underline; }
.elevated { box-shadow: var(--shadow); }

/* ---------- High-contrast states for accessibility ---------- */
@media (forced-colors: active) {
  * { forced-color-adjust: auto; }
  a, .btn.primary { outline: 2px solid; }
}