:root {
  --primary: #314473;
  --primary-shade: #2b3c65;
  --primary-tint: #465781;

  --secondary: #f3c738;
  --secondary-shade: #d6af31;
  --secondary-tint: #f4cd4c;

  --tertiary: #5a6582;
  --success: #38a957;
  --warning: #f7b648;
  --danger: #c5000f;

  --light-bg: #f6f8fc;
  --light-surface: #ffffff;
  --light-code-bg: #e6e9f2;

  --dark-bg: #222222;
  --dark-surface: #2e2e2e;
  --dark-code-bg: #333840;

  --light-text: #222222;
  --dark-text: #ffffff;
}

/* ===== LIGHT MODE STYLES ===== */
body:not(.dark) {
  background-color: var(--light-bg);
  color: var(--light-text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body:not(.dark) a {
  color: var(--primary);
}
body:not(.dark) a:hover {
  color: var(--primary-tint);
}

body:not(.dark) h1,
body:not(.dark) h2,
body:not(.dark) h3 {
  color: var(--primary-shade);
}

body:not(.dark) nav.nav-sidebar {
  background-color: var(--primary-shade);
  color: var(--light-bg);
}
body:not(.dark) nav.nav-sidebar a {
  color: var(--light-bg);
}
body:not(.dark) nav.nav-sidebar a:hover,
body:not(.dark) nav.nav-sidebar a.active {
  background-color: var(--primary-tint);
}

body:not(.dark) button.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary-shade);
  color: var(--light-bg);
}
body:not(.dark) button.btn-primary:hover {
  background-color: var(--primary-tint);
}

body:not(.dark) table thead {
  background-color: var(--primary-shade);
  color: var(--light-bg);
}
body:not(.dark) table tbody tr:nth-child(even) {
  background-color: var(--light-bg);
}
body:not(.dark) table tbody tr:nth-child(odd) {
  background-color: #f0f3f8;
}

body:not(.dark) pre,
body:not(.dark) code {
  background-color: var(--light-code-bg);
  color: var(--light-text);
}

body:not(.dark) span.badge {
  background-color: var(--secondary);
  color: var(--light-text);
}

body:not(.dark) hr,
body:not(.dark) .bordered {
  border-color: var(--primary-shade);
}

/* ===== DARK MODE STYLES ===== */
body.dark {
  background-color: var(--dark-bg);
  color: var(--dark-text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body.dark a {
  color: var(--secondary);
}
body.dark a:hover {
  color: var(--secondary-tint);
}

body.dark h1,
body.dark h2,
body.dark h3 {
  color: var(--secondary-shade);
}

body.dark nav.nav-sidebar {
  background-color: var(--dark-surface);
  color: var(--dark-text);
}
body.dark nav.nav-sidebar a {
  color: var(--dark-text);
}
body.dark nav.nav-sidebar a:hover,
body.dark nav.nav-sidebar a.active {
  background-color: var(--secondary);
  color: var(--dark-bg);
}

body.dark button.btn-primary {
  background-color: var(--secondary-shade);
  border-color: var(--secondary);
  color: var(--dark-bg);
}
body.dark button.btn-primary:hover {
  background-color: var(--secondary);
  color: var(--dark-bg);
}

body.dark table thead {
  background-color: var(--dark-surface);
  color: var(--dark-text);
}
body.dark table tbody tr:nth-child(even) {
  background-color: var(--dark-bg);
}
body.dark table tbody tr:nth-child(odd) {
  background-color: #2c2c2c;
}

body.dark pre,
body.dark code {
  background-color: var(--dark-code-bg);
  color: var(--secondary);
}

body.dark span.badge {
  background-color: var(--secondary-tint);
  color: var(--dark-bg);
}

body.dark hr,
body.dark .bordered {
  border-color: var(--secondary);
}

/* ===== SCROLLBAR STYLES (optional) ===== */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--light-bg);
}
::-webkit-scrollbar-thumb {
  background-color: var(--primary-shade);
  border-radius: 4px;
}
/* ==== Fix Compodoc's hardcoded light backgrounds in dark mode ==== */
body.dark .bg-light,
body.dark .card,
body.dark .code,
body.dark pre,
body.dark code,
body.dark .token,
body.dark .label,
body.dark .text-muted,
body.dark .table td,
body.dark .table th {
  background-color: var(--dark-surface) !important;
  color: var(--dark-text) !important;
  border-color: #444 !important;
}

/* Fix badges in dark mode */
body.dark span.label,
body.dark span.badge {
  background-color: var(--secondary-tint);
  color: var(--dark-bg);
}

/* Fix input and tabs if needed */
body.dark .nav-tabs .nav-link,
body.dark .form-control {
  background-color: var(--dark-bg);
  color: var(--dark-text);
  border-color: #444;
}

/* Tables that still use odd/even striping */
body.dark table tbody tr:nth-child(even) {
  background-color: #292929 !important;
}
body.dark table tbody tr:nth-child(odd) {
  background-color: #1f1f1f !important;
}