/* 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; */
    --vibrant-font: var(--font-default);
    /* FOR NOW... */
    --font-body: var(--font-default);

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

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

    --surface-1: #ffffff;
    --surface-2: #f2f4f8;
    --surface-3: #e9edf5;
    --border-subtle: #d8dee7;
    --border-strong: #c3ccd8;
    --shadow-color: rgba(15, 23, 42, 0.12);
    --heading: #101622;
    --text-muted: #313131;
    --link-color: #000000;
    --link-hover: #000000;
    --wrapper-bg: var(--surface-1);

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

    --link-underline: var(--link-color);
    /* 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;
    --hljs-comment: #555;
}

@supports (color: color-mix(in srgb, black 50%, white)) {
    :root {
        --selection-bg: color-mix(in srgb, var(--nav-bg) 70%, var(--fg) 30%);
        --surface-1: color-mix(in srgb, var(--bg) 84%, var(--fg) 16%);
        --surface-2: color-mix(in srgb, var(--bg) 76%, var(--fg) 24%);
        --surface-3: color-mix(in srgb, var(--bg) 68%, var(--fg) 32%);
        --border-subtle: color-mix(in srgb, var(--fg) 14%, var(--bg) 86%);
        --border-strong: color-mix(in srgb, var(--fg) 24%, var(--bg) 76%);
        --text-muted: color-mix(in srgb, var(--fg) 72%, var(--bg) 28%);
        --heading: color-mix(in srgb, var(--fg) 94%, var(--bg) 6%);
        --link-color: color-mix(in srgb, var(--nav-fg) 60%, var(--fg) 40%);
        --link-hover: color-mix(in srgb, var(--nav-fg) 40%, var(--fg) 60%);
        --shadow-color: color-mix(in srgb, var(--fg) 12%, transparent);
        --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;
        --surface-1: #161b22;
        --surface-2: #1f252e;
        --surface-3: #262d37;
        --border-subtle: #2c333d;
        --border-strong: #3b444f;
        --shadow-color: rgba(0, 0, 0, 0.45);
        --heading: #f5faff;
        --text-muted: #9fa8b5;
        --link-color: #ffffff;
        --link-hover: #ffffff;
        --link-underline: var(--link-color);
        --wrapper-bg: var(--surface-1);
        --footer-bg: #000;
        --footer-fg: #fff;
        --font-body: var(--font-default);
        --hljs-bg: #222;
        --hljs-inline-bg: #161b22;
        --hljs-fg: #c9d1d9;
        --hljs-border: #30363d;
        --hljs-comment: #8b949e;
    }
}

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

/* Light */
html[data-theme="light"] {
    --bg: #fff;
    --fg: #111;
    --nav-bg: #ccc;
    --nav-fg: #000;
    --surface-1: #ffffff;
    --surface-2: #f4f6fb;
    --surface-3: #e9edf5;
    --border-subtle: #d2d9e3;
    --border-strong: #bdc7d5;
    --shadow-color: rgba(15, 23, 42, 0.12);
    --heading: #0f141f;
    --text-muted: #313131;
    --link-color: #000000;
    --link-hover: #000000;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #eee;
    --footer-fg: #000;
    --font-body: var(--font-default);
    --hljs-bg: #f6f8fa;
    --hljs-fg: #24292e;
    --hljs-border: #d0d7de;
    --hljs-inline-bg: #f6f8fa;
    --hljs-comment: #555;
}

/* Dark */
html[data-theme="dark"] {
    --bg: #111;
    --fg: #fff;
    --nav-bg: #000;
    --nav-fg: #fff;
    --surface-1: #161b22;
    --surface-2: #1f252e;
    --surface-3: #262d37;
    --border-subtle: #2c333d;
    --border-strong: #3b444f;
    --shadow-color: rgba(0, 0, 0, 0.45);
    --heading: #f5faff;
    --text-muted: #9fa8b5;
    --link-color: #ffffff;
    --link-hover: #ffffff;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #000;
    --footer-fg: #fff;
    --font-body: var(--font-default);
    --hljs-bg: #222;
    --hljs-inline-bg: #161b22;
    --hljs-fg: #c9d1d9;
    --hljs-border: #30363d;
    --hljs-comment: #8b949e;
}

