/*
 * Webal Blocks: dark styles for Cassiopeia itself (Phase 3 task F8, decision D11). Loaded as the Web Asset "wbl.cassiopeia-dark".
 * Plain CSS, no preprocessor. Cassiopeia has no dark mode of its own: without this file, choosing Dark (or Auto) in the Options turns the
 * Webal parts dark and leaves the page, the header, forms, tables, alerts and so on light. This file is the missing half.
 *
 * WHEN IT APPLIES (nothing here touches a light page)
 *   Every rule sits under the dark state, which is any of these three, the same three base.css uses for its dark tokens:
 *     1. <html data-wbl-theme="dark">     set before first paint by the head script wbl-theme-boot.js (Light, Dark, Auto and the visitor switch);
 *     2. no data-wbl-theme at all, site mode Dark      JavaScript off: CSS reads data-wbl-mode on the #wbl-boot JSON block, like base.css does;
 *     3. no data-wbl-theme, site mode Auto or Auto with a visitor switch, and the device is dark      JavaScript off, the second block below.
 *   The second block repeats the first word for word (a media query cannot sit inside a selector list). It is generated: edit the first block
 *   and run "node tools/cassiopeia-dark-sync.mjs"; test/cassiopeia-dark.test.mjs fails if the two ever differ.
 *   WHY IT IS REQUESTED ON EVERY PAGE, NOT ONLY WHEN DARK: Auto is only known in the browser, and pages and modules may come from the cache.
 *   So Helper/Assets.php requests the file whenever the Option is on and the Site colour mode is not Light, and the selectors decide.
 *
 * HOW IT WORKS
 *   Cassiopeia compiles Bootstrap 5.3 with an EMPTY variable prefix, so its colours are plain custom properties on :root (--body-bg, --body-color,
 *   --border-color, --primary-bg-subtle ...) that the components read. Re-declaring those in the dark state recolours most of the page by itself,
 *   the way Bootstrap's own data-bs-theme="dark" does. What Cassiopeia (or a Joomla vendor file) hard-codes with a literal colour is fixed by one
 *   small rule each. Colours come from the --wbl-* tokens when base.css is loaded (so custom brand colours and a builder's token overrides reach the
 *   page too), with the same static values as the fallback, so the file also stands alone. The few shades the tokens lack are --wbl-cd-* (cd =
 *   Cassiopeia dark). Every text pair and UI pair is measured by test/cassiopeia-dark.test.mjs (computed from this very file) and again in a real
 *   browser (test/cassiopeia-dark-browser.test.mjs).
 *   A Webal colour scheme block (data-wbl-scheme) on a dark page: a Dark block is already right; a LIGHT block gets the stock light values back
 *   for every variable below (the last nested rule of the block), so Bootstrap parts inside it read as a light block.
 *
 * WHAT IT DOES NOT DO (by design)
 *   - Forced colours: everything is inside (forced-colors: none), so a high-contrast theme sees stock Cassiopeia, untouched.
 *   - Print: everything is inside "screen", so a printed page stays light.
 *   - It never touches Webal markup: the focus ring rule leaves .wbl-* parts alone and no rule here names a .wbl- class except to leave it out.
 *   - Other extensions' own CSS (a shop, a forms extension), the editors (TinyMCE, CodeMirror), date pickers and the administrator are not
 *     covered; a child theme adds what it needs. text-bg-* badges and the other !important utility classes keep their light-mode colours (a
 *     rule here would need !important), except the six text-* colours and bg-light, which are lifted through their own variables.
 * No transitions, no animation, no geometry: switching only changes colours, so nothing can shift or flash.
 * To override one value: a rule in the child theme's user.css that starts with the same ":root[data-wbl-theme="dark"]" (user.css loads later).
 */

