/* ═══════════════════════════════════════════════════════
   THEMES — palette definitions + theme switcher UI
   ═══════════════════════════════════════════════════════

   Every theme block uses :root[data-theme="…"], which outranks the
   plain :root defaults in style.css / espsol.css / palanu.css by
   specificity — so load order does not matter.

   Each theme must define the full contract:
     chrome     --bg --panel --panel-strong --surface --surface-hover
                --text --muted --line --line-strong
     overlays   --fg-rgb --bg-rgb   (drive every rgba() tint sitewide)
     accents    --accent --accent-contrast
     product    --espsol* (cyan family)  --palanu* (violet family)

   Product accents are retinted per theme rather than pinned, so each
   board page keeps its identity (ESPSOL cool/cyan, PalanuOS violet)
   while still belonging to the active palette.
   ═══════════════════════════════════════════════════════ */

/* ── NOIR — default. Pure black, paper-white type. ─────── */
:root[data-theme="noir"] {
    color-scheme: dark;
    --art-invert: 0;
    --logo-invert: 1;
    --bg: #000000;
    --panel: #050505;
    --panel-strong: #0b0b0b;
    --surface: #111111;
    --surface-hover: #171717;
    --text: #f3f3f3;
    --muted: #a7a7a7;
    --line: #2a2a2a;
    --line-strong: #595959;
    --fg-rgb: 255, 255, 255;
    --bg-rgb: 0, 0, 0;
    --accent: #f3f3f3;
    --accent-contrast: #000000;
    --espsol: #22d3ee;
    --espsol-rgb: 34, 211, 238;
    --palanu: #818cf8;
    --palanu-rgb: 129, 140, 248;
    --hackerday: #fb7185;
    --hackerday-rgb: 251, 113, 133;
    --solana: #14f195;
    --solana-rgb: 20, 241, 149;
}

/* ── CATPPUCCIN MOCHA — soft dark, lavender bias. ──────── */
:root[data-theme="catppuccin-mocha"] {
    color-scheme: dark;
    --art-invert: 0;
    --logo-invert: 1;
    --bg: #1e1e2e;
    --panel: #181825;
    --panel-strong: #11111b;
    --surface: #313244;
    --surface-hover: #45475a;
    --text: #cdd6f4;
    --muted: #a6adc8;
    --line: #313244;
    --line-strong: #6c7086;
    --fg-rgb: 205, 214, 244;
    --bg-rgb: 17, 17, 27;
    --accent: #cba6f7;
    --accent-contrast: #1e1e2e;
    --espsol: #89dceb;
    --espsol-rgb: 137, 220, 235;
    --palanu: #cba6f7;
    --palanu-rgb: 203, 166, 247;
    --hackerday: #f38ba8;
    --hackerday-rgb: 243, 139, 168;
    --solana: #a6e3a1;
    --solana-rgb: 166, 227, 161;
}

/* ── CATPPUCCIN LATTE — light. ─────────────────────────── */
:root[data-theme="catppuccin-latte"] {
    color-scheme: light;
    --art-invert: 1;
    --logo-invert: 0;
    --bg: #eff1f5;
    --panel: #e6e9ef;
    --panel-strong: #dce0e8;
    --surface: #ccd0da;
    --surface-hover: #bcc0cc;
    --text: #4c4f69;
    --muted: #6c6f85;
    --line: #ccd0da;
    --line-strong: #9ca0b0;
    --fg-rgb: 76, 79, 105;
    --bg-rgb: 239, 241, 245;
    --accent: #8839ef;
    --accent-contrast: #eff1f5;
    --espsol: #0a92c4;
    --espsol-rgb: 10, 146, 196;
    --palanu: #8839ef;
    --palanu-rgb: 136, 57, 239;
    --hackerday: #d20f39;
    --hackerday-rgb: 210, 15, 57;
    --solana: #40a02b;
    --solana-rgb: 64, 160, 43;
}

