/*
 * Nessie's colour themes, as Bootstrap 5.3 colour modes (html[data-bs-theme]):
 *   dark            the logo's navy and teal (the default)
 *   light           the same, inverted for daytime listening
 *   synthwave-neon  glow green, electro purple and cyber teal on near-black
 *   halloween       pumpkin orange, witch purple and slime green on a plum night (and a
 *                   jack-o'-lantern seek handle: theme.js)
 *
 * Each theme sets Bootstrap's own CSS variables. The second half of this file points the parts
 * of Bootstrap that are compiled with fixed colours (.btn-primary, checkboxes, dropdown and
 * list highlights, focus rings) at those variables, so every theme reaches them too.
 *
 * Our own additions are --nessie-*: the text colour on a primary background, and the glow
 * (none outside synthwave and halloween) that accents use.
 *
 * Controls that are off (a switch's knob, an empty checkbox's border) are the text colour at half
 * strength: 3:1 or more against the page and cards in every theme, as WCAG asks of controls.
 */

/* --- DARK (default, the logo's colours) --- */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: #0d172e;
    --bs-body-bg-rgb: 13, 23, 46;
    --bs-body-color: #f3f5f6;
    --bs-body-color-rgb: 243, 245, 246;

    /* Primary (teal) */
    --bs-primary: #6db5a8;
    --bs-primary-rgb: 109, 181, 168;
    --bs-primary-bg-subtle: rgba(109, 181, 168, 0.2);
    --bs-primary-text-emphasis: #8cd6c9;
    --bs-primary-border-subtle: rgba(109, 181, 168, 0.45);

    /* Secondary (slate) */
    --bs-secondary: #2b3e6d;
    --bs-secondary-rgb: 43, 62, 109;
    --bs-secondary-bg-subtle: rgba(43, 62, 109, 0.2);
    --bs-secondary-text-emphasis: #5a74b0;

    /* Surfaces: cards, the header, sidebar and player */
    --bs-tertiary-bg: #152445;
    --bs-tertiary-bg-rgb: 21, 36, 69;
    --bs-secondary-bg: #1a2c52;
    --bs-border-color: #2b3e6d;

    --bs-link-color: #8cd6c9;
    --bs-link-color-rgb: 140, 214, 201;
    --bs-link-hover-color: #b5ebe1;
    --bs-link-hover-color-rgb: 181, 235, 225;

    --nessie-on-primary: #0d172e;
    --nessie-chart: #36a892;  /* chart marks: 3:1 or more on the background (validated) */
    --nessie-glow: none;
    --nessie-text-glow: none;
}

/* --- LIGHT (inverted for daytime listening) --- */
[data-bs-theme="light"] {
    color-scheme: light;
    --bs-body-bg: #f3f5f6;
    --bs-body-bg-rgb: 243, 245, 246;
    --bs-body-color: #0d172e;
    --bs-body-color-rgb: 13, 23, 46;

    /* Primary (teal) */
    --bs-primary: #6db5a8;
    --bs-primary-rgb: 109, 181, 168;
    --bs-primary-bg-subtle: rgba(109, 181, 168, 0.15);
    --bs-primary-text-emphasis: #3d7a6f;
    --bs-primary-border-subtle: rgba(109, 181, 168, 0.5);

    /* Secondary (slate) */
    --bs-secondary: #2b3e6d;
    --bs-secondary-rgb: 43, 62, 109;
    --bs-secondary-bg-subtle: rgba(43, 62, 109, 0.15);
    --bs-secondary-text-emphasis: #1a2747;

    /* Surfaces: pure white against the cream page */
    --bs-tertiary-bg: #ffffff;
    --bs-tertiary-bg-rgb: 255, 255, 255;
    --bs-border-color: #dee2e6;

    --bs-link-color: #3d7a6f;
    --bs-link-color-rgb: 61, 122, 111;
    --bs-link-hover-color: #2a5850;
    --bs-link-hover-color-rgb: 42, 88, 80;

    --nessie-on-primary: #0d172e;
    --nessie-chart: #0b8a76;  /* the teal darkened to 3:1 on the light background */
    --nessie-glow: none;
    --nessie-text-glow: none;
}

