/* Themes: each block overrides the tokens from style.css for one data-theme. */

/* Catppuccin Latte — light */
@layer tokens {
  :root[data-theme="latte"] {
    --ctp-rosewater: #dc8a78;
    --ctp-flamingo: #dd7878;
    --ctp-pink: #ea76cb;
    --ctp-mauve: #8839ef;
    --ctp-red: #d20f39;
    --ctp-maroon: #e64553;
    --ctp-peach: #fe640b;
    --ctp-yellow: #df8e1d;
    --ctp-green: #40a02b;
    --ctp-teal: #179299;
    --ctp-sky: #04a5e5;
    --ctp-sapphire: #209fb5;
    --ctp-blue: #1e66f5;
    --ctp-lavender: #7287fd;
    --ctp-text: #4c4f69;
    --ctp-subtext1: #5c5f77;
    --ctp-subtext0: #6c6f85;
    --ctp-overlay2: #7c7f93;
    --ctp-overlay1: #8c8fa1;
    --ctp-overlay0: #9ca0b0;
    --ctp-surface2: #acb0be;
    --ctp-surface1: #bcc0cc;
    --ctp-surface0: #ccd0da;
    --ctp-base: #eff1f5;
    --ctp-mantle: #e6e9ef;
    --ctp-crust: #dce0e8;

    --shadow-1: 0 1px 2px rgb(76 79 105 / 0.08);
    --shadow-2: 0 18px 50px rgb(76 79 105 / 0.18), 0 2px 8px rgb(76 79 105 / 0.1);
    --shadow-3: 0 28px 80px rgb(76 79 105 / 0.24), 0 4px 16px rgb(76 79 105 / 0.12);
    --on-accent: #fff;
    --on-danger: #fff;
    --scrim: color-mix(in oklab, var(--ctp-crust) 55%, transparent);
    color-scheme: light;
  --ctp-subtext0: #54576c; --ctp-mauve: #7a2ee0; --link: #1a55d0; --success: #2c7020; --danger: #c00d33;
}
}

/* Catppuccin Mocha — dark */
@layer tokens {
  :root,
  :root[data-theme="mocha"] {
    --ctp-rosewater: #f5e0dc;
    --ctp-flamingo: #f2cdcd;
    --ctp-pink: #f5c2e7;
    --ctp-mauve: #cba6f7;
    --ctp-red: #f38ba8;
    --ctp-maroon: #eba0ac;
    --ctp-peach: #fab387;
    --ctp-yellow: #f9e2af;
    --ctp-green: #a6e3a1;
    --ctp-teal: #94e2d5;
    --ctp-sky: #89dceb;
    --ctp-sapphire: #74c7ec;
    --ctp-blue: #89b4fa;
    --ctp-lavender: #b4befe;
    --ctp-text: #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay2: #9399b2;
    --ctp-overlay1: #7f849c;
    --ctp-overlay0: #6c7086;
    --ctp-surface2: #585b70;
    --ctp-surface1: #45475a;
    --ctp-surface0: #313244;
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;
    color-scheme: dark;
  }
}

/* Catppuccin Frappé — dark */
@layer tokens {
  :root[data-theme="frappe"] {
    --ctp-rosewater: #f2d5cf;
    --ctp-flamingo: #eebebe;
    --ctp-pink: #f4b8e4;
    --ctp-mauve: #ca9ee6;
    --ctp-red: #e78284;
    --ctp-maroon: #ea999c;
    --ctp-peach: #ef9f76;
    --ctp-yellow: #e5c890;
    --ctp-green: #a6d189;
    --ctp-teal: #81c8be;
    --ctp-sky: #99d1db;
    --ctp-sapphire: #85c1dc;
    --ctp-blue: #8caaee;
    --ctp-lavender: #babbf1;
    --ctp-text: #c6d0f5;
    --ctp-subtext1: #b5bfe2;
    --ctp-subtext0: #a5adce;
    --ctp-overlay2: #949cbb;
    --ctp-overlay1: #838ba7;
    --ctp-overlay0: #737994;
    --ctp-surface2: #626880;
    --ctp-surface1: #51576d;
    --ctp-surface0: #414559;
    --ctp-base: #303446;
    --ctp-mantle: #292c3c;
    --ctp-crust: #232634;
    --accent: var(--ctp-peach);
    --accent-2: var(--ctp-teal);
    --quote: var(--ctp-peach);
    color-scheme: dark;
  }
}

