:root {
  --bs-body-bg: var(--body-bg);
  --bs-body-color: var(--text-color);
  --bs-primary: var(--bg-primary);
  --bs-secondary: var(--bg-secondary);
  --bs-border-color: color-mix(in srgb, var(--text-color) 14%, transparent);
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-secondary);
  --bs-card-bg: var(--bg-color);
  --bs-card-color: var(--text-color);
  --bs-heading-color: var(--text-color);
  --bs-tertiary-bg: var(--body-bg-alt);
  --bs-emphasis-color: var(--text-color);

  --theme-border-soft: color-mix(in srgb, var(--text-color) 14%, transparent);
  --theme-border-mid: color-mix(in srgb, var(--text-color) 24%, transparent);
  --theme-muted: color-mix(in srgb, var(--text-color) 65%, transparent);
  --theme-primary-soft: color-mix(in srgb, var(--bs-primary) 15%, transparent);
}

html,
body {
  background: var(--body-bg);
  color: var(--text-color);
}

a {
  color: var(--bs-primary);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--bs-secondary);
}

/* Text */

.text-muted,
.small.text-muted,
.form-text {
  color: var(--theme-muted) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-body {
  color: var(--text-color) !important;
}

/* Backgrounds */

.bg-primary {
  background: var(--bg-gradient) !important;
  color: #fff !important;
}

.bg-primary * {
  color: inherit;
}

.bg-secondary {
  background: var(--bs-secondary) !important;
  color: #fff !important;
}

.bg-body,
.bg-light,
.bg-white {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

.bg-body-secondary,
.bg-body-tertiary {
  background-color: var(--body-bg-alt) !important;
  color: var(--text-color) !important;
}

.bg-dark {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* Cards */

.card {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: var(--theme-border-soft);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.08);
}

.card-header,
.card-footer {
  background: color-mix(in srgb, var(--body-bg-alt) 85%, var(--bg-color));
  border-color: color-mix(in srgb, var(--text-color) 10%, transparent);
  color: var(--text-color);
}

/* Buttons */

.btn {
  border-radius: 0.75rem;
  font-weight: 600;
}

.btn:focus-visible {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 26%, transparent);
}

.btn-primary {
  color: #fff !important;
  background: var(--bg-gradient) !important;
  border-color: var(--bs-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff !important;
  background: var(--bg-gradient-reverse) !important;
  border-color: var(--bs-secondary) !important;
}

.btn-secondary {
  color: #fff !important;
  background: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff !important;
  background: var(--bg-secondary-alt) !important;
  border-color: var(--bg-secondary-alt) !important;
}

.btn-outline-primary {
  color: var(--bs-primary) !important;
  background: transparent !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff !important;
  background: var(--bg-gradient) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-secondary {
  color: var(--bs-secondary) !important;
  background: transparent !important;
  border-color: var(--bs-secondary) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff !important;
  background: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

/* Light buttons should be true light buttons, not dark theme surfaces */

.btn-light {
  color: #111 !important;
  background: #fff !important;
  border-color: #fff !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.active,
.show > .btn-light.dropdown-toggle {
  color: #111 !important;
  background: color-mix(in srgb, #fff 84%, var(--bs-primary)) !important;
  border-color: color-mix(in srgb, #fff 84%, var(--bs-primary)) !important;
}

.btn-outline-light {
  color: #dfdfdf!important;
  background: transparent !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active,
.btn-outline-light.active,
.show > .btn-outline-light.dropdown-toggle {
  color: #fff !important;
  background: var(--bg-gradient) !important;
  border-color: var(--bs-primary) !important;
}

.btn-dark {
  color: var(--text-color) !important;
  background: var(--bg-color) !important;
  border-color: var(--theme-border-mid) !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.active,
.show > .btn-dark.dropdown-toggle {
  color: var(--text-color) !important;
  background: color-mix(in srgb, var(--bg-color) 82%, var(--text-color)) !important;
  border-color: var(--theme-border-mid) !important;
}

.btn-outline-dark {
  color: var(--text-color) !important;
  background: transparent !important;
  border-color: var(--theme-border-mid) !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark.active,
.show > .btn-outline-dark.dropdown-toggle {
  color: var(--bg-color) !important;
  background: var(--text-color) !important;
  border-color: var(--text-color) !important;
}

/* Forms */

.form-control,
.form-select {
  background-color: var(--body-bg-alt);
  color: var(--text-color);
  border-color: var(--theme-border-soft);
  border-radius: 0.75rem;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--body-bg-alt);
  color: var(--text-color);
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 22%, transparent);
}

.form-control::placeholder {
  color: color-mix(in srgb, var(--text-color) 48%, transparent);
}

.input-group-text {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: var(--theme-border-soft);
}

/* Tables */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-color);
  --bs-table-border-color: color-mix(in srgb, var(--text-color) 10%, transparent);
  color: var(--text-color);
}

.table > :not(caption) > * > * {
  color: var(--text-color);
  border-color: color-mix(in srgb, var(--text-color) 10%, transparent);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: color-mix(in srgb, var(--body-bg-alt) 80%, transparent);
  color: var(--text-color);
}

.table-hover > tbody > tr:hover > * {
  background-color: color-mix(in srgb, var(--bs-primary) 10%, transparent);
  color: var(--text-color);
}

/* Dropdowns */

.dropdown-menu {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: var(--theme-border-soft);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.16);
}

.dropdown-header {
  color: var(--bs-primary);
}

.dropdown-item {
  color: var(--text-color);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background: var(--theme-primary-soft);
  color: var(--text-color);
}

.dropdown-divider {
  border-color: color-mix(in srgb, var(--text-color) 10%, transparent);
}

/* Navs */

.nav-link {
  color: color-mix(in srgb, var(--text-color) 78%, transparent);
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--bs-primary);
}

.nav-tabs {
  border-color: var(--theme-border-soft);
}

.nav-tabs .nav-link.active {
  background: var(--bg-color);
  color: var(--bs-primary);
  border-color: var(--theme-border-soft);
}

/* Navbar */

.navbar:not(.navbar-dark) {
  background: var(--bg-color);
  color: var(--text-color);
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
}

.navbar:not(.navbar-dark) .navbar-brand,
.navbar:not(.navbar-dark) .navbar-nav .nav-link {
  color: var(--text-color);
}

.navbar:not(.navbar-dark) .navbar-nav .nav-link:hover,
.navbar:not(.navbar-dark) .navbar-nav .nav-link.active {
  color: var(--bs-primary);
}

/* Alerts */

.alert {
  border-radius: 1rem;
  border-color: transparent;
}

.alert-primary {
  background: color-mix(in srgb, var(--bs-primary) 18%, var(--bg-color));
  color: var(--text-color);
}

.alert-secondary {
  background: color-mix(in srgb, var(--bs-secondary) 18%, var(--bg-color));
  color: var(--text-color);
}

.alert-light {
  background: #fff;
  color: #111;
  border-color: color-mix(in srgb, #000 10%, transparent);
}

.alert-dark {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: var(--theme-border-soft);
}

/* Badges */

.badge {
  font-weight: 700;
}

.text-bg-primary,
.badge.bg-primary {
  background: var(--bg-gradient) !important;
  color: #fff !important;
}

.text-bg-secondary,
.badge.bg-secondary {
  background: var(--bs-secondary) !important;
  color: #fff !important;
}

.text-bg-light {
  background: #fff !important;
  color: #111 !important;
}

.text-bg-dark {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
}

/* Modals */

.modal-content {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: var(--theme-border-soft);
  border-radius: 1.25rem;
}

.modal-header,
.modal-footer {
  border-color: color-mix(in srgb, var(--text-color) 10%, transparent);
}

/* List groups */

.list-group-item {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: color-mix(in srgb, var(--text-color) 10%, transparent);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
  color: var(--text-color);
}

.list-group-item.active {
  background: var(--bg-gradient);
  border-color: var(--bs-primary);
  color: #fff;
}

/* Pagination */

.page-link {
  background: var(--bg-color);
  color: var(--bs-primary);
  border-color: var(--theme-border-soft);
}

.page-link:hover,
.page-link:focus {
  background: color-mix(in srgb, var(--bs-primary) 12%, var(--bg-color));
  color: var(--bs-secondary);
}

.page-item.active .page-link {
  background: var(--bg-gradient);
  border-color: var(--bs-primary);
  color: #fff;
}

.page-item.disabled .page-link {
  background: var(--body-bg-alt);
  color: color-mix(in srgb, var(--text-color) 42%, transparent);
  border-color: var(--theme-border-soft);
}

/* Accordion */

.accordion {
  --bs-accordion-bg: var(--bg-color);
  --bs-accordion-color: var(--text-color);
  --bs-accordion-border-color: color-mix(in srgb, var(--text-color) 10%, transparent);
  --bs-accordion-active-bg: color-mix(in srgb, var(--bs-primary) 12%, var(--bg-color));
  --bs-accordion-active-color: var(--text-color);
  --bs-accordion-btn-color: var(--text-color);
  --bs-accordion-btn-focus-border-color: var(--bs-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 22%, transparent);
}

/* Toasts */

.toast {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: var(--theme-border-soft);
}

.toast-header {
  background: color-mix(in srgb, var(--body-bg-alt) 85%, var(--bg-color));
  color: var(--text-color);
  border-color: color-mix(in srgb, var(--text-color) 10%, transparent);
}

/* Progress */

.progress {
  background: color-mix(in srgb, var(--text-color) 12%, transparent);
}

.progress-bar {
  background: var(--bg-gradient);
}

/* Breadcrumb */

.breadcrumb-item,
.breadcrumb-item a {
  color: color-mix(in srgb, var(--text-color) 70%, transparent);
}

.breadcrumb-item.active {
  color: var(--text-color);
}

/* Close button */

.btn-close {
  opacity: 0.75;
}

.btn-close:hover,
.btn-close:focus {
  opacity: 1;
}

/* Utilities */

.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
  border-color: var(--theme-border-soft) !important;
}

.shadow-sm,
.shadow,
.shadow-lg {
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.12) !important;
}

hr {
  border-color: color-mix(in srgb, var(--text-color) 12%, transparent);
  opacity: 1;
}

/* Theme helper classes */

.theme-surface {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
}

.theme-surface-alt {
  background: var(--body-bg-alt) !important;
  color: var(--text-color) !important;
}

.theme-primary-surface {
  background: var(--bg-gradient) !important;
  color: #fff !important;
}

.theme-muted {
  color: var(--theme-muted) !important;
}
/* Bootstrap component extensions
   Added to cover Bootstrap elements not already themed above. */

/* Core Bootstrap semantic variables */

:root {
  --bs-success: color-mix(in srgb, #198754 70%, var(--bs-primary));
  --bs-info: color-mix(in srgb, #0dcaf0 64%, var(--bs-primary));
  --bs-warning: var(--bs-primary);
  --bs-danger: color-mix(in srgb, #dc3545 82%, var(--bs-secondary));
  --bs-success-bg-subtle: color-mix(in srgb, #198754 16%, var(--bg-color));
  --bs-info-bg-subtle: color-mix(in srgb, #0dcaf0 16%, var(--bg-color));
  --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-primary) 18%, var(--bg-color));
  --bs-danger-bg-subtle: color-mix(in srgb, #dc3545 18%, var(--bg-color));
  --bs-success-border-subtle: color-mix(in srgb, #198754 42%, transparent);
  --bs-info-border-subtle: color-mix(in srgb, #0dcaf0 42%, transparent);
  --bs-warning-border-subtle: color-mix(in srgb, var(--bs-primary) 45%, transparent);
  --bs-danger-border-subtle: color-mix(in srgb, #dc3545 45%, transparent);
  --bs-success-text-emphasis: color-mix(in srgb, #198754 72%, var(--text-color));
  --bs-info-text-emphasis: color-mix(in srgb, #0dcaf0 72%, var(--text-color));
  --bs-warning-text-emphasis: color-mix(in srgb, var(--bs-primary) 72%, var(--text-color));
  --bs-danger-text-emphasis: color-mix(in srgb, #dc3545 78%, var(--text-color));
  --bs-code-color: var(--bs-primary);
  --bs-highlight-bg: color-mix(in srgb, var(--bs-primary) 24%, transparent);
  --bs-highlight-color: var(--text-color);
}

/* Selection and scrollbars */

::selection {
  background: color-mix(in srgb, var(--bs-primary) 34%, transparent);
  color: var(--text-color);
}

* {
  scrollbar-color: color-mix(in srgb, var(--bs-primary) 70%, var(--body-bg-alt)) var(--body-bg-alt);
}

::-webkit-scrollbar {
  width: 0.85rem;
  height: 0.85rem;
}

::-webkit-scrollbar-track {
  background: var(--body-bg-alt);
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--bs-primary) 70%, var(--body-bg-alt));
  border: 0.2rem solid var(--body-bg-alt);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bs-primary);
}

/* Typography and content */

mark,
.mark {
  background: var(--bs-highlight-bg);
  color: var(--bs-highlight-color);
  border-radius: 0.35rem;
  padding: 0.05em 0.25em;
}

code,
kbd,
pre,
samp {
  color: var(--bs-code-color);
}

pre {
  background: var(--body-bg-alt);
  border: 1px solid var(--theme-border-soft);
  border-radius: 1rem;
  color: var(--text-color);
  padding: 1rem;
}

kbd {
  background: var(--bg-color);
  border: 1px solid var(--theme-border-mid);
  box-shadow: inset 0 -0.1rem 0 color-mix(in srgb, #000 18%, transparent);
}

.blockquote-footer {
  color: var(--theme-muted);
}

.figure-caption {
  color: var(--theme-muted);
}

/* Buttons: semantic variants not covered above */

.btn-success {
  color: #fff !important;
  background: color-mix(in srgb, #198754 78%, var(--bs-primary)) !important;
  border-color: color-mix(in srgb, #198754 78%, var(--bs-primary)) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.show > .btn-success.dropdown-toggle {
  color: #fff !important;
  background: color-mix(in srgb, #198754 64%, var(--bs-secondary)) !important;
  border-color: color-mix(in srgb, #198754 64%, var(--bs-secondary)) !important;
}

.btn-info {
  color: #111 !important;
  background: color-mix(in srgb, #0dcaf0 76%, var(--bs-primary)) !important;
  border-color: color-mix(in srgb, #0dcaf0 76%, var(--bs-primary)) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.show > .btn-info.dropdown-toggle {
  color: #111 !important;
  background: color-mix(in srgb, #0dcaf0 64%, var(--bs-secondary)) !important;
  border-color: color-mix(in srgb, #0dcaf0 64%, var(--bs-secondary)) !important;
}

.btn-warning {
  color: #111 !important;
  background: var(--bg-gradient) !important;
  border-color: var(--bs-primary) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.show > .btn-warning.dropdown-toggle {
  color: #111 !important;
  background: var(--bg-gradient-reverse) !important;
  border-color: var(--bs-secondary) !important;
}

.btn-danger {
  color: #fff !important;
  background: color-mix(in srgb, #dc3545 84%, var(--bs-secondary)) !important;
  border-color: color-mix(in srgb, #dc3545 84%, var(--bs-secondary)) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle {
  color: #fff !important;
  background: color-mix(in srgb, #dc3545 72%, var(--bg-secondary-alt)) !important;
  border-color: color-mix(in srgb, #dc3545 72%, var(--bg-secondary-alt)) !important;
}

.btn-outline-success {
  color: color-mix(in srgb, #198754 82%, var(--text-color)) !important;
  background: transparent !important;
  border-color: color-mix(in srgb, #198754 76%, var(--bs-primary)) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active,
.show > .btn-outline-success.dropdown-toggle {
  color: #fff !important;
  background: color-mix(in srgb, #198754 78%, var(--bs-primary)) !important;
  border-color: color-mix(in srgb, #198754 78%, var(--bs-primary)) !important;
}

.btn-outline-info {
  color: color-mix(in srgb, #0dcaf0 82%, var(--text-color)) !important;
  background: transparent !important;
  border-color: color-mix(in srgb, #0dcaf0 74%, var(--bs-primary)) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active,
.show > .btn-outline-info.dropdown-toggle {
  color: #111 !important;
  background: color-mix(in srgb, #0dcaf0 76%, var(--bs-primary)) !important;
  border-color: color-mix(in srgb, #0dcaf0 76%, var(--bs-primary)) !important;
}

.btn-outline-warning {
  color: var(--bs-primary) !important;
  background: transparent !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.active,
.show > .btn-outline-warning.dropdown-toggle {
  color: #111 !important;
  background: var(--bg-gradient) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-danger {
  color: color-mix(in srgb, #dc3545 86%, var(--text-color)) !important;
  background: transparent !important;
  border-color: color-mix(in srgb, #dc3545 78%, var(--bs-secondary)) !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active,
.show > .btn-outline-danger.dropdown-toggle {
  color: #fff !important;
  background: color-mix(in srgb, #dc3545 84%, var(--bs-secondary)) !important;
  border-color: color-mix(in srgb, #dc3545 84%, var(--bs-secondary)) !important;
}

.btn-link {
  color: var(--bs-primary) !important;
  text-decoration-color: color-mix(in srgb, var(--bs-primary) 40%, transparent);
}

.btn-link:hover,
.btn-link:focus {
  color: var(--bs-secondary) !important;
  text-decoration-color: var(--bs-secondary);
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  opacity: 0.48;
  pointer-events: none;
}

/* Forms: checks, radios, switches, ranges, files and validation */

.form-label,
.col-form-label,
legend {
  color: var(--text-color);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: color-mix(in srgb, var(--body-bg-alt) 70%, var(--text-color) 8%);
  color: color-mix(in srgb, var(--text-color) 58%, transparent);
  border-color: var(--theme-border-soft);
  opacity: 1;
}

.form-control-plaintext {
  color: var(--text-color);
}

.form-control-color {
  background-color: var(--body-bg-alt);
  border-color: var(--theme-border-soft);
}

.form-control::file-selector-button {
  color: var(--text-color);
  background: var(--bg-color);
  border-color: var(--theme-border-soft);
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background: color-mix(in srgb, var(--bs-primary) 12%, var(--bg-color));
  color: var(--text-color);
}

.form-check-label {
  color: var(--text-color);
}

.form-check-input {
  background-color: var(--body-bg-alt);
  border-color: var(--theme-border-mid);
}

.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 22%, transparent);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:checked[type="checkbox"],
.form-check-input:checked[type="radio"] {
  box-shadow: 0 0 1rem color-mix(in srgb, var(--bs-primary) 26%, transparent);
}

.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.form-switch .form-check-input {
  background-color: color-mix(in srgb, var(--text-color) 18%, var(--body-bg-alt));
  border-color: var(--theme-border-mid);
}

.form-switch .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-range::-webkit-slider-runnable-track {
  background-color: color-mix(in srgb, var(--text-color) 16%, transparent);
}

.form-range::-webkit-slider-thumb {
  background: var(--bs-primary);
}

.form-range::-moz-range-track {
  background-color: color-mix(in srgb, var(--text-color) 16%, transparent);
}

.form-range::-moz-range-thumb {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-floating > label {
  color: var(--theme-muted);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: var(--bs-primary);
}

.valid-feedback,
.valid-tooltip {
  color: color-mix(in srgb, #198754 80%, var(--text-color));
}

.invalid-feedback,
.invalid-tooltip {
  color: color-mix(in srgb, #dc3545 84%, var(--text-color));
}

.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid {
  border-color: color-mix(in srgb, #198754 75%, var(--bs-primary));
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .form-select:valid:focus,
.form-select.is-valid:focus {
  border-color: color-mix(in srgb, #198754 75%, var(--bs-primary));
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, #198754 22%, transparent);
}

.was-validated .form-check-input:valid,
.form-check-input.is-valid {
  border-color: color-mix(in srgb, #198754 75%, var(--bs-primary));
}

.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
  background-color: color-mix(in srgb, #198754 75%, var(--bs-primary));
}

.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
  color: var(--text-color);
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: color-mix(in srgb, #dc3545 84%, var(--bs-secondary));
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus {
  border-color: color-mix(in srgb, #dc3545 84%, var(--bs-secondary));
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, #dc3545 22%, transparent);
}

.was-validated .form-check-input:invalid,
.form-check-input.is-invalid {
  border-color: color-mix(in srgb, #dc3545 84%, var(--bs-secondary));
}

.was-validated .form-check-input:invalid:checked,
.form-check-input.is-invalid:checked {
  background-color: color-mix(in srgb, #dc3545 84%, var(--bs-secondary));
}

.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: var(--text-color);
}

/* Tables: contextual variants */

.table-primary {
  --bs-table-bg: color-mix(in srgb, var(--bs-primary) 18%, var(--bg-color));
  --bs-table-color: var(--text-color);
  --bs-table-border-color: color-mix(in srgb, var(--bs-primary) 26%, transparent);
}

.table-secondary {
  --bs-table-bg: color-mix(in srgb, var(--bs-secondary) 16%, var(--bg-color));
  --bs-table-color: var(--text-color);
  --bs-table-border-color: color-mix(in srgb, var(--bs-secondary) 24%, transparent);
}

.table-success {
  --bs-table-bg: color-mix(in srgb, #198754 14%, var(--bg-color));
  --bs-table-color: var(--text-color);
  --bs-table-border-color: color-mix(in srgb, #198754 24%, transparent);
}

.table-info {
  --bs-table-bg: color-mix(in srgb, #0dcaf0 14%, var(--bg-color));
  --bs-table-color: var(--text-color);
  --bs-table-border-color: color-mix(in srgb, #0dcaf0 24%, transparent);
}

.table-warning {
  --bs-table-bg: color-mix(in srgb, var(--bs-primary) 18%, var(--bg-color));
  --bs-table-color: var(--text-color);
  --bs-table-border-color: color-mix(in srgb, var(--bs-primary) 28%, transparent);
}

.table-danger {
  --bs-table-bg: color-mix(in srgb, #dc3545 15%, var(--bg-color));
  --bs-table-color: var(--text-color);
  --bs-table-border-color: color-mix(in srgb, #dc3545 26%, transparent);
}

.table-light,
.table-dark {
  --bs-table-bg: var(--bg-color);
  --bs-table-color: var(--text-color);
  --bs-table-border-color: var(--theme-border-soft);
}

.table-active {
  --bs-table-bg-state: color-mix(in srgb, var(--bs-primary) 16%, transparent);
  --bs-table-color-state: var(--text-color);
}

/* Dropdown states */

.dropdown-item:active {
  background: var(--bg-gradient);
  color: #fff;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: color-mix(in srgb, var(--text-color) 38%, transparent);
}

/* Nav variants */

.nav-pills .nav-link {
  border-radius: 0.85rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--bg-gradient);
  color: #fff;
}

.nav-underline {
  --bs-nav-underline-link-active-color: var(--bs-primary);
  --bs-nav-link-hover-color: var(--bs-primary);
}

.navbar-toggler {
  color: var(--text-color);
  border-color: var(--theme-border-soft);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 22%, transparent);
}

/* Alerts: semantic variants not covered above */

.alert-success {
  background: color-mix(in srgb, #198754 16%, var(--bg-color));
  color: var(--text-color);
  border-color: color-mix(in srgb, #198754 28%, transparent);
}

.alert-info {
  background: color-mix(in srgb, #0dcaf0 16%, var(--bg-color));
  color: var(--text-color);
  border-color: color-mix(in srgb, #0dcaf0 28%, transparent);
}

.alert-warning {
  background: color-mix(in srgb, var(--bs-primary) 18%, var(--bg-color));
  color: var(--text-color);
  border-color: color-mix(in srgb, var(--bs-primary) 32%, transparent);
}

.alert-danger {
  background: color-mix(in srgb, #dc3545 18%, var(--bg-color));
  color: var(--text-color);
  border-color: color-mix(in srgb, #dc3545 32%, transparent);
}

.alert-link {
  color: var(--bs-primary);
}

/* Badges and text backgrounds: semantic variants not covered above */

.text-bg-success,
.badge.bg-success {
  background: color-mix(in srgb, #198754 78%, var(--bs-primary)) !important;
  color: #fff !important;
}

.text-bg-info,
.badge.bg-info {
  background: color-mix(in srgb, #0dcaf0 76%, var(--bs-primary)) !important;
  color: #111 !important;
}

.text-bg-warning,
.badge.bg-warning {
  background: var(--bg-gradient) !important;
  color: #111 !important;
}

.text-bg-danger,
.badge.bg-danger {
  background: color-mix(in srgb, #dc3545 84%, var(--bs-secondary)) !important;
  color: #fff !important;
}

/* List group contextual variants */

.list-group-item-primary {
  background: color-mix(in srgb, var(--bs-primary) 16%, var(--bg-color));
  color: var(--text-color);
}

.list-group-item-secondary {
  background: color-mix(in srgb, var(--bs-secondary) 16%, var(--bg-color));
  color: var(--text-color);
}

.list-group-item-success {
  background: color-mix(in srgb, #198754 14%, var(--bg-color));
  color: var(--text-color);
}

.list-group-item-info {
  background: color-mix(in srgb, #0dcaf0 14%, var(--bg-color));
  color: var(--text-color);
}

.list-group-item-warning {
  background: color-mix(in srgb, var(--bs-primary) 16%, var(--bg-color));
  color: var(--text-color);
}

.list-group-item-danger {
  background: color-mix(in srgb, #dc3545 16%, var(--bg-color));
  color: var(--text-color);
}

.list-group-item-light,
.list-group-item-dark {
  background: var(--bg-color);
  color: var(--text-color);
}

/* Accordion refinements */

.accordion-button {
  background: var(--bg-color);
  color: var(--text-color);
}

.accordion-button:not(.collapsed) {
  background: color-mix(in srgb, var(--bs-primary) 12%, var(--bg-color));
  color: var(--text-color);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--theme-border-soft);
}

.accordion-button::after {
  filter: grayscale(1) brightness(1.35);
}

/* Modal and offcanvas helpers */

.modal-backdrop {
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.68;
}

.offcanvas {
  background: var(--bg-color);
  color: var(--text-color);
}

.offcanvas-header,
.offcanvas-footer {
  border-color: var(--theme-border-soft);
}

/* Tooltips and popovers */

.tooltip {
  --bs-tooltip-bg: var(--bg-color);
  --bs-tooltip-color: var(--text-color);
  --bs-tooltip-opacity: 1;
}

.tooltip-inner {
  border: 1px solid var(--theme-border-soft);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.22);
}

.popover {
  --bs-popover-bg: var(--bg-color);
  --bs-popover-border-color: var(--theme-border-soft);
  --bs-popover-header-bg: color-mix(in srgb, var(--body-bg-alt) 85%, var(--bg-color));
  --bs-popover-header-color: var(--text-color);
  --bs-popover-body-color: var(--text-color);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.18);
}

/* Placeholders */

.placeholder {
  background-color: color-mix(in srgb, var(--text-color) 18%, transparent);
}

.placeholder-glow .placeholder {
  animation-name: placeholder-glow-theme;
}

@keyframes placeholder-glow-theme {
  50% {
    opacity: 0.35;
  }
}

/* Spinners */

.spinner-border,
.spinner-grow {
  color: var(--bs-primary);
}

/* Carousel */

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.38));
}

.carousel-indicators [data-bs-target] {
  background-color: var(--bs-primary);
}

/* Misc Bootstrap helpers */

.link-primary {
  color: var(--bs-primary) !important;
}

.link-primary:hover,
.link-primary:focus {
  color: var(--bs-secondary) !important;
}

.link-secondary {
  color: var(--bs-secondary) !important;
}

.link-secondary:hover,
.link-secondary:focus {
  color: var(--bg-secondary-alt) !important;
}

.link-success {
  color: color-mix(in srgb, #198754 82%, var(--text-color)) !important;
}

.link-info {
  color: color-mix(in srgb, #0dcaf0 82%, var(--text-color)) !important;
}

.link-warning {
  color: var(--bs-primary) !important;
}

.link-danger {
  color: color-mix(in srgb, #dc3545 86%, var(--text-color)) !important;
}

.border-primary {
  border-color: var(--bs-primary) !important;
}

.border-secondary {
  border-color: var(--bs-secondary) !important;
}

.border-success {
  border-color: color-mix(in srgb, #198754 75%, var(--bs-primary)) !important;
}

.border-info {
  border-color: color-mix(in srgb, #0dcaf0 74%, var(--bs-primary)) !important;
}

.border-warning {
  border-color: var(--bs-primary) !important;
}

.border-danger {
  border-color: color-mix(in srgb, #dc3545 84%, var(--bs-secondary)) !important;
}

.focus-ring {
  --bs-focus-ring-color: color-mix(in srgb, var(--bs-primary) 26%, transparent);
}

.ratio,
.object-fit-contain,
.object-fit-cover,
.object-fit-fill,
.object-fit-scale,
.object-fit-none {
  background-color: transparent;
}

/* --------------------------------------------------------------------------
   Bootstrap primary/secondary final override layer
   --------------------------------------------------------------------------
   Bootstrap components such as .btn-outline-primary and .text-bg-primary set
   their own component variables, so changing only --bs-primary at :root does
   not always replace the default blue. This final layer maps those component
   variables and utility classes back to --bs-primary / --bs-secondary.
*/

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --theme-bs-primary-gradient: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 72%, var(--bs-secondary)));
  --theme-bs-primary-gradient-reverse: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 72%, var(--bs-secondary)), var(--bs-primary));
  --theme-on-primary: #111;
  --theme-on-secondary: #fff;

  --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 76%, var(--text-color));
  --bs-secondary-text-emphasis: color-mix(in srgb, var(--bs-secondary) 76%, var(--text-color));
  --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 18%, var(--bg-color));
  --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) 18%, var(--bg-color));
  --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 38%, transparent);
  --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) 38%, transparent);
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-secondary);
}

/* Primary/secondary text, links and backgrounds */

.text-primary,
.link-primary {
  color: var(--bs-primary) !important;
}

.text-secondary,
.link-secondary {
  color: var(--bs-secondary) !important;
}

.link-primary:hover,
.link-primary:focus {
  color: var(--bs-secondary) !important;
}

.link-secondary:hover,
.link-secondary:focus {
  color: color-mix(in srgb, var(--bs-secondary) 78%, var(--text-color)) !important;
}

.bg-primary,
.badge.bg-primary,
.text-bg-primary {
  background-color: var(--bs-primary) !important;
  background-image: var(--theme-bs-primary-gradient) !important;
  color: var(--theme-on-primary) !important;
}

.bg-secondary,
.badge.bg-secondary,
.text-bg-secondary {
  background-color: var(--bs-secondary) !important;
  background-image: none !important;
  color: var(--theme-on-secondary) !important;
}

.border-primary {
  border-color: var(--bs-primary) !important;
}

.border-secondary {
  border-color: var(--bs-secondary) !important;
}

/* Button component variables: these are required because Bootstrap sets
   --bs-btn-* to blue/grey on the button variant classes themselves. */

.btn-primary {
  --bs-btn-color: var(--theme-on-primary);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--theme-on-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 82%, var(--bs-secondary));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 72%, var(--bs-secondary));
  --bs-btn-focus-shadow-rgb: 255, 171, 0;
  --bs-btn-active-color: var(--theme-on-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 72%, var(--bs-secondary));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 62%, var(--bs-secondary));
  --bs-btn-disabled-color: color-mix(in srgb, var(--theme-on-primary) 58%, transparent);
  --bs-btn-disabled-bg: color-mix(in srgb, var(--bs-primary) 48%, var(--bg-color));
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-primary) 38%, transparent);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--theme-on-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 255, 171, 0;
  --bs-btn-active-color: var(--theme-on-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: color-mix(in srgb, var(--bs-primary) 54%, var(--text-color));
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--bs-primary) 38%, transparent);
  color: var(--bs-primary) !important;
  background-color: transparent !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  color: var(--theme-on-primary) !important;
  background-color: var(--bs-primary) !important;
  background-image: var(--theme-bs-primary-gradient) !important;
  border-color: var(--bs-primary) !important;
}

.btn-secondary {
  --bs-btn-color: var(--theme-on-secondary);
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--theme-on-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 82%, var(--text-color));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 72%, var(--text-color));
  --bs-btn-active-color: var(--theme-on-secondary);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 72%, var(--text-color));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 62%, var(--text-color));
  color: var(--theme-on-secondary) !important;
  background-color: var(--bs-secondary) !important;
  background-image: none !important;
  border-color: var(--bs-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  color: var(--theme-on-secondary) !important;
  background-color: color-mix(in srgb, var(--bs-secondary) 82%, var(--text-color)) !important;
  border-color: color-mix(in srgb, var(--bs-secondary) 72%, var(--text-color)) !important;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--theme-on-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-color: var(--theme-on-secondary);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  color: var(--bs-secondary) !important;
  background-color: transparent !important;
  border-color: var(--bs-secondary) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: var(--theme-on-secondary) !important;
  background-color: var(--bs-secondary) !important;
  border-color: var(--bs-secondary) !important;
}

/* Alerts */

.alert-primary {
  --bs-alert-color: var(--text-color);
  --bs-alert-bg: color-mix(in srgb, var(--bs-primary) 18%, var(--bg-color));
  --bs-alert-border-color: color-mix(in srgb, var(--bs-primary) 32%, transparent);
  --bs-alert-link-color: var(--bs-primary);
  color: var(--bs-alert-color) !important;
  background-color: var(--bs-alert-bg) !important;
  border-color: var(--bs-alert-border-color) !important;
}

.alert-secondary {
  --bs-alert-color: var(--text-color);
  --bs-alert-bg: color-mix(in srgb, var(--bs-secondary) 18%, var(--bg-color));
  --bs-alert-border-color: color-mix(in srgb, var(--bs-secondary) 32%, transparent);
  --bs-alert-link-color: var(--bs-secondary);
  color: var(--bs-alert-color) !important;
  background-color: var(--bs-alert-bg) !important;
  border-color: var(--bs-alert-border-color) !important;
}

/* Tables */

.table-primary {
  --bs-table-color: var(--text-color);
  --bs-table-bg: color-mix(in srgb, var(--bs-primary) 18%, var(--bg-color));
  --bs-table-border-color: color-mix(in srgb, var(--bs-primary) 30%, transparent);
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-primary) 22%, var(--bg-color));
  --bs-table-hover-bg: color-mix(in srgb, var(--bs-primary) 26%, var(--bg-color));
  color: var(--text-color) !important;
  border-color: var(--bs-table-border-color) !important;
}

.table-secondary {
  --bs-table-color: var(--text-color);
  --bs-table-bg: color-mix(in srgb, var(--bs-secondary) 18%, var(--bg-color));
  --bs-table-border-color: color-mix(in srgb, var(--bs-secondary) 30%, transparent);
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-secondary) 22%, var(--bg-color));
  --bs-table-hover-bg: color-mix(in srgb, var(--bs-secondary) 26%, var(--bg-color));
  color: var(--text-color) !important;
  border-color: var(--bs-table-border-color) !important;
}

/* List groups */

.list-group-item-primary {
  --bs-list-group-color: var(--text-color);
  --bs-list-group-bg: color-mix(in srgb, var(--bs-primary) 16%, var(--bg-color));
  --bs-list-group-border-color: color-mix(in srgb, var(--bs-primary) 28%, transparent);
  color: var(--text-color) !important;
  background-color: var(--bs-list-group-bg) !important;
  border-color: var(--bs-list-group-border-color) !important;
}

.list-group-item-secondary {
  --bs-list-group-color: var(--text-color);
  --bs-list-group-bg: color-mix(in srgb, var(--bs-secondary) 16%, var(--bg-color));
  --bs-list-group-border-color: color-mix(in srgb, var(--bs-secondary) 28%, transparent);
  color: var(--text-color) !important;
  background-color: var(--bs-list-group-bg) !important;
  border-color: var(--bs-list-group-border-color) !important;
}

.list-group-item.active,
.dropdown-item.active,
.dropdown-item:active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--theme-on-primary) !important;
  background-color: var(--bs-primary) !important;
  background-image: var(--theme-bs-primary-gradient) !important;
  border-color: var(--bs-primary) !important;
}

/* Pagination */

.pagination {
  --bs-pagination-color: var(--bs-primary);
  --bs-pagination-hover-color: var(--bs-secondary);
  --bs-pagination-focus-color: var(--bs-secondary);
  --bs-pagination-active-color: var(--theme-on-primary);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
}

.page-link {
  color: var(--bs-primary) !important;
}

.page-link:hover,
.page-link:focus {
  color: var(--bs-secondary) !important;
}

.page-item.active .page-link {
  color: var(--theme-on-primary) !important;
  background-color: var(--bs-primary) !important;
  background-image: var(--theme-bs-primary-gradient) !important;
  border-color: var(--bs-primary) !important;
}

/* Forms and focus states */

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn-check:focus + .btn,
.btn:focus-visible {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 24%, transparent) !important;
}

.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-switch .form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-range::-webkit-slider-thumb {
  background-color: var(--bs-primary) !important;
}

.form-range::-moz-range-thumb {
  background-color: var(--bs-primary) !important;
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--bg-color), 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 24%, transparent) !important;
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--bg-color), 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 24%, transparent) !important;
}

/* Navs, tabs, breadcrumbs */

.nav-link:hover,
.nav-link:focus,
.nav-link.active,
.nav-tabs .nav-link.active,
.nav-underline .nav-link.active {
  color: var(--bs-primary) !important;
}

.nav-tabs .nav-link.active {
  border-color: var(--bs-primary) var(--theme-border-soft) var(--bg-color) !important;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
  color: var(--bs-primary) !important;
}

/* Accordion */

.accordion {
  --bs-accordion-active-bg: color-mix(in srgb, var(--bs-primary) 14%, var(--bg-color));
  --bs-accordion-active-color: var(--text-color);
  --bs-accordion-btn-focus-border-color: var(--bs-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-primary) 22%, transparent);
}

.accordion-button:not(.collapsed) {
  background-color: color-mix(in srgb, var(--bs-primary) 14%, var(--bg-color)) !important;
  color: var(--text-color) !important;
}

/* Progress, spinners, carousel and focus helpers */

.progress-bar {
  background-color: var(--bs-primary) !important;
  background-image: var(--theme-bs-primary-gradient) !important;
}

.spinner-border.text-primary,
.spinner-grow.text-primary,
.spinner-border-primary,
.spinner-grow-primary {
  color: var(--bs-primary) !important;
}

.spinner-border.text-secondary,
.spinner-grow.text-secondary,
.spinner-border-secondary,
.spinner-grow-secondary {
  color: var(--bs-secondary) !important;
}

.carousel-indicators [data-bs-target] {
  background-color: var(--bs-primary) !important;
}

.focus-ring,
:focus-visible {
  --bs-focus-ring-color: color-mix(in srgb, var(--bs-primary) 26%, transparent);
}