/*
    Contrast corrections for the Bootswatch themes, keyed by the theme the
    site has chosen (_Layout puts it on <html> as data-site-theme). Linked
    after the theme, so the same selectors win here.

    Only a theme listed here is touched; the rest are as Bootswatch ships
    them. Each correction moves a colour the least distance that reaches
    WCAG AA - 4.5:1 for text - and borrows the theme's own darker shades
    where it has them, so the site still looks like its theme.
*/

/* Cosmo. Its blue, #2780e3, carries white text at 3.97:1 - every primary
   button, every link, the active page in a pager. #216dc1 is Cosmo's own
   hover shade and reaches 5.2:1; hover and pressed move one shade darker
   along Cosmo's own ramp. The variables cover links, text-primary,
   bg-primary and a primary header; the components below spell the colour
   out in the theme, so they are restated rather than inherited.

   The variables go on every light-themed element as well as the root:
   Cosmo declares them on ":root, [data-bs-theme=light]", and the layout's
   <body> is one, so the root alone would be overruled beneath it. A dark
   region keeps the lighter link colour Cosmo gives it. */
html[data-site-theme="cosmo"],
html[data-site-theme="cosmo"] [data-bs-theme="light"] {
    --bs-primary: #216dc1;
    --bs-primary-rgb: 33, 109, 193;
    --bs-link-color: #216dc1;
    --bs-link-color-rgb: 33, 109, 193;
    --bs-link-hover-color: #1d60aa;
    --bs-link-hover-color-rgb: 29, 96, 170;
}

html[data-site-theme="cosmo"] .btn-primary {
    --bs-btn-bg: #216dc1;
    --bs-btn-border-color: #216dc1;
    --bs-btn-hover-bg: #1f66b6;
    --bs-btn-hover-border-color: #1d60aa;
    --bs-btn-active-bg: #1d60aa;
    --bs-btn-active-border-color: #1a5ca8;
    --bs-btn-disabled-bg: #216dc1;
    --bs-btn-disabled-border-color: #216dc1;
}

html[data-site-theme="cosmo"] .btn-outline-primary {
    --bs-btn-color: #216dc1;
    --bs-btn-border-color: #216dc1;
    --bs-btn-hover-bg: #216dc1;
    --bs-btn-hover-border-color: #216dc1;
    --bs-btn-active-bg: #1f66b6;
    --bs-btn-active-border-color: #1f66b6;
    --bs-btn-disabled-color: #216dc1;
    --bs-btn-disabled-border-color: #216dc1;
}

html[data-site-theme="cosmo"] .pagination {
    --bs-pagination-active-bg: #216dc1;
    --bs-pagination-active-border-color: #216dc1;
}

html[data-site-theme="cosmo"] .nav-pills {
    --bs-nav-pills-link-active-bg: #216dc1;
}

html[data-site-theme="cosmo"] .dropdown-menu {
    --bs-dropdown-link-active-bg: #216dc1;
}

html[data-site-theme="cosmo"] .list-group {
    --bs-list-group-active-bg: #216dc1;
    --bs-list-group-active-border-color: #216dc1;
}

/* A floating label - the sign-in and register forms - is drawn at 65% of the
   body colour. Cosmo's body colour is a soft grey to begin with, so that is
   4.02:1; 75% is 5.35:1. */
html[data-site-theme="cosmo"] .form-floating > label {
    color: rgba(var(--bs-body-color-rgb), .75);
}

/* Headings in a dark bar: the header's navbar and its drawer, a dark second
   bar. These six light themes declare a heading colour on
   ":root, [data-bs-theme=light]", and their dark half says "inherit", which
   for a variable copies that same dark colour down from the page. A heading
   in a dark bar then read dark on dark, the drawer's site name first among
   them. There it takes the bar's own text colour. */
html[data-site-theme="cerulean"] [data-bs-theme="dark"],
html[data-site-theme="lux"] [data-bs-theme="dark"],
html[data-site-theme="minty"] [data-bs-theme="dark"],
html[data-site-theme="morph"] [data-bs-theme="dark"],
html[data-site-theme="spacelab"] [data-bs-theme="dark"],
html[data-site-theme="zephyr"] [data-bs-theme="dark"] {
    --bs-heading-color: currentColor;
}