/* Catppuccin Macchiato — dark */
@layer tokens {
  :root[data-theme="macchiato"] {
    --ctp-rosewater: #f4dbd6;
    --ctp-flamingo: #f0c6c6;
    --ctp-pink: #f5bde6;
    --ctp-mauve: #c6a0f6;
    --ctp-red: #ed8796;
    --ctp-maroon: #ee99a0;
    --ctp-peach: #f5a97f;
    --ctp-yellow: #eed49f;
    --ctp-green: #a6da95;
    --ctp-teal: #8bd5ca;
    --ctp-sky: #91d7e3;
    --ctp-sapphire: #7dc4e4;
    --ctp-blue: #8aadf4;
    --ctp-lavender: #b7bdf8;
    --ctp-text: #cad3f5;
    --ctp-subtext1: #b8c0e0;
    --ctp-subtext0: #a5adcb;
    --ctp-overlay2: #939ab7;
    --ctp-overlay1: #8087a2;
    --ctp-overlay0: #6e738d;
    --ctp-surface2: #5b6078;
    --ctp-surface1: #494d64;
    --ctp-surface0: #363a4f;
    --ctp-base: #24273a;
    --ctp-mantle: #1e2030;
    --ctp-crust: #181926;
    --accent: var(--ctp-pink);
    --accent-2: var(--ctp-sapphire);
    --quote: var(--ctp-pink);
    color-scheme: dark;
  }
}

/* Nord — arctic polar night with a frosted, lighter chrome. */
:root[data-theme='nord'] {
  --ctp-rosewater: #eceff4;
  --ctp-flamingo: #d08770;
  --ctp-pink: #b48ead;
  --ctp-mauve: #b48ead;
  --ctp-red: #d6868d;
  --ctp-maroon: #d08770;
  --ctp-peach: #d08770;
  --ctp-yellow: #ebcb8b;
  --ctp-green: #a3be8c;
  --ctp-teal: #8fbcbb;
  --ctp-sky: #88c0d0;
  --ctp-sapphire: #88c0d0;
  --ctp-blue: #88c0d0;
  --ctp-lavender: #b48ead;
  --ctp-text: #eceff4;
  --ctp-subtext1: #e5e9f0;
  --ctp-subtext0: #d8dee9;
  --ctp-overlay2: #c1ccdf;
  --ctp-overlay1: #aab6cc;
  --ctp-overlay0: #98a4bb;
  --ctp-surface2: #616e88;
  --ctp-surface1: #4c566a;
  --ctp-surface0: #434c5e;
  --ctp-base: #3b4252;
  --ctp-mantle: #2e3440;
  --ctp-crust: #2a2f3a;
  --accent: #88c0d0;
  --accent-2: #81a1c1;
  --on-accent: #2e3440;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --danger: #eba5ab;
}

