:root {
    color-scheme: light dark;

    /* Catppuccin Latte, with two deliberate departures from spec.
       Neutrals shift one step lighter and crust becomes pure white: the layout treats crust as the
       page canvas, which only reads correctly while the ramp runs dark-to-light, and that inverts in
       Latte. Accents are traded, never rewritten, so mauve and blue (the harshest hues, on the most
       repeated elements) hand their sharpness to lavender and sapphire, which appear far less often.
       Trading rather than overwriting keeps all twelve distinct entries mermaid's colour scales need. */
    --ctp-rosewater: 220 138 120;
    --ctp-flamingo: 221 120 120;
    --ctp-pink: 234 118 203;
    --ctp-mauve: 114 135 253;
    --ctp-red: 210 15 57;
    --ctp-maroon: 230 69 83;
    --ctp-peach: 254 100 11;
    --ctp-yellow: 223 142 29;
    --ctp-green: 64 160 43;
    --ctp-teal: 23 146 153;
    --ctp-sky: 4 165 229;
    --ctp-sapphire: 30 102 245;
    --ctp-blue: 32 159 181;
    --ctp-lavender: 136 57 239;
    --ctp-text: 76 79 105;
    --ctp-subtext1: 92 95 119;
    --ctp-subtext0: 108 111 133;
    --ctp-overlay2: 124 127 147;
    --ctp-overlay1: 140 143 161;
    --ctp-overlay0: 156 160 176;
    --ctp-surface2: 188 192 204;
    --ctp-surface1: 204 208 218;
    --ctp-surface0: 220 224 232;
    --ctp-base: 239 241 245;
    --ctp-mantle: 230 233 239;
    --ctp-crust: 255 255 255;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ctp-rosewater: 245 224 220;
        --ctp-flamingo: 242 205 205;
        --ctp-pink: 245 194 231;
        --ctp-mauve: 203 166 247;
        --ctp-red: 243 139 168;
        --ctp-maroon: 235 160 172;
        --ctp-peach: 250 179 135;
        --ctp-yellow: 249 226 175;
        --ctp-green: 166 227 161;
        --ctp-teal: 148 226 213;
        --ctp-sky: 137 220 235;
        --ctp-sapphire: 116 199 236;
        --ctp-blue: 137 180 250;
        --ctp-lavender: 180 190 254;
        --ctp-text: 205 214 244;
        --ctp-subtext1: 186 194 222;
        --ctp-subtext0: 166 173 200;
        --ctp-overlay2: 147 153 178;
        --ctp-overlay1: 127 132 156;
        --ctp-overlay0: 108 112 134;
        --ctp-surface2: 88 91 112;
        --ctp-surface1: 69 71 90;
        --ctp-surface0: 49 50 68;
        --ctp-base: 30 30 46;
        --ctp-mantle: 24 24 37;
        --ctp-crust: 17 17 27;
    }
}

body {
    background-color: rgb(var(--ctp-crust));
}

/* The mark is a flat white-on-transparent export, so it needs its negative on a light canvas. */
.logo-adaptive {
    filter: invert(1);
}

@media (prefers-color-scheme: dark) {
    .logo-adaptive {
        filter: none;
    }
}

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid rgb(var(--ctp-mauve));
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.glass-header {
    background: rgb(var(--ctp-crust) / 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgb(var(--ctp-surface0) / 0.3);
}

.search-input-wrapper:focus-within {
    background-color: rgb(var(--ctp-surface0) / 0.8);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--ctp-surface0)) rgb(var(--ctp-crust));
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgb(var(--ctp-crust));
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--ctp-surface0));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--ctp-surface1));
}