/* Themes. Each is a block of variables on [data-theme-name], so it applies to
   <html> and equally to a preview tile in the theme picker. The list, which is
   light and which dark, and the defaults are in public/js/theme.js.

   A theme sets at least: --bg --panel --card --text --muted --line --accent
   --accent-text --danger --soon, and color-scheme. Optional: --font,
   --bg-pattern, --card-shadow, --radius, and rules of its own below it. */

/* ================================================================ light */

[data-theme-name="classic"] {
    --bg: #f4f5f7; --panel: #ebecf0; --card: #fff;
    --text: #1f2328; --muted: #6b7280; --line: #d0d4da;
    --accent: #2563eb; --accent-text: #fff;
    --danger: #c42b1c; --soon: #b45309;
    color-scheme: light;
}

/* The icon's colours: cream, coral and a blush in the corner. */
[data-theme-name="peach"] {
    --bg: #fff6f0; --panel: #ffe9dc; --card: #fff;
    --text: #3b2626; --muted: #8a6a64; --line: #f2d0c2;
    --accent: #f0457a; --accent-text: #fff;
    --danger: #c81e45; --soon: #c2410c;
    --bg-pattern: radial-gradient(circle at 100% 0, #ffd6e4 0, transparent 45%),
                  radial-gradient(circle at 0 100%, #ffe1c7 0, transparent 40%);
    --card-shadow: 0 1px 3px rgb(240 69 122 / .12);
    color-scheme: light;
}

[data-theme-name="mint"] {
    --bg: #eefaf4; --panel: #dbf3e8; --card: #fff;
    --text: #12322a; --muted: #5b7a70; --line: #c2e5d6;
    --accent: #0e9b74; --accent-text: #fff;
    --danger: #c53030; --soon: #b7791f;
    --card-shadow: 0 1px 2px rgb(14 155 116 / .12);
    color-scheme: light;
}

[data-theme-name="lavender"] {
    --bg: #f6f4ff; --panel: #ebe6ff; --card: #fff;
    --text: #2a2350; --muted: #6f6a92; --line: #dad3fb;
    --accent: #7c5cff; --accent-text: #fff;
    --danger: #c53060; --soon: #b45309;
    --bg-pattern: linear-gradient(160deg, #f1ecff 0, #fdf2ff 100%);
    --card-shadow: 0 2px 6px rgb(124 92 255 / .1);
    color-scheme: light;
}

/* Sunny, with the faintest stripes. */
[data-theme-name="lemonade"] {
    --bg: #fffbe8; --panel: #fff2b3; --card: #fffef8;
    --text: #3a3200; --muted: #7d7240; --line: #efd97a;
    --accent: #f2b705; --accent-text: #2b2300;
    --danger: #c0392b; --soon: #b35c00;
    --bg-pattern: repeating-linear-gradient(-45deg, rgb(255 230 120 / .25) 0 14px, transparent 14px 28px);
    color-scheme: light;
}

/* A notebook: serif, cream paper, ruled lines, rust ink. */
[data-theme-name="paper"] {
    --bg: #f4eddd; --panel: #ebe1c9; --card: #fffdf6;
    --text: #2e2a24; --muted: #7a7062; --line: #d8cbae;
    --accent: #9a3b1b; --accent-text: #fffdf6;
    --danger: #a4161a; --soon: #8a5a00;
    --font: Charter, "Iowan Old Style", Georgia, Cambria, serif;
    --bg-pattern: repeating-linear-gradient(transparent 0 27px, rgb(120 150 200 / .18) 27px 28px);
    --card-shadow: 1px 2px 0 rgb(80 60 30 / .12);
    color-scheme: light;
}
[data-theme-name="paper"] .todo { border-radius: 2px; }

/* Pink, round and dotted. */
[data-theme-name="bubblegum"] {
    --bg: #ffe6f2; --panel: #ffd0e7; --card: #fff;
    --text: #4a1036; --muted: #9a4f7d; --line: #ffb0d5;
    --accent: #ff2e93; --accent-text: #fff;
    --danger: #d0103a; --soon: #c2410c;
    --radius: 18px;
    --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
    --bg-pattern: radial-gradient(rgb(255 46 147 / .12) 2.5px, transparent 3px) 0 0 / 22px 22px;
    --card-shadow: 0 3px 0 rgb(255 46 147 / .18);
    color-scheme: light;
}
[data-theme-name="bubblegum"] .todo { border-radius: 14px; }
[data-theme-name="bubblegum"] button:not(.swatch), [data-theme-name="bubblegum"] input { border-radius: 999px; }

/* 1995: teal desktop, grey bevels, a navy title bar. */
[data-theme-name="win95"] {
    --bg: #008080; --panel: #c0c0c0; --card: #c0c0c0;
    --text: #000; --muted: #404040; --line: #808080;
    --accent: #000080; --accent-text: #fff;
    --danger: #a00000; --soon: #806000;
    --radius: 0;
    --font: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, sans-serif;
    color-scheme: light;
}
[data-theme-name="win95"] .topbar,
[data-theme-name="win95"] .win95-bar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; border: 0; }
[data-theme-name="win95"] .topbar .space-switch:hover { background: rgb(255 255 255 / .15); }
[data-theme-name="win95"] .topbar .chevron, [data-theme-name="win95"] .topbar .menu-button,
[data-theme-name="win95"] .topbar .sync-status { color: #fff; }
[data-theme-name="win95"] .column,
[data-theme-name="win95"] .todo,
[data-theme-name="win95"] button:not(.swatch),
[data-theme-name="win95"] .menu-panel,
[data-theme-name="win95"] .dialog {
    border: 2px solid; border-color: #fff #404040 #404040 #fff; border-radius: 0; box-shadow: none;
}
[data-theme-name="win95"] input, [data-theme-name="win95"] textarea, [data-theme-name="win95"] select {
    border: 2px solid; border-color: #404040 #fff #fff #404040; border-radius: 0; background: #fff;
}
[data-theme-name="win95"] button:active { border-color: #404040 #fff #fff #404040; }
[data-theme-name="win95"] .check { border-radius: 0; background: #fff; border: 2px solid; border-color: #404040 #fff #fff #404040; color: #000; }
[data-theme-name="win95"] .todo.done .check, [data-theme-name="win95"] .todo.flash .check { background: #fff; color: #000; }

/* ================================================================= dark */

[data-theme-name="midnight"] {
    --bg: #16181c; --panel: #1f2228; --card: #2a2e35;
    --text: #e6e8eb; --muted: #9aa1ab; --line: #3a3f47;
    --accent: #5b8def; --accent-text: #fff;
    --danger: #f07167; --soon: #fbbf24;
    color-scheme: dark;
}

/* The icon after sunset: violet, with the pink still in the sky. */
[data-theme-name="dusk"] {
    --bg: #1a1130; --panel: #251940; --card: #30224f;
    --text: #f4ebff; --muted: #b4a4d2; --line: #46356c;
    --accent: #ff5c8d; --accent-text: #fff;
    --danger: #ff6b6b; --soon: #ffb35c;
    --bg-pattern: radial-gradient(ellipse at 100% 0, rgb(255 92 141 / .22) 0, transparent 55%),
                  radial-gradient(ellipse at 0 100%, rgb(255 138 61 / .14) 0, transparent 50%);
    --card-shadow: 0 2px 10px rgb(0 0 0 / .25);
    color-scheme: dark;
}

[data-theme-name="forest"] {
    --bg: #0f1a14; --panel: #15251c; --card: #1c3125;
    --text: #e3f1e6; --muted: #93b09c; --line: #2c4636;
    --accent: #f5a524; --accent-text: #1a1300;
    --danger: #ff7b6b; --soon: #f5d061;
    --bg-pattern: radial-gradient(ellipse at 50% -20%, rgb(80 160 100 / .18) 0, transparent 60%);
    color-scheme: dark;
}

[data-theme-name="ocean"] {
    --bg: #07182a; --panel: #0c2338; --card: #112f4a;
    --text: #e2f3ff; --muted: #8fb3cc; --line: #1d4664;
    --accent: #2dd4bf; --accent-text: #032420;
    --danger: #fb7185; --soon: #fcd34d;
    --bg-pattern: radial-gradient(ellipse at 50% 120%, rgb(45 212 191 / .16) 0, transparent 60%),
                  linear-gradient(#07182a, #04101e);
    color-scheme: dark;
}

/* Green phosphor on black, scanlines and all. */
[data-theme-name="terminal"] {
    --bg: #000; --panel: #020d02; --card: #031603;
    --text: #39ff6a; --muted: #1ea546; --line: #0d5220;
    --accent: #39ff6a; --accent-text: #000;
    --danger: #ff5555; --soon: #f1fa8c;
    --radius: 0;
    --font: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    color-scheme: dark;
}
[data-theme-name="terminal"] h1, [data-theme-name="terminal"] h2, [data-theme-name="terminal"] h3 { text-shadow: 0 0 6px rgb(57 255 106 / .6); }
[data-theme-name="terminal"] .todo, [data-theme-name="terminal"] .column, [data-theme-name="terminal"] button { border-radius: 0; }
[data-theme-name="terminal"] .check { border-radius: 0; }
:root[data-theme-name="terminal"] body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
    background: repeating-linear-gradient(rgb(0 0 0 / .22) 0 1px, transparent 1px 3px);
}

/* Neon on purple, over a sunset and a grid to the horizon. */
[data-theme-name="synthwave"] {
    --bg: #12002b; --panel: #1d0540; --card: #290a55;
    --text: #fde9ff; --muted: #c49be6; --line: #4f1b88;
    --accent: #ff2bd6; --accent-text: #fff;
    --danger: #ff4d6d; --soon: #00e5ff;
    --bg-pattern: linear-gradient(transparent 0 60%, rgb(255 43 214 / .10) 80%, rgb(255 140 0 / .12)),
                  repeating-linear-gradient(90deg, rgb(0 229 255 / .07) 0 1px, transparent 1px 48px),
                  repeating-linear-gradient(rgb(0 229 255 / .05) 0 1px, transparent 1px 48px);
    --card-shadow: 0 0 0 1px rgb(255 43 214 / .25), 0 0 14px rgb(255 43 214 / .15);
    color-scheme: dark;
}
[data-theme-name="synthwave"] h1 { text-shadow: 0 0 8px #ff2bd6, 0 0 22px rgb(255 43 214 / .5); }
[data-theme-name="synthwave"] .check { box-shadow: 0 0 8px rgb(0 229 255 / .5); border-color: #00e5ff; }

[data-theme-name="coffee"] {
    --bg: #1e1511; --panel: #291c16; --card: #35261f;
    --text: #f3e6d8; --muted: #bfa48c; --line: #4c392e;
    --accent: #d9a066; --accent-text: #1e1511;
    --danger: #f28b82; --soon: #f0c36d;
    --font: Charter, "Iowan Old Style", Georgia, serif;
    --card-shadow: 0 2px 6px rgb(0 0 0 / .3);
    color-scheme: dark;
}

/* An architect's drawing: white lines on a blue grid. */
[data-theme-name="blueprint"] {
    --bg: #0b3a6e; --panel: rgb(255 255 255 / .05); --card: #0e467f;
    --text: #eaf4ff; --muted: #a2c6ea; --line: #6a9bd0;
    --accent: #fff; --accent-text: #0b3a6e;
    --danger: #ffb4a8; --soon: #ffe08a;
    --radius: 2px;
    --font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --bg-pattern: linear-gradient(rgb(255 255 255 / .09) 1px, transparent 1px) 0 0 / 24px 24px,
                  linear-gradient(90deg, rgb(255 255 255 / .09) 1px, transparent 1px) 0 0 / 24px 24px;
    color-scheme: dark;
}
[data-theme-name="blueprint"] .column { border: 1px dashed var(--line); }
[data-theme-name="blueprint"] .todo { border-style: solid; border-color: var(--line); }