/* --- SYNTHWAVE NEON --- */
[data-bs-theme="synthwave-neon"] {
    /* A custom colour mode starts from Bootstrap's light defaults: these make it a dark one */
    color-scheme: dark;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(229, 224, 250, 0.72);
    --bs-secondary-color-rgb: 229, 224, 250;
    --bs-tertiary-color: rgba(229, 224, 250, 0.5);
    --bs-tertiary-color-rgb: 229, 224, 250;
    --bs-heading-color: inherit;
    --bs-code-color: #f080ff;
    --bs-form-valid-color: #39ff14;
    --bs-form-invalid-color: #ff4d8d;
    --bs-form-invalid-border-color: #ff4d8d;
    --bs-danger: #ff4d8d;
    --bs-danger-rgb: 255, 77, 141;
    --bs-danger-text-emphasis: #ff8fb6;
    --bs-danger-bg-subtle: rgba(255, 77, 141, 0.15);
    /* Warning: amber, for "nothing fits" and what a mix leaves out (Bootstrap's light-mode brown
       would be lost on near-black) */
    --bs-warning: #ffb020;
    --bs-warning-rgb: 255, 176, 32;
    --bs-warning-text-emphasis: #ffc94d;
    --bs-warning-bg-subtle: rgba(255, 176, 32, 0.15);
    --bs-warning-border-subtle: rgba(255, 201, 77, 0.55);

    --bs-body-bg: #05050a;
    --bs-body-bg-rgb: 5, 5, 10;
    --bs-body-color: #e5e0fa;
    --bs-body-color-rgb: 229, 224, 250;

    /* Primary: glow green */
    --bs-primary: #39ff14;
    --bs-primary-rgb: 57, 255, 20;
    --bs-primary-bg-subtle: rgba(57, 255, 20, 0.15);
    --bs-primary-text-emphasis: #85ff70;
    --bs-primary-border-subtle: rgba(57, 255, 20, 0.45);

    /* Secondary: electro purple */
    --bs-secondary: #bd00ff;
    --bs-secondary-rgb: 189, 0, 255;
    --bs-secondary-bg-subtle: rgba(189, 0, 255, 0.15);
    --bs-secondary-text-emphasis: #f080ff;

    /* Info, a third accent: cyber teal */
    --bs-info: #00f0ff;
    --bs-info-rgb: 0, 240, 255;
    --bs-info-bg-subtle: rgba(0, 240, 255, 0.15);
    --bs-info-text-emphasis: #70f8ff;

    /* Surfaces and cards */
    --bs-tertiary-bg: #0f091c;
    --bs-tertiary-bg-rgb: 15, 9, 28;
    --bs-secondary-bg: #150d26;
    --bs-secondary-bg-rgb: 21, 13, 38;
    --bs-border-color: rgba(189, 0, 255, 0.35);
    --bs-border-color-translucent: rgba(0, 240, 255, 0.15);

    /* Links */
    --bs-link-color: #00f0ff;
    --bs-link-color-rgb: 0, 240, 255;
    --bs-link-hover-color: #ffffff;
    --bs-link-hover-color-rgb: 255, 255, 255;

    --nessie-on-primary: #05050a;
    --nessie-chart: #22a80c;  /* the neon green toned down for solid chart marks */
    --nessie-glow: 0 0 0.75rem rgba(57, 255, 20, 0.55);
    --nessie-text-glow: 0 0 0.5rem rgba(57, 255, 20, 0.6);
}

