/* Connects Bootstrap's variables to the template theme (theme.css). Loaded after bootstrap.min.css. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: var(--wt-primary);
  --bs-primary-rgb: var(--wt-primary-rgb);
  --bs-body-bg: var(--wt-bg);
  --bs-body-color: var(--wt-text);
  --bs-border-color: var(--wt-border);
  --bs-body-font-family: var(--wt-font-body);
  --bs-border-radius: var(--wt-radius);
  --bs-border-radius-sm: calc(var(--wt-radius) * .7);
  --bs-border-radius-lg: var(--wt-radius-lg);
  --bs-border-radius-xl: calc(var(--wt-radius-lg) * 1.35);
  --bs-border-radius-xxl: calc(var(--wt-radius-lg) * 2);
  --bs-link-color: var(--wt-link);
  --bs-link-color-rgb: var(--wt-link-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--wt-link) 80%, #000);
  --bs-link-hover-color-rgb: var(--wt-link-rgb);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--wt-primary) 13%, var(--wt-bg));
  --bs-primary-border-subtle: color-mix(in srgb, var(--wt-primary) 32%, var(--wt-bg));
  --bs-primary-text-emphasis: color-mix(in srgb, var(--wt-primary) 72%, var(--bs-emphasis-color));
  --bs-focus-ring-color: rgba(var(--wt-primary-rgb), .25);
}
[data-bs-theme="dark"] {
  --bs-secondary-bg: color-mix(in srgb, var(--wt-surface) 86%, #fff 8%);
  --bs-tertiary-bg: color-mix(in srgb, var(--wt-surface) 92%, #fff 4%);
  --bs-link-color: color-mix(in srgb, var(--wt-primary) 65%, #fff);
  --bs-link-hover-color: color-mix(in srgb, var(--wt-primary) 45%, #fff);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .navbar-brand {
  font-family: var(--wt-font-heading);
  letter-spacing: -.01em;
}
.btn { font-weight: 600; }
.btn-primary {
  --bs-btn-color: var(--wt-on-primary); --bs-btn-bg: var(--wt-primary); --bs-btn-border-color: var(--wt-primary);
  --bs-btn-hover-color: var(--wt-on-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--wt-primary) 86%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--wt-primary) 86%, #000);
  --bs-btn-active-color: var(--wt-on-primary); --bs-btn-active-bg: color-mix(in srgb, var(--wt-primary) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--wt-primary) 78%, #000);
  --bs-btn-disabled-color: var(--wt-on-primary); --bs-btn-disabled-bg: var(--wt-primary); --bs-btn-disabled-border-color: var(--wt-primary);
  --bs-btn-focus-shadow-rgb: var(--wt-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--wt-primary); --bs-btn-border-color: var(--wt-primary); --bs-btn-hover-color: var(--wt-on-primary); --bs-btn-hover-bg: var(--wt-primary);
  --bs-btn-hover-border-color: var(--wt-primary); --bs-btn-active-color: var(--wt-on-primary); --bs-btn-active-bg: var(--wt-primary); --bs-btn-active-border-color: var(--wt-primary);
  --bs-btn-disabled-color: var(--wt-primary); --bs-btn-disabled-border-color: var(--wt-primary); --bs-btn-focus-shadow-rgb: var(--wt-primary-rgb);
}
.btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); --bs-btn-active-color: var(--bs-link-hover-color); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--wt-primary); --bs-nav-pills-link-active-color: var(--wt-on-primary); }
.nav { --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); }
.nav-underline .nav-link.active { border-bottom-color: var(--wt-primary); }
.form-check-input:checked { background-color: var(--wt-primary); border-color: var(--wt-primary); }
.form-check-input[type="checkbox"]:indeterminate { background-color: var(--wt-primary); border-color: var(--wt-primary); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: color-mix(in srgb, var(--wt-primary) 55%, var(--bs-border-color)); box-shadow: 0 0 0 .25rem rgba(var(--wt-primary-rgb), .25);
}
.form-range::-webkit-slider-thumb { background-color: var(--wt-primary); }
.form-range::-moz-range-thumb { background-color: var(--wt-primary); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 .25rem rgba(var(--wt-primary-rgb), .25); }
.pagination { --bs-pagination-color: var(--bs-link-color); --bs-pagination-active-bg: var(--wt-primary); --bs-pagination-active-border-color: var(--wt-primary);
  --bs-pagination-active-color: var(--wt-on-primary); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--wt-primary-rgb), .25); --bs-pagination-hover-color: var(--bs-link-hover-color); }
.list-group { --bs-list-group-active-bg: var(--wt-primary); --bs-list-group-active-border-color: var(--wt-primary); --bs-list-group-active-color: var(--wt-on-primary); --bs-list-group-bg: var(--wt-surface); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--wt-primary); --bs-dropdown-link-active-color: var(--wt-on-primary); --bs-dropdown-bg: var(--wt-surface); --bs-dropdown-border-radius: var(--wt-radius-lg); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--wt-primary); }
.accordion { --bs-accordion-bg: var(--wt-surface); --bs-accordion-active-bg: color-mix(in srgb, var(--wt-primary) 10%, var(--wt-surface));
  --bs-accordion-active-color: var(--bs-body-color); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--wt-primary-rgb), .25); }
.card { --bs-card-bg: var(--wt-surface); --bs-card-border-color: var(--bs-border-color-translucent); }
.modal { --bs-modal-bg: var(--wt-surface); }
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl { --bs-offcanvas-bg: var(--wt-surface); }
.popover { --bs-popover-bg: var(--wt-surface); }
.toast { --bs-toast-bg: color-mix(in srgb, var(--wt-surface) 92%, transparent); }
.form-control, .form-select { background-color: var(--wt-surface); }
.table { --bs-table-bg: transparent; }
.btn-close:focus { box-shadow: 0 0 0 .25rem rgba(var(--wt-primary-rgb), .25); }
.table-responsive, [class*="table-responsive-"] { position: relative; }