/* Gruvbox Dark — warm, restrained contrast. */
:root[data-theme='gruvbox'] {
  --ctp-rosewater: #ebdbb2;
  --ctp-flamingo: #fe8019;
  --ctp-pink: #d3869b;
  --ctp-mauve: #d3869b;
  --ctp-red: #fb4934;
  --ctp-maroon: #cc241d;
  --ctp-peach: #fe8019;
  --ctp-yellow: #fabd2f;
  --ctp-green: #b8bb26;
  --ctp-teal: #8ec07c;
  --ctp-sky: #83a598;
  --ctp-sapphire: #83a598;
  --ctp-blue: #83a598;
  --ctp-lavender: #d3869b;
  --ctp-text: #ebdbb2;
  --ctp-subtext1: #d5c4a1;
  --ctp-subtext0: #bdae93;
  --ctp-overlay2: #a89984;
  --ctp-overlay1: #a89984;
  --ctp-overlay0: #928374;
  --ctp-surface2: #504945;
  --ctp-surface1: #3c3836;
  --ctp-surface0: #32302f;
  --ctp-base: #282828;
  --ctp-mantle: #1d2021;
  --ctp-crust: #1b1d1e;
  --accent: #fabd2f;
  --accent-2: #83a598;
  --on-accent: #282828;
  --danger: #fc7363;
}

/* Monokai — classic palette, muted surfaces and bright readable text. */
:root[data-theme='monokai'] {
  --ctp-rosewater: #f8f8f2;
  --ctp-flamingo: #fd971f;
  --ctp-pink: #f92672;
  --ctp-mauve: #ae81ff;
  --ctp-red: #f92672;
  --ctp-maroon: #f92672;
  --ctp-peach: #fd971f;
  --ctp-yellow: #e6db74;
  --ctp-green: #a6e22e;
  --ctp-teal: #a1efe4;
  --ctp-sky: #66d9ef;
  --ctp-sapphire: #66d9ef;
  --ctp-blue: #66d9ef;
  --ctp-lavender: #ae81ff;
  --ctp-text: #f8f8f2;
  --ctp-subtext1: #e8e6dc;
  --ctp-subtext0: #cfcfc2;
  --ctp-overlay2: #b9b8aa;
  --ctp-overlay1: #a6a595;
  --ctp-overlay0: #858575;
  --ctp-surface2: #49483e;
  --ctp-surface1: #3e3d32;
  --ctp-surface0: #34352d;
  --ctp-base: #272822;
  --ctp-mantle: #1e1f1c;
  --ctp-crust: #161714;
  --accent: #a6e22e;
  --accent-2: #66d9ef;
  --on-accent: #272822;
  --danger: #ff6f9c;
}

/* Botanical — a light, calm palette for plantsand.coffee. */
:root[data-theme='botanical'] {
  color-scheme: light;
  --ctp-rosewater: #314b35;
  --ctp-flamingo: #9b684c;
  --ctp-pink: #8b6f78;
  --ctp-mauve: #657553;
  --ctp-red: #a34d45;
  --ctp-maroon: #8c423c;
  --ctp-peach: #a5683f;
  --ctp-yellow: #7b682d;
  --ctp-green: #39734d;
  --ctp-teal: #3b7a67;
  --ctp-sky: #416d79;
  --ctp-sapphire: #416d79;
  --ctp-blue: #416d79;
  --ctp-lavender: #657553;
  --ctp-text: #243b2a;
  --ctp-subtext1: #36523c;
  --ctp-subtext0: #41594a;
  --ctp-overlay2: #657865;
  --ctp-overlay1: #72816c;
  --ctp-overlay0: #7f8e76;
  --ctp-surface2: #bbc9b2;
  --ctp-surface1: #d1d9c7;
  --ctp-surface0: #e1e6d8;
  --ctp-base: #f4f1e8;
  --ctp-mantle: #e9e5d8;
  --ctp-crust: #ded9c8;
  --accent: #39734d;
  --accent-2: #416d79;
  --on-accent: #f4f1e8;
  --on-danger: #f4f1e8;
  --accent: #2f6341; --success: #2f6341;
}

