/*
 * Theme tokens.
 *
 * Every theme is a block of CSS custom properties scoped to [data-theme="id"].
 * The app sets data-theme on <html>; the menu's theme previews set it on small
 * elements so each swatch renders with its own palette.
 *
 * To add a theme: copy a block, change the values, add { id, name } to
 * THEMES in js/themes.js. Nothing else needs to change.
 *
 * Token reference
 *   --bg / --bg-image     page background colour and optional gradient/texture
 *   --surface             cards, dropdowns, output box, dialogs
 *   --field               text inputs inside cards
 *   --border              hairlines
 *   --text / --muted      body text and secondary text
 *   --accent / --accent-2 button + highlight gradient (fills)
 *   --on-accent           text drawn on top of those fills
 *   --accent-text(-2)     accent colours used as text on --bg (title gradient)
 *   --ring                focus ring
 *   --success/--on-success, --warning, --danger   status colours
 *   --shadow / --glow     card shadow and primary-button glow
 *   --radius / --radius-lg  control and card corner radius
 *   --font / --font-mono  typefaces
 *   --title-transform / --title-spacing   heading flourishes
 */

:root,
[data-theme="midnight"] {
    --bg: #0f172a;
    --bg-image: none;
    --surface: #1e293b;
    --field: #0f172a;
    --border: #334155;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --accent: #9333ea;
    --accent-2: #2563eb;
    --on-accent: #ffffff;
    --accent-text: #c084fc;
    --accent-text-2: #60a5fa;
    --ring: #a855f7;
    --success: #15803d;
    --on-success: #ffffff;
    --warning: #fbbf24;
    --danger: #f87171;
    --shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
    --glow: 0 10px 24px -10px rgba(147, 51, 234, 0.55);
    --radius: 12px;
    --radius-lg: 16px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, Menlo, monospace;
    --title-transform: none;
    --title-spacing: normal;
    color-scheme: dark;
}

[data-theme="cyberpunk"] {
    --bg: #0a0a12;
    --bg-image:
        radial-gradient(circle at 0% 0%, rgba(255, 42, 109, 0.14), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(5, 217, 232, 0.12), transparent 45%);
    --surface: #14131f;
    --field: #0d0c16;
    --border: #3a2f5c;
    --text: #f4f1ff;
    --muted: #a39dc8;
    --accent: #fcee0a;
    --accent-2: #ff2a6d;
    --on-accent: #0a0a12;
    --accent-text: #fcee0a;
    --accent-text-2: #05d9e8;
    --ring: #05d9e8;
    --success: #00ff9c;
    --on-success: #04130d;
    --warning: #fcee0a;
    --danger: #ff5c8a;
    --shadow: 0 0 0 1px rgba(5, 217, 232, 0.16), 0 14px 30px -14px rgba(0, 0, 0, 0.85);
    --glow: 0 0 22px rgba(255, 42, 109, 0.5);
    --radius: 4px;
    --radius-lg: 6px;
    --title-transform: uppercase;
    --title-spacing: 0.12em;
    color-scheme: dark;
}

[data-theme="retrowave"] {
    --bg: #1a0b2e;
    --bg-image: linear-gradient(180deg, #1a0b2e 0%, #2b0f54 55%, #4a1670 100%);
    --surface: #2a1450;
    --field: #1a0b2e;
    --border: #6b2fa0;
    --text: #fdf2ff;
    --muted: #c9a8ee;
    --accent: #ff3cac;
    --accent-2: #ff9e3d;
    --on-accent: #1a0b2e;
    --accent-text: #ff6ec7;
    --accent-text-2: #2de2e6;
    --ring: #2de2e6;
    --success: #2de2e6;
    --on-success: #1a0b2e;
    --warning: #ffd166;
    --danger: #ff6b8b;
    --shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.65);
    --glow: 0 0 26px rgba(255, 60, 172, 0.5);
    --radius: 14px;
    --radius-lg: 18px;
    --title-transform: uppercase;
    --title-spacing: 0.08em;
    color-scheme: dark;
}