/* --- HALLOWEEN --- */
[data-bs-theme="halloween"] {
    /* A custom colour mode starts from Bootstrap's light defaults: these make it a dark one */
    color-scheme: dark;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(244, 234, 216, 0.72);
    --bs-secondary-color-rgb: 244, 234, 216;
    --bs-tertiary-color: rgba(244, 234, 216, 0.5);
    --bs-tertiary-color-rgb: 244, 234, 216;
    --bs-heading-color: inherit;
    --bs-code-color: #c39be6;
    --bs-form-valid-color: #9be04a;
    --bs-form-invalid-color: #ff5a6e;
    --bs-form-invalid-border-color: #ff5a6e;
    --bs-danger: #ff5a6e;
    --bs-danger-rgb: 255, 90, 110;
    --bs-danger-text-emphasis: #ff97a4;
    --bs-danger-bg-subtle: rgba(255, 90, 110, 0.15);
    --bs-warning: #ffc94d;
    --bs-warning-rgb: 255, 201, 77;
    --bs-warning-text-emphasis: #ffdb85;
    --bs-warning-bg-subtle: rgba(255, 201, 77, 0.15);
    --bs-warning-border-subtle: rgba(255, 219, 133, 0.55);

    --bs-body-bg: #120c18;
    --bs-body-bg-rgb: 18, 12, 24;
    --bs-body-color: #f4ead8;
    --bs-body-color-rgb: 244, 234, 216;

    /* Primary: pumpkin orange */
    --bs-primary: #ff8c1a;
    --bs-primary-rgb: 255, 140, 26;
    --bs-primary-bg-subtle: rgba(255, 140, 26, 0.15);
    --bs-primary-text-emphasis: #ffad5c;
    --bs-primary-border-subtle: rgba(255, 140, 26, 0.45);

    /* Secondary: witch purple */
    --bs-secondary: #8a4fb8;
    --bs-secondary-rgb: 138, 79, 184;
    --bs-secondary-bg-subtle: rgba(138, 79, 184, 0.2);
    --bs-secondary-text-emphasis: #c39be6;

    /* Info, a third accent: slime green */
    --bs-info: #9be04a;
    --bs-info-rgb: 155, 224, 74;
    --bs-info-bg-subtle: rgba(155, 224, 74, 0.15);
    --bs-info-text-emphasis: #bdf084;

    /* Surfaces and cards */
    --bs-tertiary-bg: #1c1426;
    --bs-tertiary-bg-rgb: 28, 20, 38;
    --bs-secondary-bg: #251a33;
    --bs-secondary-bg-rgb: 37, 26, 51;
    --bs-border-color: #3a2950;
    --bs-border-color-translucent: rgba(138, 79, 184, 0.25);

    /* Links */
    --bs-link-color: #ffad5c;
    --bs-link-color-rgb: 255, 173, 92;
    --bs-link-hover-color: #ffd2a3;
    --bs-link-hover-color-rgb: 255, 210, 163;

    --nessie-on-primary: #120c18;
    --nessie-chart: #ff8c1a;  /* 3:1 and more on the background */
    --nessie-glow: 0 0 0.6rem rgba(255, 140, 26, 0.4);  /* a lantern's, softer than synthwave's */
    --nessie-text-glow: none;
}

