/* ========== Dark Theme Overrides ========== */
:root {
  --white: 0 0% 100%;
  --black: 0 0% 0%;
  --heading-color: 0 0% 100%;
  --body-color: 0 0% 85%;
  --body-bg: 0 0% 0%;
  --footer-bg: 220 10% 8%;
  --section-bg: 220 12% 12%;
  --bg-color-two: 220 10% 10%;
  --border-color: 0 0% 25%;
  --border: 0 0% 20%;

  --base-h: 217;
  --base-s: 100%;
  --base-l: 65%;
  --base-two-h: 247;
  --base-two-s: 64%;
  --base-two-l: 45%;

  --primary-h: 220;
  --primary-s: 100%;
  --primary-l: 60%;
  --success-h: 145;
  --success-s: 70%;
  --success-l: 55%;
  --danger-h: 0;
  --danger-s: 80%;
  --danger-l: 60%;
  --warning-h: 38;
  --warning-s: 100%;
  --warning-l: 55%;
  --info-h: 196;
  --info-s: 100%;
  --info-l: 60%;
  --dark-h: 220;
  --dark-s: 10%;
  --dark-l: 15%;
}

body {
  background-color: hsl(var(--body-bg));
  color: hsl(var(--body-color));
}

.section-bg,
.section-bg-two,
.custom--card,
.custom--accordion .accordion-body,
.custom--accordion .accordion-button,
.form--control,
.modal-content,
.table thead tr th,
.table tbody {
  background-color: hsl(var(--section-bg)) !important;
  color: hsl(var(--body-color));
}

.btn,
.btn--base,
.btn--primary,
.btn--secondary,
.btn--success,
.btn--danger,
.btn--warning,
.btn--info,
.btn--dark {
  color: hsl(var(--white)) !important;
}

a {
  color: hsl(var(--primary));
}

a:hover {
  color: hsl(var(--base));
}

input,
textarea,
select {
  background-color: hsl(var(--bg-color-two)) !important;
  color: hsl(var(--white)) !important;
  border: 1px solid hsl(var(--border-color)) !important;
}

input::placeholder,
textarea::placeholder {
  color: hsl(var(--white) / 0.6) !important;
}

.table thead tr th,
.table tbody tr td {
  border-color: hsl(var(--border-color)) !important;
}