/* Botanical Dark — deep leaves, sage text and soft moss accents. */
:root[data-theme='botanical-dark'] {
  --ctp-rosewater: #e7ede2;
  --ctp-flamingo: #d0a27e;
  --ctp-pink: #c9a8b0;
  --ctp-mauve: #b5b895;
  --ctp-red: #e39283;
  --ctp-maroon: #ce8275;
  --ctp-peach: #d0a27e;
  --ctp-yellow: #d8c88b;
  --ctp-green: #a7c48c;
  --ctp-teal: #91c4aa;
  --ctp-sky: #91b7b6;
  --ctp-sapphire: #91c4aa;
  --ctp-blue: #91b7b6;
  --ctp-lavender: #b5b895;
  --ctp-text: #e7ede2;
  --ctp-subtext1: #ccd8c5;
  --ctp-subtext0: #b2c1a8;
  --ctp-overlay2: #a0b197;
  --ctp-overlay1: #93a58a;
  --ctp-overlay0: #879a7f;
  --ctp-surface2: #4b624a;
  --ctp-surface1: #3a503c;
  --ctp-surface0: #2b402f;
  --ctp-base: #14231a;
  --ctp-mantle: #101b15;
  --ctp-crust: #0b140e;
  --accent: #a7c48c;
  --accent-2: #91b7b6;
  --on-accent: #14231a;
}

/* Coffee — espresso surfaces, cream text and caramel accents. */
:root[data-theme='coffee'] {
  --ctp-rosewater: #f1e5d8;
  --ctp-flamingo: #d9a066;
  --ctp-pink: #d8a49a;
  --ctp-mauve: #c69b86;
  --ctp-red: #e08072;
  --ctp-maroon: #c66f62;
  --ctp-peach: #d9a066;
  --ctp-yellow: #dfbd78;
  --ctp-green: #a8bd7a;
  --ctp-teal: #91b4a2;
  --ctp-sky: #9fb4a4;
  --ctp-sapphire: #91b4a2;
  --ctp-blue: #9fb4a4;
  --ctp-lavender: #c69b86;
  --ctp-text: #f1e5d8;
  --ctp-subtext1: #dbcbb9;
  --ctp-subtext0: #c2ad99;
  --ctp-overlay2: #b39c87;
  --ctp-overlay1: #a78f7b;
  --ctp-overlay0: #927c69;
  --ctp-surface2: #584239;
  --ctp-surface1: #44332d;
  --ctp-surface0: #352824;
  --ctp-base: #241b18;
  --ctp-mantle: #1c1513;
  --ctp-crust: #140f0d;
  --accent: #d9a066;
  --accent-2: #9fb4a4;
  --on-accent: #241b18;
}

/* Windows 95 — honest pixels, teal desktop and battleship-grey panels. */
:root[data-theme='windows-95'] {
  color-scheme: light;
  --ctp-rosewater:#000000;--ctp-flamingo:#800000;--ctp-pink:#800080;--ctp-mauve:#800080;
  --ctp-red:#a00000;--ctp-maroon:#800000;--ctp-peach:#804000;--ctp-yellow:#585000;
  --ctp-green:#006000;--ctp-teal:#006060;--ctp-sky:#000080;--ctp-sapphire:#000080;
  --ctp-blue:#000080;--ctp-lavender:#400080;--ctp-text:#000000;--ctp-subtext1:#181818;
  --ctp-subtext0:#303030;--ctp-overlay2:#404040;--ctp-overlay1:#494949;--ctp-overlay0:#505050;
  --ctp-surface2:#808080;--ctp-surface1:#a0a0a0;--ctp-surface0:#b0b0b0;
  --ctp-base:#c0c0c0;--ctp-mantle:#c0c0c0;--ctp-crust:#808080;
  --bg:#008080;--surface:#c0c0c0;--surface-2:#c0c0c0;--surface-3:#a8a8a8;
  --accent:#000080;--accent-2:#008000;--on-accent:#ffffff;--on-danger:#ffffff;
  --border:#606060;--border-strong:#404040;--radius-xs:0;--radius-sm:0;--radius-md:0;--radius-lg:0;
  --success: #004c00;
}