/* Bootstrap gives dark mode a white close button and a light select arrow: the custom dark themes too */
[data-bs-theme="synthwave-neon"] .btn-close,
[data-bs-theme="halloween"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="synthwave-neon"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e5e0fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme="halloween"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f4ead8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* --- Bootstrap's fixed colours, pointed at the theme --- */

/* A switch's knob is an SVG image, so its colour can't come from a variable: one per theme, the
   text colour at half strength while off, the theme's primary while focused (Bootstrap's is blue) */
[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
    --bs-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='rgba(243,245,246,0.5)'/%3e%3c/svg%3e");
}

[data-bs-theme="light"] .form-switch .form-check-input:not(:checked):not(:focus) {
    --bs-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='rgba(13,23,46,0.5)'/%3e%3c/svg%3e");
}

[data-bs-theme="synthwave-neon"] .form-switch .form-check-input:not(:checked):not(:focus) {
    --bs-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='rgba(229,224,250,0.5)'/%3e%3c/svg%3e");
}

[data-bs-theme="halloween"] .form-switch .form-check-input:not(:checked):not(:focus) {
    --bs-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='rgba(244,234,216,0.5)'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:checked),
[data-bs-theme="light"] .form-switch .form-check-input:focus:not(:checked) {
    --bs-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='%236db5a8'/%3e%3c/svg%3e");
}

[data-bs-theme="synthwave-neon"] .form-switch .form-check-input:focus:not(:checked) {
    --bs-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='%2339ff14'/%3e%3c/svg%3e");
}

[data-bs-theme="halloween"] .form-switch .form-check-input:focus:not(:checked) {
    --bs-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='%23ff8c1a'/%3e%3c/svg%3e");
}

/* An empty checkbox or switch: its outline, as visible as the knob */
.form-check-input:not(:checked):not(:focus) {
    border-color: color-mix(in srgb, var(--bs-body-color) 50%, transparent);
}

.btn-primary {
    --bs-btn-color: var(--nessie-on-primary);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--nessie-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, white);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 85%, white);
    --bs-btn-active-color: var(--nessie-on-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 75%, white);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, white);
    --bs-btn-disabled-color: var(--nessie-on-primary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    box-shadow: var(--nessie-glow);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--nessie-on-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--nessie-on-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* A quiet button on a surface: the theme's secondary tint */
.btn-subtle {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-secondary-bg-subtle);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), 0.35);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: rgba(var(--bs-secondary-rgb), 0.45);
    --bs-btn-active-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible {
    border-color: rgba(var(--bs-primary-rgb), 0.6);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

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

.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
    box-shadow: var(--nessie-glow);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
    box-shadow: var(--nessie-glow);
}

.form-range::-webkit-slider-runnable-track {
    background-color: rgba(var(--bs-secondary-rgb), 0.45);
}

.form-range::-moz-range-track {
    background-color: rgba(var(--bs-secondary-rgb), 0.45);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--bs-tertiary-bg);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-link-hover-bg: var(--bs-secondary-bg-subtle);
    --bs-dropdown-link-active-color: var(--nessie-on-primary);
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-action-hover-bg: var(--bs-secondary-bg-subtle);
    --bs-list-group-active-color: var(--bs-primary-text-emphasis);
    --bs-list-group-active-bg: var(--bs-primary-bg-subtle);
    --bs-list-group-active-border-color: var(--bs-border-color);
}

.pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-hover-bg: var(--bs-secondary-bg-subtle);
    --bs-pagination-hover-color: var(--bs-body-color);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-active-color: var(--nessie-on-primary);
    --bs-pagination-disabled-bg: transparent;
}

.offcanvas,
.modal {
    --bs-offcanvas-bg: var(--bs-tertiary-bg);
    --bs-modal-bg: var(--bs-tertiary-bg);
}

.toast {
    --bs-toast-bg: rgba(var(--bs-tertiary-bg-rgb), 0.95);
}

.progress {
    --bs-progress-bg: rgba(var(--bs-secondary-rgb), 0.35);
    --bs-progress-bar-bg: var(--bs-primary);
}

/* Bootstrap's stripes are white at 15%, barely there on a bright bar: the dark text colour for
   the bar instead, at 35% (about 2:1 against it) */
.progress-bar-striped {
    --nessie-stripe: color-mix(in srgb, var(--nessie-on-primary) 35%, transparent);
    background-image: linear-gradient(45deg, var(--nessie-stripe) 25%, transparent 25%, transparent 50%,
        var(--nessie-stripe) 50%, var(--nessie-stripe) 75%, transparent 75%, transparent);
}

/* Accents glow in the neon theme (and nowhere else: --nessie-text-glow is none there) */
.text-primary-emphasis,
.app-nav-link.active {
    text-shadow: var(--nessie-text-glow);
}