/*
 * Dual syntax highlighting for tabi — light: github-light | dark: catppuccin-frappe
 *
 * Zola 0.23 generates giallo-light.css (.z-l-*) and giallo-dark.css (.z-d-*), and
 * tabi v5 injects BOTH with no `media` attribute (themes/tabi/templates/partials/
 * header.html). Every token span carries classes from both palettes, so the dark
 * sheet — loaded second — wins everywhere and the light theme never renders.
 * Neither generated sheet knows about tabi's `data-theme` switcher either.
 *
 * This file is loaded last (extra.stylesheets in config.toml). It re-declares each
 * palette scoped to its own theme at specificity (0,2,0) and neutralises the other
 * one, which the raw sheets (0,1,0) cannot override.
 *
 * REGENERATE after changing light_theme / dark_theme in [markdown.highlighting]:
 * run `zola build`, then rebuild this file from public/giallo-{light,dark}.css.
 * Do not hand-edit the rule bodies — only the colours upstream.
 */

/* Light theme — default, and whenever the reader picked light */
:root:not([data-theme='dark']) :is(.z-d-code, .z-d-hl, .giallo-ln, .z-d-1, .z-d-2, .z-d-3, .z-d-4, .z-d-5, .z-d-6, .z-d-7, .z-d-8, .z-d-9, .z-d-10, .z-d-11, .z-d-12, .z-d-13, .z-d-14, .z-d-15, .z-d-16) {
    color: inherit;
    background-color: transparent;
}