/* Windows 3.11 — classic Program Manager grey with ultramarine accents. */
:root[data-theme='windows-311'] {
  color-scheme: light;
  --ctp-rosewater:#000000;--ctp-flamingo:#800000;--ctp-pink:#800080;--ctp-mauve:#400080;
  --ctp-red:#a00000;--ctp-maroon:#800000;--ctp-peach:#804000;--ctp-yellow:#505000;
  --ctp-green:#005800;--ctp-teal:#006060;--ctp-sky:#0000a8;--ctp-sapphire:#000080;
  --ctp-blue:#000080;--ctp-lavender:#400080;--ctp-text:#000000;--ctp-subtext1:#101010;
  --ctp-subtext0:#282828;--ctp-overlay2:#383838;--ctp-overlay1:#444444;--ctp-overlay0:#505050;
  --ctp-surface2:#7d7d7d;--ctp-surface1:#a8a8a8;--ctp-surface0:#b8b8b8;
  --ctp-base:#c0c0c0;--ctp-mantle:#b8b8b8;--ctp-crust:#808080;
  --bg:#008080;--surface:#c0c0c0;--surface-2:#bcbcbc;--surface-3:#a8a8a8;
  --accent:#0000a8;--accent-2:#800080;--on-accent:#ffffff;--on-danger:#ffffff;
  --border:#585858;--border-strong:#383838;--radius-xs:0;--radius-sm:0;--radius-md:0;--radius-lg:0;
  --danger: #8c0000;
}

/* CDE — Motif-inspired lavender panels and a slate workspace. */
:root[data-theme='cde'] {
  color-scheme: light;
  --ctp-rosewater:#171422;--ctp-flamingo:#804f55;--ctp-pink:#75466f;--ctp-mauve:#6b5d9c;
  --ctp-red:#8d3545;--ctp-maroon:#74303d;--ctp-peach:#8a5935;--ctp-yellow:#695b24;
  --ctp-green:#326b50;--ctp-teal:#356b70;--ctp-sky:#3f5f91;--ctp-sapphire:#415887;
  --ctp-blue:#3f5f91;--ctp-lavender:#6b5d9c;--ctp-text:#171422;--ctp-subtext1:#292535;
  --ctp-subtext0:#37323f;--ctp-overlay2:#4a4555;--ctp-overlay1:#514c5c;--ctp-overlay0:#585262;
  --ctp-surface2:#898296;--ctp-surface1:#a39bad;--ctp-surface0:#b0a8ba;
  --ctp-base:#bdb8c8;--ctp-mantle:#aaa4b6;--ctp-crust:#8f879c;
  --bg:#647a8c;--surface:#bdb8c8;--surface-2:#c8c3d4;--surface-3:#aaa4b6;
  --accent:#6b5d9c;--accent-2:#3f5f91;--on-accent:#ffffff;--on-danger:#ffffff;
  --border:#6f687d;--border-strong:#514b5d;--radius-xs:0;--radius-sm:0;--radius-md:0;--radius-lg:0;
  --accent: #42376e; --link: #263f68; --danger: #6e2034; --success: #1b4632;
}

/* Haiku / BeOS — friendly grey panels with the iconic yellow tab accent. */
:root[data-theme='beos'] {
  color-scheme: light;
  --ctp-rosewater:#161616;--ctp-flamingo:#9c552a;--ctp-pink:#925b78;--ctp-mauve:#746487;
  --ctp-red:#9c4038;--ctp-maroon:#82362f;--ctp-peach:#9c552a;--ctp-yellow:#6d5a19;
  --ctp-green:#4e8a4e;--ctp-teal:#487c7c;--ctp-sky:#3273a8;--ctp-sapphire:#3273a8;
  --ctp-blue:#3273a8;--ctp-lavender:#746487;--ctp-text:#161616;--ctp-subtext1:#282828;
  --ctp-subtext0:#3c3c3c;--ctp-overlay2:#484848;--ctp-overlay1:#505050;--ctp-overlay0:#595959;
  --ctp-surface2:#929292;--ctp-surface1:#b1b1b1;--ctp-surface0:#c4c4c4;
  --ctp-base:#d8d8d8;--ctp-mantle:#c7c7c7;--ctp-crust:#aaaaaa;
  --bg:#89929c;--surface:#d8d8d8;--surface-2:#cecece;--surface-3:#bcbcbc;
  --accent:#f5b93c;--accent-2:#3273a8;--on-accent:#161616;--on-danger:#ffffff;
  --border:#858585;--border-strong:#666666;--radius-xs:0;--radius-sm:2px;--radius-md:3px;--radius-lg:4px;
  --beos-tab: #f5b93c; --accent: #6e4c00; --on-accent: #ffffff; --link: #1f4f78; --success: #2a562a; --danger: #82302a;
}