[data-theme="icy"] {
    --bg: #e8f4ff;
    --bg-image: linear-gradient(180deg, #f4faff 0%, #dbeefd 100%);
    --surface: #ffffff;
    --field: #f1f8ff;
    --border: #b5d5ee;
    --text: #0b2540;
    --muted: #446784;
    --accent: #0369a1;
    --accent-2: #0e7490;
    --on-accent: #ffffff;
    --accent-text: #0369a1;
    --accent-text-2: #0e7490;
    --ring: #0ea5e9;
    --success: #0f766e;
    --on-success: #ffffff;
    --warning: #b45309;
    --danger: #b91c1c;
    --shadow: 0 12px 26px -14px rgba(3, 105, 161, 0.4);
    --glow: 0 10px 22px -10px rgba(3, 105, 161, 0.55);
    --radius: 12px;
    --radius-lg: 16px;
    color-scheme: light;
}

[data-theme="forest"] {
    --bg: #0b1a12;
    --bg-image: linear-gradient(180deg, #0b1a12 0%, #0f2a1c 100%);
    --surface: #12291c;
    --field: #0b1a12;
    --border: #25523a;
    --text: #ecfdf3;
    --muted: #9bc4ab;
    --accent: #4ade80;
    --accent-2: #d4a35a;
    --on-accent: #052e16;
    --accent-text: #86efac;
    --accent-text-2: #e0b872;
    --ring: #4ade80;
    --success: #4ade80;
    --on-success: #052e16;
    --warning: #fbbf24;
    --danger: #fb7185;
    --shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.6);
    --glow: 0 10px 24px -10px rgba(74, 222, 128, 0.45);
    --radius: 12px;
    --radius-lg: 16px;
    color-scheme: dark;
}

[data-theme="sunset"] {
    --bg: #2a1530;
    --bg-image: linear-gradient(180deg, #2a1530 0%, #4a1f3d 65%, #6b2a3d 100%);
    --surface: #3b1d42;
    --field: #2a1530;
    --border: #74406a;
    --text: #fff5ee;
    --muted: #e3bdc6;
    --accent: #ff6b6b;
    --accent-2: #ffb347;
    --on-accent: #2a1530;
    --accent-text: #ff8e72;
    --accent-text-2: #ffc56b;
    --ring: #ffb347;
    --success: #5fd38d;
    --on-success: #0d2616;
    --warning: #ffd166;
    --danger: #ff8a8a;
    --shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
    --glow: 0 10px 26px -10px rgba(255, 107, 107, 0.55);
    --radius: 14px;
    --radius-lg: 18px;
    color-scheme: dark;
}

[data-theme="terminal"] {
    --bg: #000000;
    --bg-image: repeating-linear-gradient(0deg, rgba(61, 255, 122, 0.035) 0 1px, transparent 1px 3px);
    --surface: #04120a;
    --field: #000000;
    --border: #14693a;
    --text: #3dff7a;
    --muted: #22b957;
    --accent: #3dff7a;
    --accent-2: #1fb24f;
    --on-accent: #001a08;
    --accent-text: #3dff7a;
    --accent-text-2: #9dffbd;
    --ring: #3dff7a;
    --success: #3dff7a;
    --on-success: #001a08;
    --warning: #ffd24a;
    --danger: #ff6b6b;
    --shadow: 0 0 0 1px rgba(61, 255, 122, 0.12);
    --glow: 0 0 14px rgba(61, 255, 122, 0.35);
    --radius: 2px;
    --radius-lg: 3px;
    --font: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    --title-transform: uppercase;
    --title-spacing: 0.1em;
    color-scheme: dark;
}

[data-theme="dracula"] {
    --bg: #282a36;
    --bg-image: none;
    --surface: #343746;
    --field: #21222c;
    --border: #4d5170;
    --text: #f8f8f2;
    --muted: #a9b2da;
    --accent: #bd93f9;
    --accent-2: #ff79c6;
    --on-accent: #21222c;
    --accent-text: #bd93f9;
    --accent-text-2: #ff79c6;
    --ring: #8be9fd;
    --success: #50fa7b;
    --on-success: #21222c;
    --warning: #f1fa8c;
    --danger: #ff5555;
    --shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
    --glow: 0 10px 24px -10px rgba(189, 147, 249, 0.55);
    --radius: 10px;
    --radius-lg: 14px;
    color-scheme: dark;
}

[data-theme="paper"] {
    --bg: #f5f0e6;
    --bg-image: none;
    --surface: #fffdf8;
    --field: #faf6ec;
    --border: #d8cdb6;
    --text: #1f1b16;
    --muted: #675e51;
    --accent: #2b2620;
    --accent-2: #7c2d12;
    --on-accent: #faf6ec;
    --accent-text: #7c2d12;
    --accent-text-2: #2b2620;
    --ring: #7c2d12;
    --success: #166534;
    --on-success: #ffffff;
    --warning: #92400e;
    --danger: #b91c1c;
    --shadow: 0 10px 22px -14px rgba(60, 40, 10, 0.4);
    --glow: 0 6px 16px -8px rgba(60, 40, 10, 0.5);
    --radius: 8px;
    --radius-lg: 10px;
    --font: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
    color-scheme: light;
}