@media screen and (forced-colors: none) {
    :is(:root[data-wbl-theme="dark"], :root:where(:not([data-wbl-theme]):has(#wbl-boot[data-wbl-mode="dark"]))) {
        color-scheme: dark;
        background-color: var(--wbl-surface, #15171c);

        /* ---- Palette: the shades the --wbl-* tokens do not have (every literal colour of the component rules lives here, so a Light block can take them back) ---- */
        --wbl-cd-raised: #1a1d23;     /* cards, dropdowns, tabs, boxes: one step above the page */
        --wbl-cd-sunken: #101318;     /* form fields: one step below it */
        --wbl-cd-hover: #1c1f26;      /* an item under the pointer, a card header, a disabled field */
        --wbl-cd-line: #343944;       /* decorative lines (a control's own edge uses --wbl-border, 3:1) */
        --wbl-cd-veil: #ffffff0a;     /* a faint lift: the breadcrumb bar */
        --wbl-cd-stripe: #ffffff07;   /* striped table row (kept faint so a link in it still passes) */
        --wbl-cd-rowhover: #ffffff0a;
        --wbl-cd-rowactive: #ffffff0c;
        --wbl-cd-btn: #262a33;        /* the secondary button */
        --wbl-cd-btn-hover: #2f343e;
        --wbl-cd-btn-active: #353b46;
        --wbl-cd-ok: #5eb06d;         /* success and danger fills, and the text on them */
        --wbl-cd-ok-hover: #8fd39b;
        --wbl-cd-bad: #ea6b63;
        --wbl-cd-bad-hover: #f2a3a0;
        --wbl-cd-on: #0a0d14;
        --wbl-cd-shadow: #00000080;
        --wbl-cd-invert: 1;           /* 1 inverts a dark icon (accordion arrow), 0 leaves it */

        /* ---- Bootstrap variables as Cassiopeia compiles them (no bs- prefix) ---- */
        --body-color: var(--wbl-text, #e4e8f0);
        --body-color-rgb: 228, 232, 240;
        --body-bg: var(--wbl-surface, #15171c);
        --body-bg-rgb: 21, 23, 28;
        --emphasis-color: #fff;
        --emphasis-color-rgb: 255, 255, 255;
        --secondary-color: var(--wbl-muted, #a4a9b2);
        --secondary-color-rgb: 164, 169, 178;
        --secondary-bg: var(--wbl-cd-hover);
        --secondary-bg-rgb: 28, 31, 38;
        --tertiary-color: #8e949e;
        --tertiary-color-rgb: 142, 148, 158;
        --tertiary-bg: var(--wbl-cd-raised);
        --tertiary-bg-rgb: 26, 29, 35;
        --link-color: var(--wbl-link, #5587e8);
        --link-color-rgb: 85, 135, 232;
        --link-hover-color: var(--wbl-link-hover, #999ad6);
        --link-hover-color-rgb: 153, 154, 214;
        --code-color: #f08fc0;
        --border-color: var(--wbl-cd-line);
        --border-color-translucent: #ffffff26;
        --box-shadow-sm: 0 .125rem .25rem var(--wbl-cd-shadow);
        --box-shadow: 0 .5rem 1rem var(--wbl-cd-shadow);
        --box-shadow-lg: 0 1rem 3rem var(--wbl-cd-shadow);
        --focus-ring-color: #8ab0ff59;
        --form-valid-color: #8fd39b;
        --form-valid-border-color: #8fd39b;
        --form-invalid-color: #f2a3a0;
        --form-invalid-border-color: #f2a3a0;
        --btn-close-filter: invert(1) grayscale(100%) brightness(200%);

        /* ---- Alerts, list items and table variants: text, subtle background and border for each colour ---- */
        --primary-text-emphasis: #b4c6f0;
        --primary-bg-subtle: #171d2e;
        --primary-border-subtle: #2d3a5c;
        --secondary-text-emphasis: #c9ced6;
        --secondary-bg-subtle: #1f232a;
        --secondary-border-subtle: #343a44;
        --success-text-emphasis: #8fd39b;
        --success-bg-subtle: #15261a;
        --success-border-subtle: #25472d;
        --info-text-emphasis: #8cc8ea;
        --info-bg-subtle: #13232f;
        --info-border-subtle: #1f4259;
        --warning-text-emphasis: #e9c375;
        --warning-bg-subtle: #261e0e;
        --warning-border-subtle: #54421a;
        --danger-text-emphasis: #f2a3a0;
        --danger-bg-subtle: #2e1816;
        --danger-border-subtle: #5c2926;
        --light-text-emphasis: #d6dae1;
        --light-bg-subtle: #1f232a;
        --light-border-subtle: #343a44;
        --dark-text-emphasis: #c9ced6;
        --dark-bg-subtle: #0f1115;
        --dark-border-subtle: #2a2e36;

        /* ---- Page ---- */
        & body {
            color: var(--body-color);
            background-color: var(--body-bg);
        }

        & figcaption,
        & .blockquote-footer {
            color: var(--secondary-color);
        }

        /* ---- Header and footer bands (Cassiopeia's own; a header that holds the Webal navbar and a footer band that holds a Webal footer paint
           themselves, so they are left out): the brand colours, darkened one step. Multiply on a grey base keeps the template's gradient and
           its direction (also right to left) and only lowers the lightness ---- */
        & header.container-header:not(:has(.wbl-navbar)),
        & footer.footer:not(:has(.wbl-footer)) {
            background-color: #a2a4ad;
            background-blend-mode: multiply;
            box-shadow: none;
        }

        & .container-header .mod-menu :is(.mod-menu__sub, .mm-collapse):not(.footer *),
        & .metismenu.mod-menu .mm-collapse:not(.footer *) {
            background-color: var(--wbl-cd-raised);
            color: var(--body-color);
            box-shadow: 0 0 .5em var(--wbl-cd-shadow);
        }

        & .container-header .mod-menu .parent > ul,
        & .metismenu.mod-menu .parent > ul {
            color: var(--body-color);
        }

        & .sidebar-right .metismenu .mm-collapse,
        & .sidebar-left .metismenu .mm-collapse,
        & .metismenu.mod-menu .mm-collapse > li.parent > ul {
            background-color: var(--wbl-cd-veil);
        }

        & .metismenu.mod-menu .metismenu-item > a:focus,
        & .metismenu.mod-menu .metismenu-item > button:focus {
            outline-color: var(--wbl-border, #6c727d);
        }

        /* ---- Breadcrumbs, boxed blog items, cards ---- */
        & .breadcrumb {
            --breadcrumb-item-active-color: var(--secondary-color);
            background-color: var(--wbl-cd-veil);
        }

        & .boxed .blog-item,
        & .no-card .newsflash-horiz li {
            background-color: var(--wbl-cd-raised);
            border-color: var(--wbl-cd-line);
            box-shadow: inset 0 3px 0 var(--cassiopeia-color-primary, #112855);
        }

        & .card {
            --card-bg: var(--wbl-cd-raised);
            --card-border-color: var(--wbl-cd-line);
            --card-cap-bg: var(--wbl-cd-hover);
        }

        /* ---- Buttons: the accent fill with the readable text colour from base.css; the other colours lifted for the dark page ---- */
        & .btn-primary {
            --btn-color: var(--wbl-on-accent, #0a0d14);
            --btn-hover-color: var(--wbl-cd-on);
            --btn-active-color: var(--wbl-cd-on);
            --btn-focus-shadow-rgb: 138, 176, 255;
            color: var(--btn-color);
            background-color: var(--wbl-accent, #6a87bb);
            border-color: var(--wbl-accent, #6a87bb);
        }

        & .btn-primary:is(:hover, :focus-visible, :active) {
            color: var(--wbl-cd-on);
            background-color: var(--wbl-link-hover, #999ad6);
            border-color: var(--wbl-link-hover, #999ad6);
        }

        & .btn-secondary {
            --btn-color: var(--body-color);
            --btn-bg: var(--wbl-cd-btn);
            --btn-border-color: var(--wbl-border, #6c727d);
            --btn-hover-color: var(--body-color);
            --btn-hover-bg: var(--wbl-cd-btn-hover);
            --btn-hover-border-color: var(--body-color);
            --btn-active-color: var(--body-color);
            --btn-active-bg: var(--wbl-cd-btn-active);
            --btn-active-border-color: var(--body-color);
            --btn-disabled-color: var(--body-color);
            --btn-disabled-bg: var(--wbl-cd-btn);
            --btn-disabled-border-color: var(--wbl-border, #6c727d);
        }

        & .btn-success {
            --btn-color: var(--wbl-cd-on);
            --btn-bg: var(--wbl-cd-ok);
            --btn-border-color: var(--wbl-cd-ok);
            --btn-hover-color: var(--wbl-cd-on);
            --btn-hover-bg: var(--wbl-cd-ok-hover);
            --btn-hover-border-color: var(--wbl-cd-ok-hover);
            --btn-active-color: var(--wbl-cd-on);
            --btn-active-bg: var(--wbl-cd-ok-hover);
            --btn-active-border-color: var(--wbl-cd-ok-hover);
            --btn-disabled-color: var(--wbl-cd-on);
            --btn-disabled-bg: var(--wbl-cd-ok);
            --btn-disabled-border-color: var(--wbl-cd-ok);
        }

        & .btn-danger {
            --btn-color: var(--wbl-cd-on);
            --btn-bg: var(--wbl-cd-bad);
            --btn-border-color: var(--wbl-cd-bad);
            --btn-hover-color: var(--wbl-cd-on);
            --btn-hover-bg: var(--wbl-cd-bad-hover);
            --btn-hover-border-color: var(--wbl-cd-bad-hover);
            --btn-active-color: var(--wbl-cd-on);
            --btn-active-bg: var(--wbl-cd-bad-hover);
            --btn-active-border-color: var(--wbl-cd-bad-hover);
            --btn-disabled-color: var(--wbl-cd-on);
            --btn-disabled-bg: var(--wbl-cd-bad);
            --btn-disabled-border-color: var(--wbl-cd-bad);
        }

        & .btn-outline-primary,
        & .btn-outline-secondary {
            --btn-color: var(--link-color);
            --btn-border-color: var(--link-color);
            --btn-hover-color: var(--wbl-cd-on);
            --btn-hover-bg: var(--link-color);
            --btn-hover-border-color: var(--link-color);
            --btn-active-color: var(--wbl-cd-on);
            --btn-active-bg: var(--link-color);
            --btn-active-border-color: var(--link-color);
            --btn-disabled-color: var(--link-color);
            --btn-disabled-border-color: var(--link-color);
        }

        /* ---- Forms ---- */
        & .form-control,
        & .form-select,
        & .custom-select,
        & .input-group-text,
        & .btn-group > input {
            border-color: var(--wbl-border, #6c727d);
        }

        & .form-control,
        & .form-select,
        & .custom-select {
            background-color: var(--wbl-cd-sunken);
        }

        & .form-control:disabled,
        & .form-select:disabled,
        & .custom-select:disabled {
            background-color: var(--secondary-bg);
        }

        /* The select arrow: two gradients that draw a chevron in the text colour (Cassiopeia's own is a picture with a white box in it). size="1" is an ordinary dropdown (Phoca prints it), so it gets the arrow too. */
        & .form-select:not([multiple], [size]:not([size="1"])),
        & .custom-select:not([multiple], [size]:not([size="1"])) {
            background-image: linear-gradient(45deg, transparent 50%, var(--body-color) 50%), linear-gradient(135deg, var(--body-color) 50%, transparent 50%);
            background-position: calc(100% - 1.4rem) 55%, calc(100% - 1rem) 55%;
            background-size: .4rem .4rem;
            background-repeat: no-repeat;
        }

        & :is(.form-select, .custom-select):not([multiple], [size]:not([size="1"])):dir(rtl) {
            background-position: 1.4rem 55%, 1rem 55%;
        }

        & .form-select[multiple],
        & .form-select optgroup,
        & .form-select option,
        & .custom-select option {
            background-color: var(--wbl-cd-sunken);
            color: var(--body-color);
        }

        & .form-control:focus,
        & .form-select:focus,
        & .custom-select:focus,
        & .form-check-input:focus {
            border-color: var(--wbl-focus, #8ab0ff);
            box-shadow: none;
        }

        & .form-check-input {
            --form-check-bg: var(--wbl-cd-sunken);
            border-color: var(--wbl-border, #6c727d);
        }

        & .form-check-input:checked,
        & .form-check-input[type="checkbox"]:indeterminate {
            background-color: var(--wbl-accent, #6a87bb);
            border-color: var(--wbl-accent, #6a87bb);
        }

        & .invalid,
        & .invalid-feedback {
            color: var(--form-invalid-color);
            border-color: var(--form-invalid-border-color);
        }

        & .valid,
        & .valid-feedback {
            border-color: var(--form-valid-border-color);
        }

        & div.subform-repeatable-group {
            border-color: var(--wbl-cd-line);
        }

        & .awesomplete > ul,
        & [role="tooltip"]:not(.show) {
            background: var(--wbl-cd-raised);
            color: var(--body-color);
            border-color: var(--wbl-border, #6c727d);
        }

        /* ---- Smart Search results, language switcher, article voting: the greys and light fills their own stylesheets hard-code ---- */
        & :is(.result__title-url, .result__date) {
            color: var(--secondary-color);
        }

        & .sorting__list-li-active,
        & div.mod-languages ul li.lang-active {
            background-color: var(--wbl-cd-raised);
        }

        & .content_rating .vote-star-empty svg {
            fill: var(--wbl-border, #6c727d);
        }

        /* ---- Switching is instant: Bootstrap fades the colours of a button, a field, a tab or menu link and a pager link over 150 ms. A page that turns dark while it is
              open (the visitor's switch) would show each of them part way between light and dark for that time, and the article pager read 3.86:1 in that moment. ---- */
        & :where(.btn, .form-control, .form-select, .nav-link, .page-link, .accordion-button) { transition: none; }
        & .form-control::file-selector-button { transition: none; }

        /* ---- Tables ---- */
        & .table {
            --table-striped-bg: var(--wbl-cd-stripe);
            --table-hover-bg: var(--wbl-cd-rowhover);
            --table-active-bg: var(--wbl-cd-rowactive);
        }

        /* ---- Pagination, dropdowns, list groups, pills, accordions: the "active" navy becomes the accent ---- */
        & .pagination {
            --pagination-active-color: var(--wbl-on-accent, #0a0d14);
            --pagination-active-bg: var(--wbl-accent, #6a87bb);
            --pagination-active-border-color: var(--wbl-accent, #6a87bb);
            --pagination-focus-box-shadow: none;
        }

        & .dropdown-menu {
            --dropdown-bg: var(--wbl-cd-raised);
            --dropdown-link-hover-bg: var(--wbl-cd-hover);
            --dropdown-link-active-color: var(--wbl-on-accent, #0a0d14);
            --dropdown-link-active-bg: var(--wbl-accent, #6a87bb);
            --dropdown-header-color: var(--secondary-color);
            background-color: var(--wbl-cd-raised);
            border-color: var(--wbl-cd-line);
        }

        & .list-group {
            --list-group-active-color: var(--wbl-on-accent, #0a0d14);
            --list-group-active-bg: var(--wbl-accent, #6a87bb);
            --list-group-active-border-color: var(--wbl-accent, #6a87bb);
            --list-group-action-hover-bg: var(--wbl-cd-hover);
        }

        & .accordion .list-group-item {
            color: var(--link-color);
        }

        & .nav-pills {
            --nav-pills-link-active-color: var(--wbl-on-accent, #0a0d14);
            --nav-pills-link-active-bg: var(--wbl-accent, #6a87bb);
        }

        & .accordion {
            --accordion-active-color: var(--body-color);
            --accordion-active-bg: var(--wbl-cd-raised);
            --accordion-btn-focus-box-shadow: none;
        }

        & .accordion-button::after {
            filter: invert(var(--wbl-cd-invert));
        }

        /* ---- Tabs (Cassiopeia's own nav-tabs and Joomla's joomla-tab element) ---- */
        & .nav.nav-tabs {
            background-color: var(--wbl-cd-raised);
            border-color: var(--wbl-cd-line);
            box-shadow: none;
        }

        & .nav.nav-tabs .nav-link {
            color: var(--link-color);
        }

        & .nav.nav-tabs .nav-link.active {
            background-color: var(--wbl-cd-hover);
            background-image: none;
            color: var(--body-color);
        }

        & .nav-tabs + .tab-content,
        & joomla-tab > joomla-tab-element {
            background: var(--wbl-cd-raised);
            border-color: var(--wbl-cd-line);
            box-shadow: none;
        }

        & joomla-tab button[role="tab"] {
            color: var(--body-color);
        }

        & joomla-tab button[role="tab"][aria-selected="true"],
        & joomla-tab button[role="tab"][aria-expanded="true"] {
            background-color: var(--wbl-cd-raised);
            background-image: none;
        }

        /* ---- System messages (joomla-alert) and .alert blocks ---- */
        & #system-message-container joomla-alert,
        & #system-message-container joomla-alert[type] {
            color: var(--body-color);
            background-color: var(--wbl-cd-raised);
        }

        & .alert a:not(.btn) {
            color: inherit;
        }

        /* ---- Keyboard focus: Bootstrap and Cassiopeia remove the browser's ring and draw a faint navy shadow, which is invisible on a dark page.
           One real ring for Cassiopeia's own controls; Webal parts keep the ring they draw themselves ---- */
        & :where(a, button, input, select, textarea, summary, [tabindex]):where(:not(.wbl-module *, .wbl-navbar *, .wbl-menu *, .wbl-mega *, .wbl-totop *)):focus-visible {
            outline: 3px solid var(--wbl-focus, #8ab0ff);
            outline-offset: 2px;
        }

        /* ---- Not inside a Light block: the check marks and switches (pictures with a fixed colour, drawn for the dark page) and the colour
           utilities. The !important utility classes (text-danger ...) read their colour from a variable, so lifting it ON THE ELEMENT recolours them
           without !important ---- */
        & :where(:not([data-wbl-scheme="light"] *)) {
            &.text-primary { --primary-rgb: 138, 160, 207; }
            &.text-secondary { --secondary-rgb: 164, 169, 178; }
            &.text-success { --success-rgb: 143, 211, 155; }
            &.text-info { --info-rgb: 140, 200, 234; }
            &.text-warning { --warning-rgb: 233, 195, 117; }
            &.text-danger { --danger-rgb: 242, 163, 160; }
            &.bg-light { --light-rgb: 26, 29, 35; }

            &.form-check-input:checked[type="checkbox"] {
                --form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230a0d14' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
            }

            &.form-check-input:checked[type="radio"] {
                --form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230a0d14'/%3e%3c/svg%3e");
            }

            &.form-check-input[type="checkbox"]:indeterminate {
                --form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230a0d14' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
            }

            .form-switch &.form-check-input {
                --form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a4a9b2'/%3e%3c/svg%3e");
            }

            .form-switch &.form-check-input:checked {
                --form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230a0d14'/%3e%3c/svg%3e");
            }
        }

        /* ---- A LIGHT Webal block inside the dark page: Bootstrap's colours go back to stock light, the neutral ones from the block's own tokens ---- */
        & [data-wbl-scheme="light"] {
            color-scheme: light;
            --wbl-cd-raised: var(--wbl-surface);
            --wbl-cd-sunken: var(--wbl-surface);
            --wbl-cd-hover: #f4f6f8;
            --wbl-cd-line: #dfe3e7;
            --wbl-cd-veil: #00000008;
            --wbl-cd-stripe: #0000000d;
            --wbl-cd-rowhover: #00000013;
            --wbl-cd-rowactive: #0000001a;
            --wbl-cd-btn: #fff;
            --wbl-cd-btn-hover: #f9fafb;
            --wbl-cd-btn-active: #eaedf0;
            --wbl-cd-ok: #448344;
            --wbl-cd-ok-hover: #397039;
            --wbl-cd-bad: #a51f18;
            --wbl-cd-bad-hover: #8c1a14;
            --wbl-cd-on: #fff;
            --wbl-cd-shadow: #00000026;
            --wbl-cd-invert: 0;
            --body-color: var(--wbl-text);
            --body-color-rgb: 34, 38, 42;
            --body-bg: var(--wbl-surface);
            --body-bg-rgb: 255, 255, 255;
            --emphasis-color: var(--wbl-text);
            --emphasis-color-rgb: 0, 0, 0;
            --secondary-color: var(--wbl-muted);
            --secondary-color-rgb: 34, 38, 42;
            --secondary-bg: #eaedf0;
            --secondary-bg-rgb: 234, 237, 240;
            --tertiary-color: #22262a80;
            --tertiary-color-rgb: 34, 38, 42;
            --tertiary-bg: #f9fafb;
            --tertiary-bg-rgb: 249, 250, 251;
            --link-color: var(--wbl-link);
            --link-color-rgb: 34, 79, 170;
            --link-hover-color: var(--wbl-link-hover);
            --link-hover-color-rgb: 66, 64, 119;
            --code-color: #e93f8e;
            --border-color: var(--wbl-cd-line);
            --border-color-translucent: #0000002d;
            --focus-ring-color: #01015640;
            --form-valid-color: #448344;
            --form-valid-border-color: #448344;
            --form-invalid-color: #a51f18;
            --form-invalid-border-color: #a51f18;
            --btn-close-filter: ;
            --primary-text-emphasis: #002;
            --primary-bg-subtle: #ccd;
            --primary-border-subtle: #99b;
            --secondary-text-emphasis: #2c2f32;
            --secondary-bg-subtle: #e2e3e5;
            --secondary-border-subtle: #c5c8cb;
            --success-text-emphasis: #1b351b;
            --success-bg-subtle: #dae6da;
            --success-border-subtle: #b4ceb4;
            --info-text-emphasis: #132838;
            --info-bg-subtle: #d6e0e8;
            --info-border-subtle: #acc1d1;
            --warning-text-emphasis: #452700;
            --warning-bg-subtle: #efe0cc;
            --warning-border-subtle: #dec099;
            --danger-text-emphasis: #420c09;
            --danger-bg-subtle: #edd2d1;
            --danger-border-subtle: #dba5a2;
            --light-text-emphasis: #484f56;
            --light-bg-subtle: #fcfcfd;
            --light-border-subtle: #eaedf0;
            --dark-text-emphasis: #484f56;
            --dark-bg-subtle: #ced4da;
            --dark-border-subtle: #adb5bd;
        }
    }
}

/* wbl:copy:start */
@media screen and (forced-colors: none) and (prefers-color-scheme: dark) {
    :root:root:where(:not([data-wbl-theme]):has(#wbl-boot[data-wbl-mode="auto"], #wbl-boot[data-wbl-mode="switch"])) {
        color-scheme: dark;
        background-color: var(--wbl-surface, #15171c);

        /* ---- Palette: the shades the --wbl-* tokens do not have (every literal colour of the component rules lives here, so a Light block can take them back) ---- */
        --wbl-cd-raised: #1a1d23;     /* cards, dropdowns, tabs, boxes: one step above the page */
        --wbl-cd-sunken: #101318;     /* form fields: one step below it */
        --wbl-cd-hover: #1c1f26;      /* an item under the pointer, a card header, a disabled field */
        --wbl-cd-line: #343944;       /* decorative lines (a control's own edge uses --wbl-border, 3:1) */
        --wbl-cd-veil: #ffffff0a;     /* a faint lift: the breadcrumb bar */
        --wbl-cd-stripe: #ffffff07;   /* striped table row (kept faint so a link in it still passes) */
        --wbl-cd-rowhover: #ffffff0a;
        --wbl-cd-rowactive: #ffffff0c;
        --wbl-cd-btn: #262a33;        /* the secondary button */
        --wbl-cd-btn-hover: #2f343e;
        --wbl-cd-btn-active: #353b46;
        --wbl-cd-ok: #5eb06d;         /* success and danger fills, and the text on them */
        --wbl-cd-ok-hover: #8fd39b;
        --wbl-cd-bad: #ea6b63;
        --wbl-cd-bad-hover: #f2a3a0;
        --wbl-cd-on: #0a0d14;
        --wbl-cd-shadow: #00000080;
        --wbl-cd-invert: 1;           /* 1 inverts a dark icon (accordion arrow), 0 leaves it */

        /* ---- Bootstrap variables as Cassiopeia compiles them (no bs- prefix) ---- */
        --body-color: var(--wbl-text, #e4e8f0);
        --body-color-rgb: 228, 232, 240;
        --body-bg: var(--wbl-surface, #15171c);
        --body-bg-rgb: 21, 23, 28;
        --emphasis-color: #fff;
        --emphasis-color-rgb: 255, 255, 255;
        --secondary-color: var(--wbl-muted, #a4a9b2);
        --secondary-color-rgb: 164, 169, 178;
        --secondary-bg: var(--wbl-cd-hover);
        --secondary-bg-rgb: 28, 31, 38;
        --tertiary-color: #8e949e;
        --tertiary-color-rgb: 142, 148, 158;
        --tertiary-bg: var(--wbl-cd-raised);
        --tertiary-bg-rgb: 26, 29, 35;
        --link-color: var(--wbl-link, #5587e8);
        --link-color-rgb: 85, 135, 232;
        --link-hover-color: var(--wbl-link-hover, #999ad6);
        --link-hover-color-rgb: 153, 154, 214;
        --code-color: #f08fc0;
        --border-color: var(--wbl-cd-line);
        --border-color-translucent: #ffffff26;
        --box-shadow-sm: 0 .125rem .25rem var(--wbl-cd-shadow);
        --box-shadow: 0 .5rem 1rem var(--wbl-cd-shadow);
        --box-shadow-lg: 0 1rem 3rem var(--wbl-cd-shadow);
        --focus-ring-color: #8ab0ff59;
        --form-valid-color: #8fd39b;
        --form-valid-border-color: #8fd39b;
        --form-invalid-color: #f2a3a0;
        --form-invalid-border-color: #f2a3a0;
        --btn-close-filter: invert(1) grayscale(100%) brightness(200%);

        /* ---- Alerts, list items and table variants: text, subtle background and border for each colour ---- */
        --primary-text-emphasis: #b4c6f0;
        --primary-bg-subtle: #171d2e;
        --primary-border-subtle: #2d3a5c;
        --secondary-text-emphasis: #c9ced6;
        --secondary-bg-subtle: #1f232a;
        --secondary-border-subtle: #343a44;
        --success-text-emphasis: #8fd39b;
        --success-bg-subtle: #15261a;
        --success-border-subtle: #25472d;
        --info-text-emphasis: #8cc8ea;
        --info-bg-subtle: #13232f;
        --info-border-subtle: #1f4259;
        --warning-text-emphasis: #e9c375;
        --warning-bg-subtle: #261e0e;
        --warning-border-subtle: #54421a;
        --danger-text-emphasis: #f2a3a0;
        --danger-bg-subtle: #2e1816;
        --danger-border-subtle: #5c2926;
        --light-text-emphasis: #d6dae1;
        --light-bg-subtle: #1f232a;
        --light-border-subtle: #343a44;
        --dark-text-emphasis: #c9ced6;
        --dark-bg-subtle: #0f1115;
        --dark-border-subtle: #2a2e36;

        /* ---- Page ---- */
        & body {
            color: var(--body-color);
            background-color: var(--body-bg);
        }

        & figcaption,
        & .blockquote-footer {
            color: var(--secondary-color);
        }

        /* ---- Header and footer bands (Cassiopeia's own; a header that holds the Webal navbar and a footer band that holds a Webal footer paint
           themselves, so they are left out): the brand colours, darkened one step. Multiply on a grey base keeps the template's gradient and
           its direction (also right to left) and only lowers the lightness ---- */
        & header.container-header:not(:has(.wbl-navbar)),
        & footer.footer:not(:has(.wbl-footer)) {
            background-color: #a2a4ad;
            background-blend-mode: multiply;
            box-shadow: none;
        }

        & .container-header .mod-menu :is(.mod-menu__sub, .mm-collapse):not(.footer *),
        & .metismenu.mod-menu .mm-collapse:not(.footer *) {
            background-color: var(--wbl-cd-raised);
            color: var(--body-color);
            box-shadow: 0 0 .5em var(--wbl-cd-shadow);
        }

        & .container-header .mod-menu .parent > ul,
        & .metismenu.mod-menu .parent > ul {
            color: var(--body-color);
        }

        & .sidebar-right .metismenu .mm-collapse,
        & .sidebar-left .metismenu .mm-collapse,
        & .metismenu.mod-menu .mm-collapse > li.parent > ul {
            background-color: var(--wbl-cd-veil);
        }

        & .metismenu.mod-menu .metismenu-item > a:focus,
        & .metismenu.mod-menu .metismenu-item > button:focus {
            outline-color: var(--wbl-border, #6c727d);
        }

        /* ---- Breadcrumbs, boxed blog items, cards ---- */
        & .breadcrumb {
            --breadcrumb-item-active-color: var(--secondary-color);
            background-color: var(--wbl-cd-veil);
        }

        & .boxed .blog-item,
        & .no-card .newsflash-horiz li {
            background-color: var(--wbl-cd-raised);
            border-color: var(--wbl-cd-line);
            box-shadow: inset 0 3px 0 var(--cassiopeia-color-primary, #112855);
        }

        & .card {
            --card-bg: var(--wbl-cd-raised);
            --card-border-color: var(--wbl-cd-line);
            --card-cap-bg: var(--wbl-cd-hover);
        }

        /* ---- Buttons: the accent fill with the readable text colour from base.css; the other colours lifted for the dark page ---- */
        & .btn-primary {
            --btn-color: var(--wbl-on-accent, #0a0d14);
            --btn-hover-color: var(--wbl-cd-on);
            --btn-active-color: var(--wbl-cd-on);
            --btn-focus-shadow-rgb: 138, 176, 255;
            color: var(--btn-color);
            background-color: var(--wbl-accent, #6a87bb);
            border-color: var(--wbl-accent, #6a87bb);
        }

        & .btn-primary:is(:hover, :focus-visible, :active) {
            color: var(--wbl-cd-on);
            background-color: var(--wbl-link-hover, #999ad6);
            border-color: var(--wbl-link-hover, #999ad6);
        }

        & .btn-secondary {
            --btn-color: var(--body-color);
            --btn-bg: var(--wbl-cd-btn);
            --btn-border-color: var(--wbl-border, #6c727d);
            --btn-hover-color: var(--body-color);
            --btn-hover-bg: var(--wbl-cd-btn-hover);
            --btn-hover-border-color: var(--body-color);
            --btn-active-color: var(--body-color);
            --btn-active-bg: var(--wbl-cd-btn-active);
            --btn-active-border-color: var(--body-color);
            --btn-disabled-color: var(--body-color);
            --btn-disabled-bg: var(--wbl-cd-btn);
            --btn-disabled-border-color: var(--wbl-border, #6c727d);
        }

        & .btn-success {
            --btn-color: var(--wbl-cd-on);
            --btn-bg: var(--wbl-cd-ok);
            --btn-border-color: var(--wbl-cd-ok);
            --btn-hover-color: var(--wbl-cd-on);
            --btn-hover-bg: var(--wbl-cd-ok-hover);
            --btn-hover-border-color: var(--wbl-cd-ok-hover);
            --btn-active-color: var(--wbl-cd-on);
            --btn-active-bg: var(--wbl-cd-ok-hover);
            --btn-active-border-color: var(--wbl-cd-ok-hover);
            --btn-disabled-color: var(--wbl-cd-on);
            --btn-disabled-bg: var(--wbl-cd-ok);
            --btn-disabled-border-color: var(--wbl-cd-ok);
        }

        & .btn-danger {
            --btn-color: var(--wbl-cd-on);
            --btn-bg: var(--wbl-cd-bad);
            --btn-border-color: var(--wbl-cd-bad);
            --btn-hover-color: var(--wbl-cd-on);
            --btn-hover-bg: var(--wbl-cd-bad-hover);
            --btn-hover-border-color: var(--wbl-cd-bad-hover);
            --btn-active-color: var(--wbl-cd-on);
            --btn-active-bg: var(--wbl-cd-bad-hover);
            --btn-active-border-color: var(--wbl-cd-bad-hover);
            --btn-disabled-color: var(--wbl-cd-on);
            --btn-disabled-bg: var(--wbl-cd-bad);
            --btn-disabled-border-color: var(--wbl-cd-bad);
        }

        & .btn-outline-primary,
        & .btn-outline-secondary {
            --btn-color: var(--link-color);
            --btn-border-color: var(--link-color);
            --btn-hover-color: var(--wbl-cd-on);
            --btn-hover-bg: var(--link-color);
            --btn-hover-border-color: var(--link-color);
            --btn-active-color: var(--wbl-cd-on);
            --btn-active-bg: var(--link-color);
            --btn-active-border-color: var(--link-color);
            --btn-disabled-color: var(--link-color);
            --btn-disabled-border-color: var(--link-color);
        }

        /* ---- Forms ---- */
        & .form-control,
        & .form-select,
        & .custom-select,
        & .input-group-text,
        & .btn-group > input {
            border-color: var(--wbl-border, #6c727d);
        }

        & .form-control,
        & .form-select,
        & .custom-select {
            background-color: var(--wbl-cd-sunken);
        }

        & .form-control:disabled,
        & .form-select:disabled,
        & .custom-select:disabled {
            background-color: var(--secondary-bg);
        }

        /* The select arrow: two gradients that draw a chevron in the text colour (Cassiopeia's own is a picture with a white box in it). size="1" is an ordinary dropdown (Phoca prints it), so it gets the arrow too. */
        & .form-select:not([multiple], [size]:not([size="1"])),
        & .custom-select:not([multiple], [size]:not([size="1"])) {
            background-image: linear-gradient(45deg, transparent 50%, var(--body-color) 50%), linear-gradient(135deg, var(--body-color) 50%, transparent 50%);
            background-position: calc(100% - 1.4rem) 55%, calc(100% - 1rem) 55%;
            background-size: .4rem .4rem;
            background-repeat: no-repeat;
        }

        & :is(.form-select, .custom-select):not([multiple], [size]:not([size="1"])):dir(rtl) {
            background-position: 1.4rem 55%, 1rem 55%;
        }

        & .form-select[multiple],
        & .form-select optgroup,
        & .form-select option,
        & .custom-select option {
            background-color: var(--wbl-cd-sunken);
            color: var(--body-color);
        }

        & .form-control:focus,
        & .form-select:focus,
        & .custom-select:focus,
        & .form-check-input:focus {
            border-color: var(--wbl-focus, #8ab0ff);
            box-shadow: none;
        }

        & .form-check-input {
            --form-check-bg: var(--wbl-cd-sunken);
            border-color: var(--wbl-border, #6c727d);
        }

        & .form-check-input:checked,
        & .form-check-input[type="checkbox"]:indeterminate {
            background-color: var(--wbl-accent, #6a87bb);
            border-color: var(--wbl-accent, #6a87bb);
        }

        & .invalid,
        & .invalid-feedback {
            color: var(--form-invalid-color);
            border-color: var(--form-invalid-border-color);
        }

        & .valid,
        & .valid-feedback {
            border-color: var(--form-valid-border-color);
        }

        & div.subform-repeatable-group {
            border-color: var(--wbl-cd-line);
        }

        & .awesomplete > ul,
        & [role="tooltip"]:not(.show) {
            background: var(--wbl-cd-raised);
            color: var(--body-color);
            border-color: var(--wbl-border, #6c727d);
        }

        /* ---- Smart Search results, language switcher, article voting: the greys and light fills their own stylesheets hard-code ---- */
        & :is(.result__title-url, .result__date) {
            color: var(--secondary-color);
        }

        & .sorting__list-li-active,
        & div.mod-languages ul li.lang-active {
            background-color: var(--wbl-cd-raised);
        }

        & .content_rating .vote-star-empty svg {
            fill: var(--wbl-border, #6c727d);
        }

        /* ---- Switching is instant: Bootstrap fades the colours of a button, a field, a tab or menu link and a pager link over 150 ms. A page that turns dark while it is
              open (the visitor's switch) would show each of them part way between light and dark for that time, and the article pager read 3.86:1 in that moment. ---- */
        & :where(.btn, .form-control, .form-select, .nav-link, .page-link, .accordion-button) { transition: none; }
        & .form-control::file-selector-button { transition: none; }

        /* ---- Tables ---- */
        & .table {
            --table-striped-bg: var(--wbl-cd-stripe);
            --table-hover-bg: var(--wbl-cd-rowhover);
            --table-active-bg: var(--wbl-cd-rowactive);
        }

        /* ---- Pagination, dropdowns, list groups, pills, accordions: the "active" navy becomes the accent ---- */
        & .pagination {
            --pagination-active-color: var(--wbl-on-accent, #0a0d14);
            --pagination-active-bg: var(--wbl-accent, #6a87bb);
            --pagination-active-border-color: var(--wbl-accent, #6a87bb);
            --pagination-focus-box-shadow: none;
        }

        & .dropdown-menu {
            --dropdown-bg: var(--wbl-cd-raised);
            --dropdown-link-hover-bg: var(--wbl-cd-hover);
            --dropdown-link-active-color: var(--wbl-on-accent, #0a0d14);
            --dropdown-link-active-bg: var(--wbl-accent, #6a87bb);
            --dropdown-header-color: var(--secondary-color);
            background-color: var(--wbl-cd-raised);
            border-color: var(--wbl-cd-line);
        }

        & .list-group {
            --list-group-active-color: var(--wbl-on-accent, #0a0d14);
            --list-group-active-bg: var(--wbl-accent, #6a87bb);
            --list-group-active-border-color: var(--wbl-accent, #6a87bb);
            --list-group-action-hover-bg: var(--wbl-cd-hover);
        }

        & .accordion .list-group-item {
            color: var(--link-color);
        }

        & .nav-pills {
            --nav-pills-link-active-color: var(--wbl-on-accent, #0a0d14);
            --nav-pills-link-active-bg: var(--wbl-accent, #6a87bb);
        }

        & .accordion {
            --accordion-active-color: var(--body-color);
            --accordion-active-bg: var(--wbl-cd-raised);
            --accordion-btn-focus-box-shadow: none;
        }

        & .accordion-button::after {
            filter: invert(var(--wbl-cd-invert));
        }

        /* ---- Tabs (Cassiopeia's own nav-tabs and Joomla's joomla-tab element) ---- */
        & .nav.nav-tabs {
            background-color: var(--wbl-cd-raised);
            border-color: var(--wbl-cd-line);
            box-shadow: none;
        }

        & .nav.nav-tabs .nav-link {
            color: var(--link-color);
        }

        & .nav.nav-tabs .nav-link.active {
            background-color: var(--wbl-cd-hover);
            background-image: none;
            color: var(--body-color);
        }

        & .nav-tabs + .tab-content,
        & joomla-tab > joomla-tab-element {
            background: var(--wbl-cd-raised);
            border-color: var(--wbl-cd-line);
            box-shadow: none;
        }

        & joomla-tab button[role="tab"] {
            color: var(--body-color);
        }

        & joomla-tab button[role="tab"][aria-selected="true"],
        & joomla-tab button[role="tab"][aria-expanded="true"] {
            background-color: var(--wbl-cd-raised);
            background-image: none;
        }

        /* ---- System messages (joomla-alert) and .alert blocks ---- */
        & #system-message-container joomla-alert,
        & #system-message-container joomla-alert[type] {
            color: var(--body-color);
            background-color: var(--wbl-cd-raised);
        }

        & .alert a:not(.btn) {
            color: inherit;
        }

        /* ---- Keyboard focus: Bootstrap and Cassiopeia remove the browser's ring and draw a faint navy shadow, which is invisible on a dark page.
           One real ring for Cassiopeia's own controls; Webal parts keep the ring they draw themselves ---- */
        & :where(a, button, input, select, textarea, summary, [tabindex]):where(:not(.wbl-module *, .wbl-navbar *, .wbl-menu *, .wbl-mega *, .wbl-totop *)):focus-visible {
            outline: 3px solid var(--wbl-focus, #8ab0ff);
            outline-offset: 2px;
        }

        /* ---- Not inside a Light block: the check marks and switches (pictures with a fixed colour, drawn for the dark page) and the colour
           utilities. The !important utility classes (text-danger ...) read their colour from a variable, so lifting it ON THE ELEMENT recolours them
           without !important ---- */
        & :where(:not([data-wbl-scheme="light"] *)) {
            &.text-primary { --primary-rgb: 138, 160, 207; }
            &.text-secondary { --secondary-rgb: 164, 169, 178; }
            &.text-success { --success-rgb: 143, 211, 155; }
            &.text-info { --info-rgb: 140, 200, 234; }
            &.text-warning { --warning-rgb: 233, 195, 117; }
            &.text-danger { --danger-rgb: 242, 163, 160; }
            &.bg-light { --light-rgb: 26, 29, 35; }

            &.form-check-input:checked[type="checkbox"] {
                --form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230a0d14' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
            }

            &.form-check-input:checked[type="radio"] {
                --form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230a0d14'/%3e%3c/svg%3e");
            }

            &.form-check-input[type="checkbox"]:indeterminate {
                --form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230a0d14' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
            }

            .form-switch &.form-check-input {
                --form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a4a9b2'/%3e%3c/svg%3e");
            }

            .form-switch &.form-check-input:checked {
                --form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230a0d14'/%3e%3c/svg%3e");
            }
        }

        /* ---- A LIGHT Webal block inside the dark page: Bootstrap's colours go back to stock light, the neutral ones from the block's own tokens ---- */
        & [data-wbl-scheme="light"] {
            color-scheme: light;
            --wbl-cd-raised: var(--wbl-surface);
            --wbl-cd-sunken: var(--wbl-surface);
            --wbl-cd-hover: #f4f6f8;
            --wbl-cd-line: #dfe3e7;
            --wbl-cd-veil: #00000008;
            --wbl-cd-stripe: #0000000d;
            --wbl-cd-rowhover: #00000013;
            --wbl-cd-rowactive: #0000001a;
            --wbl-cd-btn: #fff;
            --wbl-cd-btn-hover: #f9fafb;
            --wbl-cd-btn-active: #eaedf0;
            --wbl-cd-ok: #448344;
            --wbl-cd-ok-hover: #397039;
            --wbl-cd-bad: #a51f18;
            --wbl-cd-bad-hover: #8c1a14;
            --wbl-cd-on: #fff;
            --wbl-cd-shadow: #00000026;
            --wbl-cd-invert: 0;
            --body-color: var(--wbl-text);
            --body-color-rgb: 34, 38, 42;
            --body-bg: var(--wbl-surface);
            --body-bg-rgb: 255, 255, 255;
            --emphasis-color: var(--wbl-text);
            --emphasis-color-rgb: 0, 0, 0;
            --secondary-color: var(--wbl-muted);
            --secondary-color-rgb: 34, 38, 42;
            --secondary-bg: #eaedf0;
            --secondary-bg-rgb: 234, 237, 240;
            --tertiary-color: #22262a80;
            --tertiary-color-rgb: 34, 38, 42;
            --tertiary-bg: #f9fafb;
            --tertiary-bg-rgb: 249, 250, 251;
            --link-color: var(--wbl-link);
            --link-color-rgb: 34, 79, 170;
            --link-hover-color: var(--wbl-link-hover);
            --link-hover-color-rgb: 66, 64, 119;
            --code-color: #e93f8e;
            --border-color: var(--wbl-cd-line);
            --border-color-translucent: #0000002d;
            --focus-ring-color: #01015640;
            --form-valid-color: #448344;
            --form-valid-border-color: #448344;
            --form-invalid-color: #a51f18;
            --form-invalid-border-color: #a51f18;
            --btn-close-filter: ;
            --primary-text-emphasis: #002;
            --primary-bg-subtle: #ccd;
            --primary-border-subtle: #99b;
            --secondary-text-emphasis: #2c2f32;
            --secondary-bg-subtle: #e2e3e5;
            --secondary-border-subtle: #c5c8cb;
            --success-text-emphasis: #1b351b;
            --success-bg-subtle: #dae6da;
            --success-border-subtle: #b4ceb4;
            --info-text-emphasis: #132838;
            --info-bg-subtle: #d6e0e8;
            --info-border-subtle: #acc1d1;
            --warning-text-emphasis: #452700;
            --warning-bg-subtle: #efe0cc;
            --warning-border-subtle: #dec099;
            --danger-text-emphasis: #420c09;
            --danger-bg-subtle: #edd2d1;
            --danger-border-subtle: #dba5a2;
            --light-text-emphasis: #484f56;
            --light-bg-subtle: #fcfcfd;
            --light-border-subtle: #eaedf0;
            --dark-text-emphasis: #484f56;
            --dark-bg-subtle: #ced4da;
            --dark-border-subtle: #adb5bd;
        }
    }
}
/* wbl:copy:end */