:root:not([data-theme='dark']) .z-l-code { color: #24292E; background-color: #FFFFFF; }
:root:not([data-theme='dark']) .z-l-hl { background-color: #F6F8FA; }
:root:not([data-theme='dark']) .giallo-ln { color: #1B1F234D; }
:root:not([data-theme='dark']) .z-l-1 { color: #005CC5; }
:root:not([data-theme='dark']) .z-l-2 { color: #032F62; }
:root:not([data-theme='dark']) .z-l-3 { color: #22863A; }
:root:not([data-theme='dark']) .z-l-4 { color: #586069; }
:root:not([data-theme='dark']) .z-l-5 { color: #6A737D; }
:root:not([data-theme='dark']) .z-l-6 { color: #6F42C1; }
:root:not([data-theme='dark']) .z-l-7 { color: #B31D28; }
:root:not([data-theme='dark']) .z-l-8 { color: #D73A49; }
:root:not([data-theme='dark']) .z-l-9 { color: #E36209; }
:root:not([data-theme='dark']) .z-l-10 { color: #F6F8FA; }
:root:not([data-theme='dark']) .z-l-11 { color: #FAFBFC; }
:root:not([data-theme='dark']) .z-l-bg1 { background-color: #005CC5; }
:root:not([data-theme='dark']) .z-l-bg2 { background-color: #D73A49; }
:root:not([data-theme='dark']) .z-l-bg3 { background-color: #F0FFF4; }
:root:not([data-theme='dark']) .z-l-bg4 { background-color: #FFEBDA; }
:root:not([data-theme='dark']) .z-l-bg5 { background-color: #FFEEF0; }
:root:not([data-theme='dark']) .z-l-b { font-weight: bold; }
:root:not([data-theme='dark']) .z-l-i { font-style: italic; }
:root:not([data-theme='dark']) .z-l-u { text-decoration: underline; }
:root:not([data-theme='dark']) .z-l-s { text-decoration: line-through; }
:root:not([data-theme='dark']) .z-l-us { text-decoration: underline line-through; }

/* Dark theme — reader used the theme switcher */
[data-theme='dark'] :is(.z-l-code, .z-l-hl, .giallo-ln, .z-l-1, .z-l-2, .z-l-3, .z-l-4, .z-l-5, .z-l-6, .z-l-7, .z-l-8, .z-l-9, .z-l-10, .z-l-11, .z-l-bg1, .z-l-bg2, .z-l-bg3, .z-l-bg4, .z-l-bg5) {
    color: inherit;
    background-color: transparent;
}

[data-theme='dark'] .z-d-code { color: #C6D0F5; background-color: #303446; }
[data-theme='dark'] .z-d-hl { background-color: #C6D0F512; }
[data-theme='dark'] .giallo-ln { color: #838BA7; }
[data-theme='dark'] .z-d-1 { color: #81C8BE; }
[data-theme='dark'] .z-d-2 { color: #85C1DC; }
[data-theme='dark'] .z-d-3 { color: #8CAAEE; }
[data-theme='dark'] .z-d-4 { color: #949CBB; }
[data-theme='dark'] .z-d-5 { color: #99D1DB; }
[data-theme='dark'] .z-d-6 { color: #A5ADCE; }
[data-theme='dark'] .z-d-7 { color: #A6D189; }
[data-theme='dark'] .z-d-8 { color: #BABBF1; }
[data-theme='dark'] .z-d-9 { color: #CA9EE6; }
[data-theme='dark'] .z-d-10 { color: #E5C890; }
[data-theme='dark'] .z-d-11 { color: #E78284; }
[data-theme='dark'] .z-d-12 { color: #EA999C; }
[data-theme='dark'] .z-d-13 { color: #EEBEBE; }
[data-theme='dark'] .z-d-14 { color: #EF9F76; }
[data-theme='dark'] .z-d-15 { color: #F2D5CF; }
[data-theme='dark'] .z-d-16 { color: #F4B8E4; }
[data-theme='dark'] .z-d-b { font-weight: bold; }
[data-theme='dark'] .z-d-i { font-style: italic; }
[data-theme='dark'] .z-d-u { text-decoration: underline; }
[data-theme='dark'] .z-d-s { text-decoration: line-through; }
[data-theme='dark'] .z-d-us { text-decoration: underline line-through; }

/* Dark theme — OS preference, when the reader has not chosen */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) :is(.z-l-code, .z-l-hl, .giallo-ln, .z-l-1, .z-l-2, .z-l-3, .z-l-4, .z-l-5, .z-l-6, .z-l-7, .z-l-8, .z-l-9, .z-l-10, .z-l-11, .z-l-bg1, .z-l-bg2, .z-l-bg3, .z-l-bg4, .z-l-bg5) {
    color: inherit;
    background-color: transparent;
}

:root:not([data-theme='light']) .z-d-code { color: #C6D0F5; background-color: #303446; }
:root:not([data-theme='light']) .z-d-hl { background-color: #C6D0F512; }
:root:not([data-theme='light']) .giallo-ln { color: #838BA7; }
:root:not([data-theme='light']) .z-d-1 { color: #81C8BE; }
:root:not([data-theme='light']) .z-d-2 { color: #85C1DC; }
:root:not([data-theme='light']) .z-d-3 { color: #8CAAEE; }
:root:not([data-theme='light']) .z-d-4 { color: #949CBB; }
:root:not([data-theme='light']) .z-d-5 { color: #99D1DB; }
:root:not([data-theme='light']) .z-d-6 { color: #A5ADCE; }
:root:not([data-theme='light']) .z-d-7 { color: #A6D189; }
:root:not([data-theme='light']) .z-d-8 { color: #BABBF1; }
:root:not([data-theme='light']) .z-d-9 { color: #CA9EE6; }
:root:not([data-theme='light']) .z-d-10 { color: #E5C890; }
:root:not([data-theme='light']) .z-d-11 { color: #E78284; }
:root:not([data-theme='light']) .z-d-12 { color: #EA999C; }
:root:not([data-theme='light']) .z-d-13 { color: #EEBEBE; }
:root:not([data-theme='light']) .z-d-14 { color: #EF9F76; }
:root:not([data-theme='light']) .z-d-15 { color: #F2D5CF; }
:root:not([data-theme='light']) .z-d-16 { color: #F4B8E4; }
:root:not([data-theme='light']) .z-d-b { font-weight: bold; }
:root:not([data-theme='light']) .z-d-i { font-style: italic; }
:root:not([data-theme='light']) .z-d-u { text-decoration: underline; }
:root:not([data-theme='light']) .z-d-s { text-decoration: line-through; }
:root:not([data-theme='light']) .z-d-us { text-decoration: underline line-through; }
}