/* Forest */
html[data-theme="forest"] {
    --bg: #0e1512;
    --fg: #e9f7ef;
    --nav-bg: #0b120f;
    --nav-fg: #e9f7ef;
    --surface-1: #15211c;
    --surface-2: #1b2a23;
    --surface-3: #22342d;
    --border-subtle: #264036;
    --border-strong: #355244;
    --shadow-color: rgba(6, 20, 13, 0.55);
    --heading: #f1fff8;
    --text-muted: #b4d5c8;
    --link-color: #8be4c0;
    --link-hover: #a2f2d3;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #0b120f;
    --footer-fg: #e9f7ef;
    --font-body: var(--font-default);
    --hljs-bg: #18241f;
    --hljs-inline-bg: #1c2b24;
    --hljs-fg: #d7efe4;
    --hljs-border: #2a3b33;
    --hljs-comment: #6fa487;
}

/* Ocean */
html[data-theme="ocean"] {
    --bg: #07131d;
    --fg: #e8f3ff;
    --nav-bg: #061019;
    --nav-fg: #e8f3ff;
    --surface-1: #0d1f30;
    --surface-2: #13293d;
    --surface-3: #1a3449;
    --border-subtle: #1f3b53;
    --border-strong: #284e6d;
    --shadow-color: rgba(4, 20, 40, 0.55);
    --heading: #f0f7ff;
    --text-muted: #a8bed5;
    --link-color: #73c4ff;
    --link-hover: #9cd9ff;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #061019;
    --footer-fg: #e8f3ff;
    --font-body: var(--font-default);
    --hljs-bg: #0f2334;
    --hljs-inline-bg: #122b41;
    --hljs-fg: #d4e6fa;
    --hljs-border: #1f3951;
    --hljs-comment: #7ba7c7;
}

/* Grape */
html[data-theme="grape"] {
    --bg: #120b16;
    --fg: #f4eaff;
    --nav-bg: #08050a;
    --nav-fg: #f4eaff;
    --surface-1: #1c1022;
    --surface-2: #24132c;
    --surface-3: #2c1737;
    --border-subtle: #2f2144;
    --border-strong: #3f2f57;
    --shadow-color: rgba(12, 4, 18, 0.55);
    --heading: #f9edff;
    --text-muted: #d6c7eb;
    --link-color: #d4b4ff;
    --link-hover: #e6cbff;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #08050a;
    --footer-fg: #f4eaff;
    --font-body: var(--font-default);
    --hljs-bg: #1e1324;
    --hljs-inline-bg: #22162a;
    --hljs-fg: #eedeff;
    --hljs-border: #35213f;
    --hljs-comment: #b998d8;
}

/* Sunset */
html[data-theme="sunset"] {
    --bg: #ff5e5b;
    --fg: #fff5f2;
    --nav-bg: #d94343;
    --nav-fg: #fff5f2;
    --surface-1: #d94a47;
    --surface-2: #c03d3a;
    --surface-3: #a73333;
    --border-subtle: #ff8f88;
    --border-strong: #ff6b63;
    --shadow-color: rgba(122, 19, 25, 0.38);
    --heading: #fff8f6;
    --text-muted: #ffd7d1;
    --link-color: #ffe3dd;
    --link-hover: #fff5f2;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #d94343;
    --footer-fg: #fff5f2;
    --font-body: var(--vibrant-font);
    --hljs-bg: #c23d3a;
    --hljs-inline-bg: #bb3835;
    --hljs-fg: #fff8f6;
    --hljs-border: #ff7a72;
    --hljs-comment: #ffbab6;
}

/* Lime */
html[data-theme="lime"] {
    --bg: #d9ff00;
    --fg: #112;
    --nav-bg: #aacc00;
    --nav-fg: #112;
    --surface-1: #f5ffcc;
    --surface-2: #e4f884;
    --surface-3: #cde75a;
    --border-subtle: #b0cd3c;
    --border-strong: #89a617;
    --shadow-color: rgba(75, 97, 0, 0.35);
    --heading: #101b06;
    --text-muted: #314200;
    --link-color: #2a3b00;
    --link-hover: #1d2800;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #aacc00;
    --footer-fg: #112;
    --font-body: var(--vibrant-font);
    --hljs-bg: #e4f884;
    --hljs-inline-bg: #d4e86f;
    --hljs-fg: #1f2600;
    --hljs-border: #a9c722;
    --hljs-comment: #4c5a0a;
}

