/*
 * The organization's colour. Loaded by both layouts right after Bootstrap, before site.css, so
 * everything below it can read the four variables and anything it overrides in Bootstrap wins by
 * order with the same specificity.
 *
 * Which block applies is <html data-theme="...">, set by the layouts from the OrgTheme claim; the
 * keys and the hex values are HelperService.ThemeCatalog's, and the two must agree. The :root
 * block is the product's own blue and is what every page got before themes existed.
 *
 *   --rt-primary       the colour itself: the active menu entry, buttons, the selected day
 *   --rt-primary-dark  under a pointer, and the ink on the pale wash
 *   --rt-primary-soft  the pale wash behind the active entry and the selected day
 *   --rt-primary-rgb   the first one as "r, g, b", for rgba() shadows and focus rings
 *   --rt-primary-ink   text written in the colour (the active menu entry, an outline button);
 *                      the colour itself except where it is too light to read - yellow
 *   --rt-on-primary    text and icons on a fill of the colour; white in every theme (the
 *                      owner's call, 2026-10-10, yellow included), kept as one place to change it
 *
 * Text in the theme's colour uses -ink, never --rt-primary, and text on a filled button or tab
 * uses --rt-on-primary, never #fff.
 *
 * Only decoration follows the theme. Blue that means something - "for everyone" on an
 * evaluation, a retro palette, a card deck, the green/amber status dots - is not written in
 * these variables and must not be.
 */

:root {
    --rt-primary: #288AFC;
    --rt-primary-dark: #1B74DD;
    --rt-primary-soft: #E8F4FF;
    --rt-primary-rgb: 40, 138, 252;
    /* Resolved on <html>, where data-theme also sits, so these follow whichever theme applies. */
    --rt-primary-ink: var(--rt-primary);
    --rt-on-primary: #fff;
    /* The two Bootstrap variables that anything reads (.text-primary, .bg-primary). */
    --bs-primary: var(--rt-primary);
    --bs-primary-rgb: var(--rt-primary-rgb);
}

html[data-theme="green"] {
    --rt-primary: #16A34A;
    --rt-primary-dark: #15803D;
    --rt-primary-soft: #E7F6EC;
    --rt-primary-rgb: 22, 163, 74;
}

html[data-theme="teal"] {
    --rt-primary: #0D9488;
    --rt-primary-dark: #0F766E;
    --rt-primary-soft: #E4F5F3;
    --rt-primary-rgb: 13, 148, 136;
}

html[data-theme="purple"] {
    --rt-primary: #7C3AED;
    --rt-primary-dark: #6D28D9;
    --rt-primary-soft: #F1EBFE;
    --rt-primary-rgb: 124, 58, 237;
}

html[data-theme="orange"] {
    --rt-primary: #F97316;
    --rt-primary-dark: #EA580C;
    --rt-primary-soft: #FFF1E6;
    --rt-primary-rgb: 249, 115, 22;
}

html[data-theme="yellow"] {
    --rt-primary: #EAB308;
    --rt-primary-dark: #A16207;
    --rt-primary-soft: #FEF9C3;
    --rt-primary-rgb: 234, 179, 8;
    --rt-primary-ink: #A16207;
}

html[data-theme="red"] {
    --rt-primary: #DC2626;
    --rt-primary-dark: #B91C1C;
    --rt-primary-soft: #FDECEC;
    --rt-primary-rgb: 220, 38, 38;
}

html[data-theme="pink"] {
    --rt-primary: #EC4899;
    --rt-primary-dark: #DB2777;
    --rt-primary-soft: #FCE7F3;
    --rt-primary-rgb: 236, 72, 153;
}

html[data-theme="brown"] {
    --rt-primary: #8B5E3C;
    --rt-primary-dark: #6B4529;
    --rt-primary-soft: #F4EDE7;
    --rt-primary-rgb: 139, 94, 60;
}

html[data-theme="black"] {
    --rt-primary: #1F2937;
    --rt-primary-dark: #0F172A;
    --rt-primary-soft: #ECEFF3;
    --rt-primary-rgb: 31, 41, 55;
}

/* Bootstrap 5.1 writes its button colours out rather than reading --bs-primary, so the two
   primary variants are recoloured here with the same selectors it uses - colours only, never
   padding or radius, so a page that sizes its own buttons is left alone. */
.btn-primary {
    color: var(--rt-on-primary);
    background-color: var(--rt-primary);
    border-color: var(--rt-primary);
}
.btn-primary:hover {
    color: var(--rt-on-primary);
    background-color: var(--rt-primary-dark);
    border-color: var(--rt-primary-dark);
}
.btn-check:focus + .btn-primary,
.btn-primary:focus {
    color: var(--rt-on-primary);
    background-color: var(--rt-primary-dark);
    border-color: var(--rt-primary-dark);
    box-shadow: 0 0 0 .25rem rgba(var(--rt-primary-rgb), .5);
}
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: var(--rt-on-primary);
    background-color: var(--rt-primary-dark);
    border-color: var(--rt-primary-dark);
}
.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--rt-primary-rgb), .5);
}
.btn-primary:disabled,
.btn-primary.disabled {
    color: var(--rt-on-primary);
    background-color: var(--rt-primary);
    border-color: var(--rt-primary);
}

.btn-outline-primary {
    color: var(--rt-primary-ink);
    border-color: var(--rt-primary);
}
.btn-outline-primary:hover {
    color: var(--rt-on-primary);
    background-color: var(--rt-primary);
    border-color: var(--rt-primary);
}
.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--rt-primary-rgb), .5);
}
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
    color: var(--rt-on-primary);
    background-color: var(--rt-primary);
    border-color: var(--rt-primary);
}
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--rt-primary-rgb), .5);
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--rt-primary-ink);
    background-color: transparent;
}

/* A ticked box or switch, and a link: the two other places Bootstrap's blue shows on every page. */
.form-check-input:checked {
    background-color: var(--rt-primary);
    border-color: var(--rt-primary);
}