/* ── NORD — arctic blue-grey. ──────────────────────────── */
:root[data-theme="nord"] {
    color-scheme: dark;
    --art-invert: 0;
    --logo-invert: 1;
    --bg: #2e3440;
    --panel: #292f3a;
    --panel-strong: #242933;
    --surface: #3b4252;
    --surface-hover: #434c5e;
    --text: #eceff4;
    --muted: #b8c1d1;
    --line: #3b4252;
    --line-strong: #4c566a;
    --fg-rgb: 236, 239, 244;
    --bg-rgb: 36, 41, 51;
    --accent: #88c0d0;
    --accent-contrast: #2e3440;
    --espsol: #8fbcbb;
    --espsol-rgb: 143, 188, 187;
    --palanu: #b48ead;
    --palanu-rgb: 180, 142, 173;
    --hackerday: #bf616a;
    --hackerday-rgb: 191, 97, 106;
    --solana: #a3be8c;
    --solana-rgb: 163, 190, 140;
}

/* ── HOMEBREW — phosphor green on black. ───────────────── */
:root[data-theme="homebrew"] {
    color-scheme: dark;
    --art-invert: 0;
    --logo-invert: 1;
    --bg: #000000;
    --panel: #010c01;
    --panel-strong: #021002;
    --surface: #041804;
    --surface-hover: #062206;
    --text: #28fe14;
    --muted: #19b70e;
    --line: #0c4d07;
    --line-strong: #17a30c;
    --fg-rgb: 40, 254, 20;
    --bg-rgb: 0, 0, 0;
    --accent: #28fe14;
    --accent-contrast: #000000;
    --espsol: #14fec8;
    --espsol-rgb: 20, 254, 200;
    --palanu: #8bfe14;
    --palanu-rgb: 139, 254, 20;
    --hackerday: #14fe8b;
    --hackerday-rgb: 20, 254, 139;
    --solana: #7cfe14;
    --solana-rgb: 124, 254, 20;
}

/* ── GRUVBOX — warm retro dark. ────────────────────────── */
:root[data-theme="gruvbox"] {
    color-scheme: dark;
    --art-invert: 0;
    --logo-invert: 1;
    --bg: #282828;
    --panel: #232323;
    --panel-strong: #1d2021;
    --surface: #3c3836;
    --surface-hover: #504945;
    --text: #ebdbb2;
    --muted: #bdae93;
    --line: #3c3836;
    --line-strong: #665c54;
    --fg-rgb: 235, 219, 178;
    --bg-rgb: 29, 32, 33;
    --accent: #fe8019;
    --accent-contrast: #282828;
    --espsol: #8ec07c;
    --espsol-rgb: 142, 192, 124;
    --palanu: #d3869b;
    --palanu-rgb: 211, 134, 155;
    --hackerday: #fb4934;
    --hackerday-rgb: 251, 73, 52;
    --solana: #b8bb26;
    --solana-rgb: 184, 187, 38;
}

/* ── DRACULA — high-contrast neon dark. ────────────────── */
:root[data-theme="dracula"] {
    color-scheme: dark;
    --art-invert: 0;
    --logo-invert: 1;
    --bg: #282a36;
    --panel: #22242e;
    --panel-strong: #1b1c26;
    --surface: #343746;
    --surface-hover: #44475a;
    --text: #f8f8f2;
    --muted: #b6bcd4;
    --line: #383a4a;
    --line-strong: #6272a4;
    --fg-rgb: 248, 248, 242;
    --bg-rgb: 27, 28, 38;
    --accent: #bd93f9;
    --accent-contrast: #282a36;
    --espsol: #8be9fd;
    --espsol-rgb: 139, 233, 253;
    --palanu: #bd93f9;
    --palanu-rgb: 189, 147, 249;
    --hackerday: #ff79c6;
    --hackerday-rgb: 255, 121, 198;
    --solana: #50fa7b;
    --solana-rgb: 80, 250, 123;
}

/* ── TOKYO NIGHT — deep indigo. ────────────────────────── */
:root[data-theme="tokyo-night"] {
    color-scheme: dark;
    --art-invert: 0;
    --logo-invert: 1;
    --bg: #1a1b26;
    --panel: #16161e;
    --panel-strong: #101014;
    --surface: #24283b;
    --surface-hover: #292e42;
    --text: #c0caf5;
    --muted: #9aa5ce;
    --line: #292e42;
    --line-strong: #565f89;
    --fg-rgb: 192, 202, 245;
    --bg-rgb: 16, 16, 20;
    --accent: #7aa2f7;
    --accent-contrast: #1a1b26;
    --espsol: #7dcfff;
    --espsol-rgb: 125, 207, 255;
    --palanu: #bb9af7;
    --palanu-rgb: 187, 154, 247;
    --hackerday: #f7768e;
    --hackerday-rgb: 247, 118, 142;
    --solana: #9ece6a;
    --solana-rgb: 158, 206, 106;
}