/* Dracula: purple night, neon accents. */
:root[data-theme='dracula'] {
  --ctp-rosewater: #f8f8f2;
  --ctp-flamingo: #ffb86c;
  --ctp-pink: #ff79c6;
  --ctp-mauve: #bd93f9;
  --ctp-red: #ff6e6e;
  --ctp-maroon: #ff5555;
  --ctp-peach: #ffb86c;
  --ctp-yellow: #f1fa8c;
  --ctp-green: #50fa7b;
  --ctp-teal: #8be9fd;
  --ctp-sky: #8be9fd;
  --ctp-sapphire: #8be9fd;
  --ctp-blue: #bd93f9;
  --ctp-lavender: #bd93f9;
  --ctp-text: #f8f8f2;
  --ctp-subtext1: #e2e2ef;
  --ctp-subtext0: #c3c6dc;
  --ctp-overlay2: #a9aed0;
  --ctp-overlay1: #9298c2;
  --ctp-overlay0: #7d84b3;
  --ctp-surface2: #565a73;
  --ctp-surface1: #44475a;
  --ctp-surface0: #343746;
  --ctp-base: #282a36;
  --ctp-mantle: #21222c;
  --ctp-crust: #191a21;
  --accent: #bd93f9;
  --accent-2: #ff79c6;
  --on-accent: #191a21;
  --danger: #ff6e6e;
}

/* Tokyo Night: deep indigo with city-light blues. */
:root[data-theme='tokyo-night'] {
  --ctp-rosewater: #c0caf5;
  --ctp-flamingo: #ff9e64;
  --ctp-pink: #bb9af7;
  --ctp-mauve: #bb9af7;
  --ctp-red: #f7768e;
  --ctp-maroon: #db4b4b;
  --ctp-peach: #ff9e64;
  --ctp-yellow: #e0af68;
  --ctp-green: #9ece6a;
  --ctp-teal: #73daca;
  --ctp-sky: #7dcfff;
  --ctp-sapphire: #7dcfff;
  --ctp-blue: #7aa2f7;
  --ctp-lavender: #bb9af7;
  --ctp-text: #c0caf5;
  --ctp-subtext1: #b5bde6;
  --ctp-subtext0: #a9b1d6;
  --ctp-overlay2: #9aa2c9;
  --ctp-overlay1: #8890b8;
  --ctp-overlay0: #737aa2;
  --ctp-surface2: #3b4261;
  --ctp-surface1: #2f3549;
  --ctp-surface0: #232433;
  --ctp-base: #1a1b26;
  --ctp-mantle: #16161e;
  --ctp-crust: #121218;
  --accent: #7aa2f7;
  --accent-2: #bb9af7;
  --on-accent: #16161e;
  --danger: #f7768e;
}

