/* ==========================================================================
   The abilitynet design tokens on top of Bootstrap 5
   ========================================================================== */

:root {
    --card-shadow: 0 1px 3px rgb(11 27 43 / .10), 0 8px 24px rgb(11 27 43 / .06);

    --bs-body-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-border-radius: 6px;
    --bs-border-radius-lg: 10px;
}

:root:not([data-bs-theme=dark]),
[data-bs-theme=light] {
    --bs-body-color: #16212e;
    --bs-body-color-rgb: 22, 33, 46;
    --bs-secondary-color: #46586b;
    --bs-border-color: #dbe2ea;
    --bs-tertiary-bg: #f4f6f9;
    --bs-tertiary-bg-rgb: 244, 246, 249;

    --bs-primary: #2470c8;
    --bs-primary-rgb: 36, 112, 200;
    --bs-primary-text-emphasis: #0e2d50;
    --bs-primary-bg-subtle: #d3e2f4;
    --bs-primary-border-subtle: #a7c6e9;
    --bs-link-color: #2470c8;
    --bs-link-color-rgb: 36, 112, 200;
    --bs-link-hover-color: #1b5ba6;
    --bs-link-hover-color-rgb: 27, 91, 166;
    --bs-focus-ring-color: rgba(36, 112, 200, .25);

    --bs-success-text-emphasis: #14603c;
    --bs-success-bg-subtle: #e7f5ee;
    --bs-danger-text-emphasis: #98221b;
    --bs-danger-bg-subtle: #fbeae9;
}

[data-bs-theme=dark] {
    --bs-primary-text-emphasis: #7ca9de;
    --bs-primary-bg-subtle: #071628;
    --bs-primary-border-subtle: #164378;
    --bs-link-color: #7ca9de;
    --bs-link-color-rgb: 124, 169, 222;
    --bs-link-hover-color: #a7c6e9;
    --bs-link-hover-color-rgb: 167, 198, 233;
}

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-focus-shadow-rgb: 69, 133, 208;
    --bs-btn-active-bg: #1d5aa0;
    --bs-btn-active-border-color: #1b5496;
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-focus-shadow-rgb: 36, 112, 200;
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-disabled-color: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
}

[data-bs-theme=dark] .btn-outline-primary {
    --bs-btn-color: #7ca9de;
    --bs-btn-border-color: #7ca9de;
}

.pagination {
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(36, 112, 200, .25);
}

.nav-pills,
.list-group,
.dropdown-menu {
    --bs-nav-pills-link-active-bg: var(--accent);
    --bs-list-group-active-bg: var(--accent);
    --bs-list-group-active-border-color: var(--accent);
    --bs-dropdown-link-active-bg: var(--accent);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #92b8e4;
    box-shadow: 0 0 0 .25rem rgba(36, 112, 200, .25);
}

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

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

h1 {
    font-family: var(--brand-font);
    font-weight: 600;
}

.card {
    --bs-card-border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--card-shadow);
}

/* links are underlined only on hover, as with Bootstrap 4 */
a {
    text-decoration: none;
}

a:hover:not(.btn, .nav-link, .navbar-brand, .dropdown-item, .page-link, .list-group-item) {
    text-decoration: underline;
}

/* header, drawer and footer in the abilitynet.ch navy */
.navbar-brand-navy {
    background-color: var(--brand-navy);
}

.offcanvas-brand-navy {
    --bs-offcanvas-bg: var(--brand-navy);
    --bs-offcanvas-color: var(--brand-ink);
}

.navbar-brand {
    color: #fff;
}

.brand-icon {
    width: 1.4rem;
    height: 1.4rem;
    flex: none;
}

.brand-wordmark {
    font-family: var(--brand-font);
    font-weight: 700;
    letter-spacing: .04em;
}

.brand-app {
    font-weight: 400;
    color: var(--brand-ink);
    opacity: .8;
}

.footer-brand-navy {
    background-color: var(--brand-navy);
    color: var(--brand-ink);
}