/* ── ROSÉ PINE — muted plum. ───────────────────────────── */
:root[data-theme="rose-pine"] {
    color-scheme: dark;
    --art-invert: 0;
    --logo-invert: 1;
    --bg: #191724;
    --panel: #1f1d2e;
    --panel-strong: #14121f;
    --surface: #26233a;
    --surface-hover: #2f2b45;
    --text: #e0def4;
    --muted: #908caa;
    --line: #26233a;
    --line-strong: #6e6a86;
    --fg-rgb: 224, 222, 244;
    --bg-rgb: 20, 18, 31;
    --accent: #ebbcba;
    --accent-contrast: #191724;
    --espsol: #9ccfd8;
    --espsol-rgb: 156, 207, 216;
    --palanu: #c4a7e7;
    --palanu-rgb: 196, 167, 231;
    --hackerday: #eb6f92;
    --hackerday-rgb: 235, 111, 146;
    --solana: #31748f;
    --solana-rgb: 49, 116, 143;
}

/* ── SOLARIZED LIGHT — warm paper. ─────────────────────── */
:root[data-theme="solarized-light"] {
    color-scheme: light;
    --art-invert: 1;
    --logo-invert: 0;
    --bg: #fdf6e3;
    --panel: #f5eed9;
    --panel-strong: #eee8d5;
    --surface: #eee8d5;
    --surface-hover: #e3ddc8;
    --text: #073642;
    --muted: #657b83;
    --line: #ded8c4;
    --line-strong: #93a1a1;
    --fg-rgb: 7, 54, 66;
    --bg-rgb: 253, 246, 227;
    --accent: #268bd2;
    --accent-contrast: #fdf6e3;
    --espsol: #2aa198;
    --espsol-rgb: 42, 161, 152;
    --palanu: #6c71c4;
    --palanu-rgb: 108, 113, 196;
    --hackerday: #dc322f;
    --hackerday-rgb: 220, 50, 47;
    --solana: #859900;
    --solana-rgb: 133, 153, 0;
}

/* ═══════════════════════════════════════════════════════
   THEME SWITCHER — fixed bottom-right
   ═══════════════════════════════════════════════════════ */

.theme-switcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    font-family: 'IBM Plex Mono', monospace;
}

/* ── Trigger button ── */
.ts-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 24px rgba(var(--bg-rgb), 0.45);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.ts-trigger:hover {
    background: var(--surface);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.ts-trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ts-trigger svg {
    width: 19px;
    height: 19px;
    display: block;
}

/* ── Popover panel ── */
.ts-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: 236px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: 8px;
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(var(--bg-rgb), 0.55);
    display: flex;
    flex-direction: column;
    gap: 2px;

    /* hidden state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.97);
    transform-origin: bottom right;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.theme-switcher.is-open .ts-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.ts-panel-label {
    padding: 6px 10px 8px;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}

/* ── Theme option row ── */
.ts-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    color: var(--muted);
    text-align: left;
    transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}

.ts-option:hover {
    background: var(--surface);
    color: var(--text);
}

.ts-option:focus-visible {
    outline: none;
    border-color: var(--accent);
}

.ts-option[aria-checked="true"] {
    color: var(--text);
    background: var(--surface);
    border-color: var(--accent);
}

/* Swatch — three stacked dots previewing bg / accent / text */
.ts-swatch {
    flex: none;
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: 5px;
    border: 1px solid var(--line);
}

.ts-swatch span {
    width: 8px;
    height: 14px;
    border-radius: 2px;
    display: block;
}

.ts-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Check mark on the active row */
.ts-check {
    flex: none;
    width: 13px;
    height: 13px;
    opacity: 0;
    color: var(--accent);
}

.ts-option[aria-checked="true"] .ts-check {
    opacity: 1;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .theme-switcher {
        right: 14px;
        bottom: 14px;
    }

    .ts-trigger {
        width: 40px;
        height: 40px;
    }

    .ts-panel {
        width: 210px;
        max-height: 54vh;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .ts-trigger,
    .ts-panel,
    .ts-option {
        transition: none;
    }

    .ts-trigger:hover {
        transform: none;
    }

    .theme-switcher.is-open .ts-panel {
        transform: none;
    }
}

/* ── Print ── */
@media print {
    .theme-switcher {
        display: none;
    }
}