/* Rosé Pine: muted plum with rose and foam. */
:root[data-theme='rose-pine'] {
  --ctp-rosewater: #ebbcba;
  --ctp-flamingo: #ebbcba;
  --ctp-pink: #eb6f92;
  --ctp-mauve: #c4a7e7;
  --ctp-red: #eb6f92;
  --ctp-maroon: #eb6f92;
  --ctp-peach: #f6c177;
  --ctp-yellow: #f6c177;
  --ctp-green: #9ccfd8;
  --ctp-teal: #9ccfd8;
  --ctp-sky: #9ccfd8;
  --ctp-sapphire: #9ccfd8;
  --ctp-blue: #9ccfd8;
  --ctp-lavender: #c4a7e7;
  --ctp-text: #e0def4;
  --ctp-subtext1: #cfcce6;
  --ctp-subtext0: #b3afcc;
  --ctp-overlay2: #a6a2c0;
  --ctp-overlay1: #908caa;
  --ctp-overlay0: #817d99;
  --ctp-surface2: #524f67;
  --ctp-surface1: #403d52;
  --ctp-surface0: #26233a;
  --ctp-base: #1f1d2e;
  --ctp-mantle: #191724;
  --ctp-crust: #13111d;
  --accent: #ebbcba;
  --accent-2: #c4a7e7;
  --on-accent: #191724;
  --danger: #f08aa6;
}

/* One Dark: familiar editor grey with soft primaries. */
:root[data-theme='one-dark'] {
  --ctp-rosewater: #dcdfe4;
  --ctp-flamingo: #d19a66;
  --ctp-pink: #c678dd;
  --ctp-mauve: #c678dd;
  --ctp-red: #e06c75;
  --ctp-maroon: #be5046;
  --ctp-peach: #d19a66;
  --ctp-yellow: #e5c07b;
  --ctp-green: #98c379;
  --ctp-teal: #56b6c2;
  --ctp-sky: #56b6c2;
  --ctp-sapphire: #56b6c2;
  --ctp-blue: #61afef;
  --ctp-lavender: #c678dd;
  --ctp-text: #dcdfe4;
  --ctp-subtext1: #c3c9d4;
  --ctp-subtext0: #abb2bf;
  --ctp-overlay2: #9da5b4;
  --ctp-overlay1: #8b919c;
  --ctp-overlay0: #7f848e;
  --ctp-surface2: #4b5263;
  --ctp-surface1: #3e4451;
  --ctp-surface0: #2c313a;
  --ctp-base: #282c34;
  --ctp-mantle: #21252b;
  --ctp-crust: #1b1f24;
  --accent: #61afef;
  --accent-2: #c678dd;
  --on-accent: #1b1f24;
  --danger: #ef8e96;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 6px;
}

/* Solarized Dark: teal-blue base, measured accents. */
:root[data-theme='solarized-dark'] {
  --ctp-rosewater: #eee8d5;
  --ctp-flamingo: #e07a45;
  --ctp-pink: #e2649f;
  --ctp-mauve: #8f93e0;
  --ctp-red: #f0605d;
  --ctp-maroon: #dc322f;
  --ctp-peach: #e07a45;
  --ctp-yellow: #c99a1a;
  --ctp-green: #a3b81a;
  --ctp-teal: #2aa198;
  --ctp-sky: #3fb1e8;
  --ctp-sapphire: #3fb1e8;
  --ctp-blue: #3fb1e8;
  --ctp-lavender: #8f93e0;
  --ctp-text: #e4e4d8;
  --ctp-subtext1: #c5ccc8;
  --ctp-subtext0: #a3b0b0;
  --ctp-overlay2: #93a1a1;
  --ctp-overlay1: #839496;
  --ctp-overlay0: #6c8289;
  --ctp-surface2: #2a5a66;
  --ctp-surface1: #0e4552;
  --ctp-surface0: #073642;
  --ctp-base: #002b36;
  --ctp-mantle: #00252e;
  --ctp-crust: #001e26;
  --accent: #3fb1e8;
  --accent-2: #2aa198;
  --on-accent: #001e26;
  --danger: #f0605d;
}

