:root,
:root[data-bs-theme="dark"],
[data-bs-theme="dark"] {
  --ai-black: #000000;
  --ai-temptress: #300011;
  --ai-rosewood: #650001;
  --ai-milano-red: #ca150c;
  --ai-white: #ffffff;
  --ai-border: rgba(202, 21, 12, 0.35);
  --ai-border-soft: rgba(255, 255, 255, 0.2);

  --bs-body-bg: var(--ai-black);
  --bs-body-color: var(--ai-white);
  --bs-primary: var(--ai-milano-red);
  --bs-primary-rgb: 202, 21, 12;
  --bs-border-color: var(--ai-border-soft);
  --bs-link-color: var(--ai-milano-red);
  --bs-link-hover-color: #ff5449;
}

html,
body {
  color-scheme: dark;
  background-color: var(--ai-black) !important;
  color: var(--ai-white) !important;
}

body {
  background-image:
    radial-gradient(1200px 700px at 8% 0%, rgba(101, 0, 1, 0.35), transparent 60%),
    radial-gradient(1200px 700px at 92% 0%, rgba(202, 21, 12, 0.2), transparent 62%);
  background-attachment: fixed;
}

a {
  color: var(--bs-link-color);
}

a:hover {
  color: var(--bs-link-hover-color);
}

.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.accordion-item,
.table,
pre,
code {
  background-color: var(--ai-temptress) !important;
  color: var(--ai-white) !important;
  border-color: var(--ai-border) !important;
}

.card-header,
.modal-header,
.modal-footer,
.offcanvas-header,
.offcanvas-body,
.table th,
.accordion-button,
.navbar,
.main-menu {
  background-color: var(--ai-rosewood) !important;
  color: var(--ai-white) !important;
  border-color: var(--ai-border) !important;
}

.btn-primary,
.btn-danger,
button,
input[type="submit"] {
  background-color: var(--ai-milano-red) !important;
  border-color: var(--ai-milano-red) !important;
  color: var(--ai-white) !important;
}

.btn-primary:hover,
.btn-danger:hover,
button:hover,
input[type="submit"]:hover {
  filter: brightness(1.08);
}

.btn-outline-secondary,
.btn-outline-light {
  border-color: var(--ai-border-soft) !important;
  color: var(--ai-white) !important;
}

.btn-outline-secondary:hover,
.btn-outline-light:hover {
  background-color: var(--ai-rosewood) !important;
  border-color: var(--ai-milano-red) !important;
}

.form-control,
.form-select,
textarea,
input[type="text"],
input[type="password"],
input[type="url"],
input[type="number"] {
  background-color: var(--ai-black) !important;
  color: var(--ai-white) !important;
  border-color: var(--ai-border-soft) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus {
  border-color: var(--ai-milano-red) !important;
  box-shadow: 0 0 0 0.2rem rgba(202, 21, 12, 0.2) !important;
}