/* Aqua */
html[data-theme="aqua"] {
    --bg: #00f7ff;
    --fg: #042a2b;
    --nav-bg: #009ea3;
    --nav-fg: #042a2b;
    --surface-1: #b6fbff;
    --surface-2: #84ebf0;
    --surface-3: #52d5dc;
    --border-subtle: #5ed3da;
    --border-strong: #3aaab1;
    --shadow-color: rgba(0, 76, 87, 0.35);
    --heading: #042a2b;
    --text-muted: #0b4c4f;
    --link-color: #0f5256;
    --link-hover: #0b3e40;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #009ea3;
    --footer-fg: #042a2b;
    --font-body: var(--vibrant-font);
    --hljs-bg: #a5f4f7;
    --hljs-inline-bg: #8fe3e8;
    --hljs-fg: #053437;
    --hljs-border: #52cbd4;
    --hljs-comment: #0d5b60;
}

/* Neon Pink */
html[data-theme="neonpink"] {
    --bg: #ff00aa;
    --fg: #fff;
    --nav-bg: #b30078;
    --nav-fg: #fff;
    --surface-1: #c00089;
    --surface-2: #98006a;
    --surface-3: #6d0050;
    --border-subtle: #ff7fd8;
    --border-strong: #ff47c3;
    --shadow-color: rgba(120, 0, 75, 0.45);
    --heading: #fff0f9;
    --text-muted: #ffd0f0;
    --link-color: #ffe1f8;
    --link-hover: #fff4fb;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #b30078;
    --footer-fg: #fff;
    --font-body: var(--vibrant-font);
    --hljs-bg: #9f006e;
    --hljs-inline-bg: #88005f;
    --hljs-fg: #ffe7f8;
    --hljs-border: #ff6fcf;
    --hljs-comment: #ffd6f0;
}

/* Solar */
html[data-theme="solar"] {
    --bg: #ffb700;
    --fg: #222;
    --nav-bg: #cc9100;
    --nav-fg: #222;
    --surface-1: #ffe8a6;
    --surface-2: #ffd358;
    --surface-3: #ffbf1f;
    --border-subtle: #ffce66;
    --border-strong: #e0a700;
    --shadow-color: rgba(126, 82, 0, 0.35);
    --heading: #271b00;
    --text-muted: #4b3500;
    --link-color: #4c3100;
    --link-hover: #2f1d00;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #cc9100;
    --footer-fg: #222;
    --font-body: var(--vibrant-font);
    --hljs-bg: #ffd76a;
    --hljs-inline-bg: #ffcb45;
    --hljs-fg: #2e1e00;
    --hljs-border: #f0ab00;
    --hljs-comment: #6b4b00;
}

/* Mint */
html[data-theme="mint"] {
    --bg: #2dffb3;
    --fg: #032;
    --nav-bg: #00cc88;
    --nav-fg: #032;
    --surface-1: #b4ffe4;
    --surface-2: #79f3c6;
    --surface-3: #42dc9f;
    --border-subtle: #4fd8a5;
    --border-strong: #2ea67a;
    --shadow-color: rgba(0, 83, 54, 0.35);
    --heading: #042920;
    --text-muted: #0d4f3b;
    --link-color: #0f5b46;
    --link-hover: #0e4434;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #00cc88;
    --footer-fg: #032;
    --font-body: var(--vibrant-font);
    --hljs-bg: #a5f4d8;
    --hljs-inline-bg: #7de8c3;
    --hljs-fg: #053627;
    --hljs-border: #3fcca1;
    --hljs-comment: #0d5b42;
}

/* Matrix */
html[data-theme="matrix"] {
    --bg: #000;
    --fg: #0f0;
    --nav-bg: #030;
    --nav-fg: #0f0;
    --surface-1: #001408;
    --surface-2: #001d0c;
    --surface-3: #00270f;
    --border-subtle: #0f3d24;
    --border-strong: #145c34;
    --shadow-color: rgba(0, 64, 24, 0.55);
    --heading: #7affb2;
    --text-muted: #43ff8f;
    --link-color: #6dffaf;
    --link-hover: #92ffc0;
    --link-underline: var(--link-color);
    --wrapper-bg: var(--surface-1);
    --footer-bg: #030;
    --footer-fg: #0f0;
    --hljs-bg: #001408;
    --hljs-inline-bg: #001d0c;
    --hljs-fg: #4dffb3;
    --hljs-border: #0c3920;
    --hljs-comment: #3dff9f;
}