/* Solarized Light: warm paper, same measured accents. */
:root[data-theme='solarized-light'] {
  --ctp-rosewater: #b5562b;
  --ctp-flamingo: #b5441a;
  --ctp-pink: #b02a6c;
  --ctp-mauve: #5a5fb4;
  --ctp-red: #c42a27;
  --ctp-maroon: #a8241f;
  --ctp-peach: #b5441a;
  --ctp-yellow: #8a6800;
  --ctp-green: #5f6e00;
  --ctp-teal: #1d7a72;
  --ctp-sky: #1f6fa8;
  --ctp-sapphire: #1f6fa8;
  --ctp-blue: #1f6fa8;
  --ctp-lavender: #5a5fb4;
  --ctp-text: #073642;
  --ctp-subtext1: #3e555c;
  --ctp-subtext0: #42575e;
  --ctp-overlay2: #657b83;
  --ctp-overlay1: #839496;
  --ctp-overlay0: #93a1a1;
  --ctp-surface2: #c9c1a8;
  --ctp-surface1: #d9d2bb;
  --ctp-surface0: #e9e2cc;
  --ctp-base: #fdf6e3;
  --ctp-mantle: #f2ebd6;
  --ctp-crust: #e8e1cb;
  --accent: #1f6fa8;
  --accent-2: #1d7a72;
  --on-accent: #fff;
  --on-danger: #fff;
  --danger: #c42a27;
  --link: #1f6fa8;
  --success: #4d5a00;
  --warning: #7a5c00;
  --shadow-1: 0 1px 2px rgb(7 54 66 / 0.08);
  --shadow-2: 0 18px 50px rgb(7 54 66 / 0.16), 0 2px 8px rgb(7 54 66 / 0.08);
  --shadow-3: 0 28px 80px rgb(7 54 66 / 0.22), 0 4px 16px rgb(7 54 66 / 0.1);
  --scrim: color-mix(in oklab, var(--ctp-crust) 55%, transparent);
  color-scheme: light;
}

/* Dynamische afbeelding: the palette comes from the user's own photo (set inline by
   theme.js/app.js); panels are glass over that photo. The glass opacity is computed per
   photo so muted text keeps 5:1 even over its most extreme pixel. */
:root[data-theme='image'] {
  --bg: transparent;
  --surface: var(--glass);
  --glass-blur: 32px;
}

:root[data-theme='image'] body {
  background: var(--ctp-crust) var(--theme-image) center / cover no-repeat fixed;
}

:root[data-theme='image'] :is(.app-shell, .detail-view, .boot-view, .login-view) {
  background: transparent;
}

/* One glass layer per panel area: the whole column strip blurs once, so adjacent
   columns have no blur seams between them (and it is cheaper than one per column). */
:root[data-theme='image'] :is(.topbar, .rail, .columns, .detail-page, .menu-popover, .palette, .toast, .login-card) {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}

/* Inside a glass panel, surfaces are see-through: no stacked glass, no lighter bands. */
:root[data-theme='image'] :is(.topbar, .rail, .columns, .detail-page) {
  --surface: transparent;
}

:root[data-theme='image'] .column {
  background: transparent;
}

:root[data-theme='image'] :is(.column-header, .dialog-header, .thread-reply) {
  background: transparent;
}

/* Sticky bars sit over scrolling content: nearly opaque so text never ghosts through. */
:root[data-theme='image'] .detail-page .tabs {
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

:root[data-theme='image'] .media-view-nav {
  background: var(--glass-strong);
}

:root[data-theme='image'] .theme-swatch--image span {
  background: var(--ctp-surface2);
}

/* Reduced transparency (system setting) or high contrast: solid panels, same colours. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme='image'] {
    --glass: var(--ctp-base);
    --glass-strong: var(--ctp-base);
    --glass-blur: 0px;
  }
}

:root[data-theme='image'][data-high-contrast='on'] {
  --glass: var(--ctp-base);
  --glass-strong: var(--ctp-base);
  --glass-blur: 0px;
}

/* Scrollbar tracks would draw their own vertical band over the glass. */
:root[data-theme='image'] :is(.column-body, .dialog-body, .detail-page *) {
  scrollbar-color: color-mix(in srgb, var(--ctp-text) 30%, transparent) transparent;
}