/* assets/styles/themes.css */

/* === Global semantic tokens (defaults = Light) === */
:root {
    /* fonts */
    --font-default: google-sans-code, system-ui, sans-serif;
    /* --vibrant-font: open-sans, sans-serif; */
    --vibrant-font: Roboto, sans-serif;
    --font-body: var(--font-default);

    /* colors */
    --bg: #ffffff;
    /* page bg */
    --fg: #111111;
    /* text */

    --nav-bg: #333333;
    /* top nav + burger bar */
    --nav-fg: #ffffff;

    --wrapper-bg: #ffffff;

    --footer-bg: #333333;
    --footer-fg: #ffffff;

    --link-underline: #ffffff;
    /* underline in nav links */

    --selection-bg: var(--nav-bg);
    --selection-fg: var(--nav-fg);

    /* syntax highlight defaults (light fallback) */
    --hljs-bg: #f6f8fa;
    --hljs-fg: #24292e;
    --hljs-border: #d0d7de;
    --hljs-inline-bg: #f6f8fa;
}

@supports (color: color-mix(in srgb, black 50%, white)) {
    :root {
        --selection-bg: color-mix(in srgb, var(--nav-bg) 70%, var(--fg) 30%);
        --hljs-bg: color-mix(in srgb, var(--bg) 92%, var(--fg) 8%);
        --hljs-inline-bg: color-mix(in srgb, var(--bg) 88%, var(--fg) 12%);
        --hljs-fg: color-mix(in srgb, var(--fg) 90%, var(--bg) 10%);
        --hljs-border: color-mix(in srgb, var(--fg) 14%, var(--bg) 86%);
    }
}

/* Selection highlight follows active theme colors */
::selection {
    background: var(--selection-bg);
    color: var(--selection-fg);
}

::-moz-selection {
    background: var(--selection-bg);
    color: var(--selection-fg);
}

.theme-picker {
    margin-left: auto;
    /* pushes to right end of nav */
    display: inline-flex;
    gap: .5rem;
    align-items: center;
}

.theme-dot {
    --swatch: #999;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid #fff8;
    background: var(--swatch);
    cursor: pointer;
    padding: 0;
}

.theme-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}


/* === Auto (system) dark when NO explicit data-theme is set === */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #111;
        --fg: #fff;
        --nav-bg: #000;
        --nav-fg: #fff;
        --wrapper-bg: #111;
        --footer-bg: #000;
        --footer-fg: #fff;
        --link-underline: var(--nav-fg);
        --font-body: var(--font-default);
        --hljs-bg: #222;
        --hljs-inline-bg: #161b22;
        --hljs-fg: #c9d1d9;
        --hljs-border: #30363d;
    }
}

/* === Explicit themes override variables === */

/* Light */
html[data-theme="light"] {
    --bg: #fff;
    --fg: #111;
    --nav-bg: #ccc;
    --nav-fg: #000;
    --wrapper-bg: #fff;
    --footer-bg: #eee;
    --footer-fg: #000;
    --font-body: var(--font-default);
}

/* Dark */
html[data-theme="dark"] {
    --bg: #111;
    --fg: #fff;
    --nav-bg: #000;
    --nav-fg: #fff;
    --wrapper-bg: #111;
    --footer-bg: #000;
    --footer-fg: #fff;
    --font-body: var(--font-default);
    --hljs-bg: #222;
    --hljs-inline-bg: #161b22;
    --hljs-fg: #c9d1d9;
    --hljs-border: #30363d;
}

/* Forest */
html[data-theme="forest"] {
    --bg: #0e1512;
    --fg: #e9f7ef;
    --nav-bg: #0b120f;
    --nav-fg: #e9f7ef;
    --wrapper-bg: #0e1512;
    --footer-bg: #0b120f;
    --footer-fg: #e9f7ef;
    --font-body: var(--font-default);
    --hljs-bg: #18241f;
    --hljs-inline-bg: #1c2b24;
    --hljs-fg: #d7efe4;
    --hljs-border: #2a3b33;
}

/* Ocean */
html[data-theme="ocean"] {
    --bg: #07131d;
    --fg: #e8f3ff;
    --nav-bg: #061019;
    --nav-fg: #e8f3ff;
    --wrapper-bg: #07131d;
    --footer-bg: #061019;
    --footer-fg: #e8f3ff;
    --font-body: var(--font-default);
    --hljs-bg: #0f2334;
    --hljs-inline-bg: #122b41;
    --hljs-fg: #d4e6fa;
    --hljs-border: #1f3951;
}

/* Grape */
html[data-theme="grape"] {
    --bg: #120b16;
    --fg: #f4eaff;
    --nav-bg: #08050a;
    --nav-fg: #f4eaff;
    --wrapper-bg: #120b16;
    --footer-bg: #08050a;
    --footer-fg: #f4eaff;
    --font-body: var(--font-default);
    --hljs-bg: #1e1324;
    --hljs-inline-bg: #22162a;
    --hljs-fg: #eedeff;
    --hljs-border: #35213f;
}

/* Sunset */
html[data-theme="sunset"] {
    --bg: #ff5e5b;
    --fg: #fff5f2;
    --nav-bg: #d94343;
    --nav-fg: #fff5f2;
    --wrapper-bg: #ff5e5b;
    --footer-bg: #d94343;
    --footer-fg: #fff5f2;
    --font-body: var(--vibrant-font);
}

/* Lime */
html[data-theme="lime"] {
    --bg: #d9ff00;
    --fg: #112;
    --nav-bg: #aacc00;
    --nav-fg: #112;
    --wrapper-bg: #d9ff00;
    --footer-bg: #aacc00;
    --footer-fg: #112;
    --font-body: var(--vibrant-font);
}

/* Aqua */
html[data-theme="aqua"] {
    --bg: #00f7ff;
    --fg: #042a2b;
    --nav-bg: #009ea3;
    --nav-fg: #042a2b;
    --wrapper-bg: #00f7ff;
    --footer-bg: #009ea3;
    --footer-fg: #042a2b;
    --font-body: var(--vibrant-font);
}

/* Neon Pink */
html[data-theme="neonpink"] {
    --bg: #ff00aa;
    --fg: #fff;
    --nav-bg: #b30078;
    --nav-fg: #fff;
    --wrapper-bg: #ff00aa;
    --footer-bg: #b30078;
    --footer-fg: #fff;
    --font-body: var(--vibrant-font);
}

/* Solar */
html[data-theme="solar"] {
    --bg: #ffb700;
    --fg: #222;
    --nav-bg: #cc9100;
    --nav-fg: #222;
    --wrapper-bg: #ffb700;
    --footer-bg: #cc9100;
    --footer-fg: #222;
    --font-body: var(--vibrant-font);
}

/* Mint */
html[data-theme="mint"] {
    --bg: #2dffb3;
    --fg: #032;
    --nav-bg: #00cc88;
    --nav-fg: #032;
    --wrapper-bg: #2dffb3;
    --footer-bg: #00cc88;
    --footer-fg: #032;
    --font-body: var(--vibrant-font);
}

/* Matrix */
html[data-theme="matrix"] {
    --bg: #000;
    --fg: #0f0;
    --nav-bg: #030;
    --nav-fg: #0f0;
    --wrapper-bg: #000;
    --footer-bg: #030;
    --footer-fg: #0f0;
    --hljs-bg: #001408;
    --hljs-inline-bg: #001d0c;
    --hljs-fg: #4dffb3;
    --hljs-border: #0c3920;
}