/* ==========================================================================
   Theme system — 5 palettes via CSS custom properties
   ========================================================================== */

body {
    --t-bg-page: #f4f4f9;
    --t-text: #333333;
    --t-text-muted: #555555;
    --t-heading: #2c3e50;
    --t-heading-2: #34495e;
    --t-heading-3: #16a085;
    --t-h1-border: #2c3e50;
    --t-bg-toolbar: #ffffff;
    --t-border-toolbar: #dde4ec;
    --t-label: #34495e;
    --t-input-bg: #ffffff;
    --t-input-border: #dddddd;
    --t-input-text: #2c3e50;
    --t-focus: #3498db;
    --t-card-bg: #ffffff;
    --t-card-border: #dddddd;
    --t-li-text: #333333;
    --t-strong: #2c3e50;
    --t-desc: #6b7280;
    --t-header-bg: #f9f9f9;
    --t-header-border: #dddddd;
    --t-header-text: #16a085;
    --t-header-hover: #f1f1f1;
    --t-note-bg: #fff3d4;
    --t-note-border: #f0ad4e;
    --t-note-text: inherit;
    --t-note-strong: #d35400;
    --t-link: #3498db;
    --t-link-hover: #2980b9;
    --t-btn: #3498db;
    --t-btn-hover: #2980b9;
    --t-btn-text: #ffffff;
    --t-highlight-bg: #f0ad4e;
    --t-highlight-text: #ffffff;
    --t-pre-bg: #2c3e50;
    --t-pre-text: #ffffff;
    --t-code-bg: #eaeaea;
    --t-code-text: #c0392b;
    --t-hero-accent: #3498db;
    --t-hero-link: #2980b9;
    --t-version-bg: #ffffff;
    --t-version-border: #c8d7ea;
    --t-version-text: #1f3250;
    --t-footer-border: #dde4ec;
    --t-footer-text: #5a6b7d;
    --t-footer-link: #2980b9;
    --t-toast-bg: rgba(20, 20, 20, 0.92);
    --t-toast-text: #ffffff;
    --t-copy-bg: #ffffff;
    --t-copy-border: #dddddd;
    --t-export-bg: linear-gradient(180deg, #f9fbff 0%, #eef3fa 100%);
    --t-export-border: #c4d4ea;
    --t-export-text: #243447;
    --t-export-hover: linear-gradient(180deg, #ffffff 0%, #e9f0f9 100%);
    --t-search-counter: #555555;
}

/* 1 — Light (default) */
body[data-theme="light"] {
    --t-bg-page: #f4f4f9;
    --t-bg-toolbar: #ffffff;
    --t-border-toolbar: #dde4ec;
    --t-label: #34495e;
    --t-input-bg: #ffffff;
    --t-input-border: #dddddd;
    --t-input-text: #2c3e50;
}

/* 2 — Dark (classic) */
body[data-theme="dark"] {
    --t-bg-page: #0b1524;
    --t-text: #d9e4f6;
    --t-text-muted: #cfd6de;
    --t-heading: #e8edf3;
    --t-heading-2: #e8edf3;
    --t-heading-3: #7dd3a8;
    --t-h1-border: #4b5563;
    --t-bg-toolbar: #111f35;
    --t-border-toolbar: #2f4f7b;
    --t-label: #d3e3fb;
    --t-input-bg: #12233d;
    --t-input-border: #31547f;
    --t-input-text: #edf3ff;
    --t-focus: #5dade2;
    --t-card-bg: #14253f;
    --t-card-border: #254266;
    --t-li-text: #d6dbe3;
    --t-strong: #f3f4f6;
    --t-desc: #aab4c0;
    --t-header-bg: #13233d;
    --t-header-border: #2c4a74;
    --t-header-text: #d1fae5;
    --t-header-hover: #1c3150;
    --t-note-bg: #3a3a3a;
    --t-note-border: #555555;
    --t-note-text: #e0e0e0;
    --t-note-strong: #f7b267;
    --t-link: #58a6ff;
    --t-link-hover: #79b8ff;
    --t-btn: #3498db;
    --t-btn-hover: #2980b9;
    --t-highlight-bg: #f0ad4e;
    --t-highlight-text: #1e1e1e;
    --t-pre-bg: #252526;
    --t-pre-text: #e0e0e0;
    --t-code-bg: #1e293b;
    --t-code-text: #f87171;
    --t-hero-accent: #5dade2;
    --t-hero-link: #85c1e9;
    --t-version-bg: #162a46;
    --t-version-border: #33567f;
    --t-version-text: #e8f0ff;
    --t-footer-border: #3d4f63;
    --t-footer-text: #aab4c0;
    --t-footer-link: #85c1e9;
    --t-toast-bg: rgba(240, 240, 240, 0.95);
    --t-toast-text: #111111;
    --t-copy-bg: #2d2d2d;
    --t-copy-border: #444444;
    --t-export-bg: linear-gradient(180deg, #374151 0%, #2f3947 100%);
    --t-export-border: #4b5563;
    --t-export-text: #f3f4f6;
    --t-export-hover: linear-gradient(180deg, #3f4b5d 0%, #374151 100%);
    --t-search-counter: #aab4c0;
}

/* 3 — Nord */
body[data-theme="nord"] {
    --t-bg-page: #2e3440;
    --t-text: #eceff4;
    --t-text-muted: #d8dee9;
    --t-heading: #eceff4;
    --t-heading-2: #e5e9f0;
    --t-heading-3: #88c0d0;
    --t-h1-border: #4c566a;
    --t-bg-toolbar: #3b4252;
    --t-border-toolbar: #4c566a;
    --t-label: #e5e9f0;
    --t-input-bg: #434c5e;
    --t-input-border: #4c566a;
    --t-input-text: #eceff4;
    --t-focus: #88c0d0;
    --t-card-bg: #3b4252;
    --t-card-border: #4c566a;
    --t-li-text: #d8dee9;
    --t-strong: #eceff4;
    --t-desc: #a3b1c2;
    --t-header-bg: #434c5e;
    --t-header-border: #4c566a;
    --t-header-text: #8fbcbb;
    --t-header-hover: #4c566a;
    --t-note-bg: #434c5e;
    --t-note-border: #ebcb8b;
    --t-note-text: #eceff4;
    --t-note-strong: #ebcb8b;
    --t-link: #88c0d0;
    --t-link-hover: #8fbcbb;
    --t-btn: #5e81ac;
    --t-btn-hover: #81a1c1;
    --t-highlight-bg: #ebcb8b;
    --t-highlight-text: #2e3440;
    --t-pre-bg: #2e3440;
    --t-pre-text: #eceff4;
    --t-hero-accent: #88c0d0;
    --t-hero-link: #8fbcbb;
    --t-version-bg: #434c5e;
    --t-version-border: #5e81ac;
    --t-version-text: #eceff4;
    --t-footer-border: #4c566a;
    --t-footer-text: #a3b1c2;
    --t-footer-link: #88c0d0;
    --t-toast-bg: rgba(236, 239, 244, 0.95);
    --t-toast-text: #2e3440;
    --t-copy-bg: #434c5e;
    --t-copy-border: #4c566a;
    --t-export-bg: linear-gradient(180deg, #4c566a 0%, #434c5e 100%);
    --t-export-border: #5e81ac;
    --t-export-text: #eceff4;
    --t-export-hover: linear-gradient(180deg, #5e81ac 0%, #4c566a 100%);
    --t-search-counter: #a3b1c2;
}

/* 4 — Dracula */
body[data-theme="dracula"] {
    --t-bg-page: #282a36;
    --t-text: #f8f8f2;
    --t-text-muted: #bd93f9;
    --t-heading: #f8f8f2;
    --t-heading-2: #f8f8f2;
    --t-heading-3: #50fa7b;
    --t-h1-border: #6272a4;
    --t-bg-toolbar: #1e1f29;
    --t-border-toolbar: #6272a4;
    --t-label: #f8f8f2;
    --t-input-bg: #44475a;
    --t-input-border: #6272a4;
    --t-input-text: #f8f8f2;
    --t-focus: #bd93f9;
    --t-card-bg: #343746;
    --t-card-border: #6272a4;
    --t-li-text: #f8f8f2;
    --t-strong: #f8f8f2;
    --t-desc: #a9b1d6;
    --t-header-bg: #44475a;
    --t-header-border: #6272a4;
    --t-header-text: #50fa7b;
    --t-header-hover: #6272a4;
    --t-note-bg: #44475a;
    --t-note-border: #ffb86c;
    --t-note-text: #f8f8f2;
    --t-note-strong: #ffb86c;
    --t-link: #8be9fd;
    --t-link-hover: #50fa7b;
    --t-btn: #bd93f9;
    --t-btn-hover: #ff79c6;
    --t-highlight-bg: #f1fa8c;
    --t-highlight-text: #282a36;
    --t-pre-bg: #1e1f29;
    --t-pre-text: #f8f8f2;
    --t-hero-accent: #ff79c6;
    --t-hero-link: #8be9fd;
    --t-version-bg: #44475a;
    --t-version-border: #bd93f9;
    --t-version-text: #f8f8f2;
    --t-footer-border: #6272a4;
    --t-footer-text: #a9b1d6;
    --t-footer-link: #8be9fd;
    --t-toast-bg: rgba(248, 248, 242, 0.95);
    --t-toast-text: #282a36;
    --t-copy-bg: #44475a;
    --t-copy-border: #6272a4;
    --t-export-bg: linear-gradient(180deg, #6272a4 0%, #44475a 100%);
    --t-export-border: #bd93f9;
    --t-export-text: #f8f8f2;
    --t-export-hover: linear-gradient(180deg, #bd93f9 0%, #6272a4 100%);
    --t-search-counter: #a9b1d6;
}

/* 5 — Solarized Dark */
body[data-theme="solarized"] {
    --t-bg-page: #002b36;
    --t-text: #839496;
    --t-text-muted: #93a1a1;
    --t-heading: #fdf6e3;
    --t-heading-2: #eee8d5;
    --t-heading-3: #2aa198;
    --t-h1-border: #073642;
    --t-bg-toolbar: #073642;
    --t-border-toolbar: #586e75;
    --t-label: #eee8d5;
    --t-input-bg: #073642;
    --t-input-border: #586e75;
    --t-input-text: #fdf6e3;
    --t-focus: #268bd2;
    --t-card-bg: #073642;
    --t-card-border: #586e75;
    --t-li-text: #93a1a1;
    --t-strong: #fdf6e3;
    --t-desc: #839496;
    --t-header-bg: #073642;
    --t-header-border: #586e75;
    --t-header-text: #2aa198;
    --t-header-hover: #0a3942;
    --t-note-bg: #073642;
    --t-note-border: #b58900;
    --t-note-text: #eee8d5;
    --t-note-strong: #cb4b16;
    --t-link: #268bd2;
    --t-link-hover: #2aa198;
    --t-btn: #268bd2;
    --t-btn-hover: #2aa198;
    --t-highlight-bg: #b58900;
    --t-highlight-text: #002b36;
    --t-pre-bg: #073642;
    --t-pre-text: #93a1a1;
    --t-hero-accent: #268bd2;
    --t-hero-link: #2aa198;
    --t-version-bg: #073642;
    --t-version-border: #586e75;
    --t-version-text: #eee8d5;
    --t-footer-border: #586e75;
    --t-footer-text: #839496;
    --t-footer-link: #268bd2;
    --t-toast-bg: rgba(253, 246, 227, 0.95);
    --t-toast-text: #002b36;
    --t-copy-bg: #073642;
    --t-copy-border: #586e75;
    --t-export-bg: linear-gradient(180deg, #586e75 0%, #073642 100%);
    --t-export-border: #268bd2;
    --t-export-text: #fdf6e3;
    --t-export-hover: linear-gradient(180deg, #268bd2 0%, #586e75 100%);
    --t-search-counter: #93a1a1;
}

/* ——— Apply tokens ——— */
body {
    background-color: var(--t-bg-page);
    color: var(--t-text);
}

h1, h2, h3 {
    color: var(--t-heading);
}

h1 {
    border-bottom-color: var(--t-h1-border);
}

h2 {
    color: var(--t-heading-2);
}

h3 {
    color: var(--t-heading-3);
}

p,
.subtitle {
    color: var(--t-text-muted);
}

.top-toolbar {
    background: var(--t-bg-toolbar);
    border-color: var(--t-border-toolbar);
}

.pref-label,
.lang-label {
    color: var(--t-label);
}

.pref-select,
.lang-select,
.theme-select {
    background: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-text);
}

.pref-select:focus,
.lang-select:focus,
.theme-select:focus {
    border-color: var(--t-focus);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.35);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-focus) 35%, transparent);
}

.folder-structure {
    background-color: var(--t-card-bg);
    border-color: var(--t-card-border);
}

.folder-structure ul li {
    color: var(--t-li-text);
}

.folder-structure ul li strong {
    color: var(--t-strong);
}

.desc,
.desc:not(:empty)::before {
    color: var(--t-desc);
}

.collapsible-header {
    background-color: var(--t-header-bg);
    border-color: var(--t-header-border);
    color: var(--t-header-text);
}

.collapsible-header:hover {
    background-color: var(--t-header-hover);
}

.note {
    background-color: var(--t-note-bg);
    border-left-color: var(--t-note-border);
    color: var(--t-note-text);
}

.note strong {
    color: var(--t-note-strong);
}

pre {
    background-color: var(--t-pre-bg);
    color: var(--t-pre-text);
}

code {
    background-color: var(--t-code-bg);
    color: var(--t-code-text);
}

a {
    color: var(--t-link);
}

a:hover {
    color: var(--t-link-hover);
}

.search-input {
    background-color: var(--t-input-bg);
    border-color: var(--t-input-border);
    color: var(--t-input-text);
}

.search-input:focus {
    border-color: var(--t-focus);
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
    box-shadow: 0 0 5px color-mix(in srgb, var(--t-focus) 50%, transparent);
}

.action-button {
    background-color: var(--t-btn);
    color: var(--t-btn-text);
}

.action-button:hover {
    background-color: var(--t-btn-hover);
}

.doc-export {
    background: var(--t-export-bg);
    border-color: var(--t-export-border);
    color: var(--t-export-text);
}

.doc-export:hover {
    background: var(--t-export-hover);
}

.highlight {
    background-color: var(--t-highlight-bg);
    color: var(--t-highlight-text);
}

.search-results-counter {
    color: var(--t-search-counter);
}

.hero-welcome {
    color: var(--t-hero-accent);
}

.hero-link {
    color: var(--t-hero-link);
}

.hero-link:hover,
.hero-link:focus-visible {
    background-color: rgba(41, 128, 185, 0.12);
    border-color: rgba(41, 128, 185, 0.35);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .hero-link:hover,
    .hero-link:focus-visible {
        background-color: color-mix(in srgb, var(--t-hero-link) 12%, transparent);
        border-color: color-mix(in srgb, var(--t-hero-link) 35%, transparent);
    }
}

.version-chip {
    background: var(--t-version-bg);
    border-color: var(--t-version-border);
    color: var(--t-version-text);
}

.site-footer {
    border-top-color: var(--t-footer-border);
}

.site-footer__credit {
    color: var(--t-footer-text);
}

.site-footer__link {
    color: var(--t-footer-link);
}

.toast {
    background: var(--t-toast-bg);
    color: var(--t-toast-text);
}

button.copy-path {
    background: var(--t-copy-bg);
    border-color: var(--t-copy-border);
}

button.copy-path::before {
    color: var(--t-text);
}