/* 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) 55%, 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%);
  /* version 9: the readable dark link of theme.css (primary + 35% white was under 4.5:1 for deep colours) */
  --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) 70%, #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-ink); --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); }
.progress-bar:not([class*="bg-"]) { color: var(--wt-on-primary); }   /* version 10.0.1: the label on the brand-coloured bar (white was 3.5:1 on light brands) */
.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; }

/* version 7: grey outline buttons use the theme's muted ink (WCAG AA on tinted sections too; Bootstrap's #6c757d is 4.0:1 there) */
.btn-outline-secondary { --bs-btn-color: var(--wt-muted); --bs-btn-border-color: color-mix(in srgb, var(--wt-muted) 60%, transparent); }

/* version 7: Bootstrap secondary links and text use a darker slate (#6c757d is 4.4:1 on light grey footers) */
:root, [data-bs-theme="light"] { --bs-secondary-rgb: 85, 96, 112; }
/* version 7: Bootstrap writes white on .text-bg-primary; the theme knows which ink reads on the brand colour */
.text-bg-primary { color: var(--wt-on-primary) !important; }
/* version 8: outline buttons use the readable emphasis shade of their colour (Bootstrap's base colours are too dark on dark surfaces) */
.btn-outline-success { --bs-btn-color: var(--bs-success-text-emphasis); }
.btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); }
.btn-outline-warning { --bs-btn-color: var(--bs-warning-text-emphasis); }
.btn-outline-info { --bs-btn-color: var(--bs-info-text-emphasis); }
/* version 8: brand-coloured text in its readable shade; disabled page links in the muted ink (both WCAG AA) */
.text-primary { color: color-mix(in srgb, var(--wt-primary-ink) calc(var(--bs-text-opacity, 1) * 100%), transparent) !important; }   /* 10.0.1: .text-opacity-* fades it */
.pagination { --bs-pagination-disabled-color: color-mix(in srgb, var(--wt-muted) 70%, var(--wt-text)); --bs-pagination-disabled-bg: var(--wt-surface); }
/* version 8: inline code in a deeper pink (Bootstrap #d63384 is 4.4:1 on tinted surfaces) */
:root:not([data-bs-theme="dark"]), [data-bs-theme="light"] { --bs-code-color: #a3245f; }   /* version 10.0.1: #b52b6f was 4.4:1 on grey demo boxes */
/* version 9: dark mode keeps a light pink (the line above also matched a dark html element) and readable secondary links */
[data-bs-theme="dark"] { --bs-code-color: #e685b5; }
[data-bs-theme="dark"] .link-secondary, .link-secondary[data-bs-theme="dark"] { color: color-mix(in srgb, var(--wt-text) 82%, transparent) !important; text-decoration-color: color-mix(in srgb, var(--wt-text) 50%, transparent) !important; }
/* version 8: status colours as text use their readable (emphasis) shade - #198754 / #15803d were 4.4:1 on tinted cards */
.text-success { color: var(--bs-success-text-emphasis) !important; } .text-danger { color: var(--bs-danger-text-emphasis) !important; }
.text-warning { color: var(--bs-warning-text-emphasis) !important; } .text-info { color: var(--bs-info-text-emphasis) !important; }
/* version 10.0.1: coloured links in a readable shade (AA) - the theme link colour for primary, the emphasis shade for the status colours
   (Bootstrap's raw .link-warning and .link-info are 1.6 and 2:1 on white); .link-opacity-* still fades them */
.link-primary { color: color-mix(in srgb, var(--bs-link-color) calc(var(--bs-link-opacity, 1) * 100%), transparent) !important; }
.link-primary:hover, .link-primary:focus { color: var(--bs-link-hover-color) !important; }
.link-success { color: color-mix(in srgb, var(--bs-success-text-emphasis) calc(var(--bs-link-opacity, 1) * 100%), transparent) !important; }
.link-danger { color: color-mix(in srgb, var(--bs-danger-text-emphasis) calc(var(--bs-link-opacity, 1) * 100%), transparent) !important; }
.link-warning { color: color-mix(in srgb, var(--bs-warning-text-emphasis) calc(var(--bs-link-opacity, 1) * 100%), transparent) !important; }
.link-info { color: color-mix(in srgb, var(--bs-info-text-emphasis) calc(var(--bs-link-opacity, 1) * 100%), transparent) !important; }
.link-success:hover, .link-success:focus { color: color-mix(in srgb, var(--bs-success-text-emphasis) 82%, var(--bs-emphasis-color)) !important; }
.link-danger:hover, .link-danger:focus { color: color-mix(in srgb, var(--bs-danger-text-emphasis) 82%, var(--bs-emphasis-color)) !important; }
.link-warning:hover, .link-warning:focus { color: color-mix(in srgb, var(--bs-warning-text-emphasis) 82%, var(--bs-emphasis-color)) !important; }
.link-info:hover, .link-info:focus { color: color-mix(in srgb, var(--bs-info-text-emphasis) 82%, var(--bs-emphasis-color)) !important; }
/* version 10.0.1: on a brand-coloured navbar the links use the theme's ink for that colour (55% white was 2.8:1 on mid-tone brands) */
.navbar.bg-primary { --bs-navbar-color: var(--wt-on-primary); --bs-navbar-hover-color: var(--wt-on-primary); --bs-navbar-active-color: var(--wt-on-primary);
  --bs-navbar-brand-color: var(--wt-on-primary); --bs-navbar-brand-hover-color: var(--wt-on-primary); }
.navbar.bg-primary .nav-link.active { text-decoration: underline; text-underline-offset: .35em; }
/* version 10.0.1: the third text level (.text-body-tertiary) at AA - Bootstrap's 50% is 3.1:1 */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-tertiary-color: color-mix(in srgb, var(--wt-text) 66%, transparent); }
/* version 10.0.1: hover and pressed shades move away from the button text - darker under white text, lighter under dark text
   (a darker pressed shade under dark text was 3.1:1); browsers without relative colours keep the darker shades above */
@supports (color: rgb(from red r g b)) {
  .btn-primary {
    --wt-away: rgb(from var(--wt-on-primary) calc(255 - r) calc(255 - g) calc(255 - b));
    --bs-btn-hover-bg: color-mix(in srgb, var(--wt-primary) 86%, var(--wt-away)); --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
    --bs-btn-active-bg: color-mix(in srgb, var(--wt-primary) 78%, var(--wt-away)); --bs-btn-active-border-color: var(--bs-btn-active-bg);
  }
}
/* version 10.0.1: dark mode - the dark outline button and dark link turn to the emphasis colour (dark on dark was 1.2:1),
   secondary text is a light slate, its fill takes dark ink, and coloured card headers keep the card colour (a tint lowered the contrast) */
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--bs-emphasis-color); --bs-btn-border-color: var(--bs-emphasis-color);
  --bs-btn-hover-color: var(--bs-body-bg); --bs-btn-hover-bg: var(--bs-emphasis-color); --bs-btn-hover-border-color: var(--bs-emphasis-color);
  --bs-btn-active-color: var(--bs-body-bg); --bs-btn-active-bg: var(--bs-emphasis-color); --bs-btn-active-border-color: var(--bs-emphasis-color);
}
[data-bs-theme="dark"] .link-dark { color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important; }
[data-bs-theme="dark"] { --bs-secondary-rgb: 148, 163, 184; }
[data-bs-theme="dark"] .text-bg-secondary { color: #111827 !important; }
.card[class*="text-bg-"] { --bs-card-cap-bg: transparent; }