/* Bootstrap, made to read the theme. Its own variables and the components that
   hard-code its blue are pointed at the design tokens, so a theme reaches every
   button, field and menu without knowing Bootstrap is underneath — and a
   theme must therefore never read a --bs-* variable set here, or the two would
   name each other and both come out empty.

   The selector reaches the dark scheme as well as the light one: Bootstrap sets
   these on [data-bs-theme=dark] at the same weight, and this file comes later. */

:root,
[data-bs-theme] {
    --bs-body-font-family: var(--mb-font-sans);
    --bs-body-bg: var(--mb-surface);
    --bs-body-bg-rgb: var(--mb-surface-rgb);
    --bs-body-color: var(--mb-ink);
    --bs-body-color-rgb: var(--mb-ink-rgb);
    --bs-emphasis-color: var(--mb-ink-strong);
    --bs-emphasis-color-rgb: var(--mb-ink-strong-rgb);
    --bs-heading-color: var(--mb-ink-strong);
    --bs-secondary-color: var(--mb-ink-muted);
    --bs-tertiary-color: var(--mb-ink-faint);
    --bs-secondary-bg: var(--mb-surface-hover);
    --bs-secondary-bg-rgb: var(--mb-surface-hover-rgb);
    --bs-tertiary-bg: var(--mb-surface-sunken);
    --bs-tertiary-bg-rgb: var(--mb-surface-sunken-rgb);
    --bs-border-color: var(--mb-border);
    --bs-border-color-translucent: var(--mb-border-faint);

    --bs-primary: var(--mb-accent);
    --bs-primary-rgb: var(--mb-accent-rgb);
    --bs-primary-bg-subtle: var(--mb-accent-tint);
    --bs-primary-border-subtle: var(--mb-accent-edge);
    --bs-primary-text-emphasis: var(--mb-accent-strong);
    --bs-link-color: var(--mb-link);
    --bs-link-color-rgb: var(--mb-link-rgb);
    --bs-link-hover-color: var(--mb-link-hover);
    --bs-link-hover-color-rgb: var(--mb-link-hover-rgb);
    --bs-focus-ring-color: var(--mb-focus-ring);

    --bs-border-radius-sm: var(--mb-radius-sm);
    --bs-border-radius: var(--mb-radius);
    --bs-border-radius-lg: var(--mb-radius-lg);
    --bs-border-radius-pill: var(--mb-radius-pill);
    --bs-box-shadow-sm: var(--mb-shadow-sm);
    --bs-box-shadow: var(--mb-shadow);
    --bs-box-shadow-lg: var(--mb-shadow-lg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: var(--mb-heading-weight);
    letter-spacing: var(--mb-heading-tracking);
}

/* Bootstrap draws lead paragraphs in a hairline weight that turns grey and thin
   on a low-density screen. */
.lead { font-weight: 400; }

.btn-primary {
    --bs-btn-color: var(--mb-accent-contrast);
    --bs-btn-bg: var(--mb-accent);
    --bs-btn-border-color: var(--mb-accent);
    --bs-btn-hover-color: var(--mb-accent-contrast);
    --bs-btn-hover-bg: var(--mb-accent-hover);
    --bs-btn-hover-border-color: var(--mb-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--mb-accent-rgb);
    --bs-btn-active-color: var(--mb-accent-contrast);
    --bs-btn-active-bg: var(--mb-accent-active);
    --bs-btn-active-border-color: var(--mb-accent-active);
    --bs-btn-disabled-color: var(--mb-accent-contrast);
    --bs-btn-disabled-bg: var(--mb-accent);
    --bs-btn-disabled-border-color: var(--mb-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--mb-link);
    --bs-btn-border-color: var(--mb-accent-edge);
    --bs-btn-hover-color: var(--mb-accent-strong);
    --bs-btn-hover-bg: var(--mb-accent-tint);
    --bs-btn-hover-border-color: var(--mb-accent-edge);
    --bs-btn-focus-shadow-rgb: var(--mb-accent-rgb);
    --bs-btn-active-color: var(--mb-accent-contrast);
    --bs-btn-active-bg: var(--mb-accent);
    --bs-btn-active-border-color: var(--mb-accent);
    --bs-btn-disabled-color: var(--mb-link);
    --bs-btn-disabled-border-color: var(--mb-accent-edge);
}

/* The everyday button: a quiet control on the surface rather than a grey slab
   on hover. Pressed — a view picked in a toggle group — it takes the accent's
   tint, the way a selected tab takes the accent's rule. */
.btn-outline-secondary {
    --bs-btn-color: var(--mb-ink);
    --bs-btn-bg: var(--mb-surface);
    --bs-btn-border-color: var(--mb-border);
    --bs-btn-hover-color: var(--mb-ink-strong);
    --bs-btn-hover-bg: var(--mb-surface-hover);
    --bs-btn-hover-border-color: var(--mb-border);
    --bs-btn-focus-shadow-rgb: var(--mb-accent-rgb);
    --bs-btn-active-color: var(--mb-accent-strong);
    --bs-btn-active-bg: var(--mb-accent-tint);
    --bs-btn-active-border-color: var(--mb-accent-edge);
    --bs-btn-disabled-color: var(--mb-ink-faint);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--mb-border);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--mb-accent);
    box-shadow: 0 0 0 0.25rem var(--mb-focus-ring);
}

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

.dropdown-menu {
    --bs-dropdown-link-active-color: var(--mb-accent-contrast);
    --bs-dropdown-link-active-bg: var(--mb-accent);
    --bs-dropdown-header-color: var(--mb-ink-muted);
    --bs-dropdown-box-shadow: var(--mb-shadow);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.nav-pills {
    --bs-nav-pills-link-active-color: var(--mb-accent-contrast);
    --bs-nav-pills-link-active-bg: var(--mb-accent);
}

.progress,
.progress-stacked {
    --bs-progress-bar-color: var(--mb-accent-contrast);
    --bs-progress-bar-bg: var(--mb-accent);
}

/* A card rests on the page rather than being drawn on it. */
.card {
    --bs-card-border-color: var(--mb-border-faint);
    --bs-card-border-radius: var(--mb-radius-lg);
    --bs-card-inner-border-radius: calc(var(--mb-radius-lg) - 1px);
    box-shadow: var(--mb-shadow-sm);
}

.modal {
    --bs-modal-border-radius: var(--mb-radius-lg);
    --bs-modal-inner-border-radius: calc(var(--mb-radius-lg) - 1px);
    --bs-modal-box-shadow: var(--mb-shadow-lg);
}

/* Bootstrap keeps its daytime greens and reds for text at night, which on a dark
   surface fall under 4.5:1; the emphasis shades it already ships for that
   scheme are the readable ones. */
[data-bs-theme=dark] .text-success { color: var(--bs-success-text-emphasis) !important; }
[data-bs-theme=dark] .text-danger { color: var(--bs-danger-text-emphasis) !important; }
[data-bs-theme=dark] .text-info { color: var(--bs-info-text-emphasis) !important; }