/*
 * Light and dark themes (ADR-0188): what Bootstrap 5.3's colour modes leave to
 * the site. Loaded after Bootstrap on every page — the site's, the panel's,
 * the sign-in's. Every colour is one of Bootstrap's tokens, so it follows the
 * theme of the region it is in; what they colour is measured against WCAG in
 * both themes by tools/color-mode-audit.mjs and the panel audit.
 */

/* The switcher needs public/js/color-mode.js, which sets data-bs-theme before
   anything is drawn: without the attribute the script did not run, and the
   switcher could not switch. */
html:not([data-bs-theme]) [data-color-mode-switcher] {
    display: none !important;
}

/* The public pages' layers (ADR-0194). Light: the page light grey, what
   stands on it — an article, a card, a widget, the FAQ — white. Dark: the
   page the darkest, what stands on it lighter, as the order form is;
   Bootstrap gives a card the page's own colour there, and an article sat on
   the page with no background of its own. Utilities, as Bootstrap's bg-*
   are, and so with !important as those are. */
.site-page {
    background-color: var(--bs-tertiary-bg) !important;
}

.site-surface {
    background-color: var(--bs-body-bg) !important;
}

.site-surface-muted {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .site-page {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .site-surface {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .site-surface-muted {
    background-color: var(--bs-secondary-bg) !important;
}

/* Bootstrap's cards and accordions on the public pages are surfaces too. */
[data-bs-theme="dark"] .site-main .card {
    --bs-card-bg: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .site-main .accordion {
    --bs-accordion-bg: var(--bs-tertiary-bg);
}

/* A list or a table in a card is the card's: Bootstrap gives them the page's
   colour, and in the dark theme they sank into the card. A row under the
   pointer still lights up. */
[data-bs-theme="dark"] .site-main .card .list-group {
    --bs-list-group-bg: var(--bs-tertiary-bg);
    --bs-list-group-action-hover-bg: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .site-main .card .table {
    --bs-table-bg: transparent;
}

/* A table's light head is a fixed light grey in Bootstrap, the same in both
   themes. In the dark one it is the theme's tertiary surface, as
   .bg-body-tertiary is for .bg-light. */
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
    --bs-table-striped-color: var(--bs-emphasis-color);
    --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
    --bs-table-active-color: var(--bs-emphasis-color);
    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
    --bs-table-hover-color: var(--bs-emphasis-color);
}

/* A table row in a state's colour is, in Bootstrap, a fixed light tint in
   both themes: in the dark one the text in it takes the dark theme's light
   colours, and a link on it measured 1.81:1. There the row is the theme's
   own subtle tint, as an alert's is. In both themes, code and links in it
   take the state's text colour: Bootstrap's pink and blue, made for the
   page's surface, read 3.37:1 on the light tint. The panel's list of
   dependencies marks a package with advisories so. */
[data-bs-theme="dark"] .table-danger {
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: var(--bs-danger-bg-subtle);
    --bs-table-border-color: var(--bs-danger-border-subtle);
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
    --bs-table-striped-color: var(--bs-emphasis-color);
    --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
    --bs-table-active-color: var(--bs-emphasis-color);
    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
    --bs-table-hover-color: var(--bs-emphasis-color);
}

.table-danger code,
.table-danger a:not(.btn) {
    color: var(--bs-danger-text-emphasis);
}

/* Bootstrap's colour utilities and outline buttons keep the light theme's
   hues in the dark one: on its dark surfaces text-danger measured 3.41:1 and
   the words of an outline button 2.94:1 to 3.43:1. Inside a dark region they
   take the colours Bootstrap made for text there — its *-text-emphasis
   tokens, 6:1 and more. A light region inside a dark one (a map) resolves the
   same tokens to the light theme's. */
[data-bs-theme="dark"] .text-primary { color: var(--bs-primary-text-emphasis) !important; }
[data-bs-theme="dark"] .text-secondary { color: var(--bs-secondary-text-emphasis) !important; }
[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"] .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); }
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-text-emphasis); }
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: var(--bs-success-text-emphasis); }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); }
[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: var(--bs-dark-text-emphasis);
    --bs-btn-border-color: var(--bs-dark-text-emphasis);
}