/* Themes: each one only sets variables. Components never use raw colours. */

.shani,
.shani[data-theme="daylight"] {
    color-scheme: light;
    --bg: #f6f3ee;
    --surface: #fffdf9;
    --surface-2: #efebe4;
    --ink: #1d1b18;
    --ink-muted: #6f6a62;
    --line: #e3ddd3;
    --accent: #c4552d;
    --face: #fffdf9;
    --hand: #1d1b18;
    --second: #c4552d;
    --shadow: 0 1px 2px rgb(40 30 20 / 6%), 0 8px 24px rgb(40 30 20 / 6%);
    --glow: none;
    --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, monospace;
}

.shani[data-theme="midnight"] {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #171a21;
    --surface-2: #1e222b;
    --ink: #e8e6e1;
    --ink-muted: #8b8f98;
    --line: #2a2e38;
    --accent: #e0b25c;
    --face: #151820;
    --hand: #e8e6e1;
    --second: #e0b25c;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 30%);
}

@media (prefers-color-scheme: dark) {
    .shani[data-theme="auto"] {
        color-scheme: dark;
        --bg: #0f1115;
        --surface: #171a21;
        --surface-2: #1e222b;
        --ink: #e8e6e1;
        --ink-muted: #8b8f98;
        --line: #2a2e38;
        --accent: #e0b25c;
        --face: #151820;
        --hand: #e8e6e1;
        --second: #e0b25c;
        --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 30%);
    }
}

.shani[data-theme="fjord"] {
    color-scheme: dark;
    --bg: #2e3440;
    --surface: #3b4252;
    --surface-2: #434c5e;
    --ink: #eceff4;
    --ink-muted: #a7b1c2;
    --line: #4c566a;
    --accent: #88c0d0;
    --face: #353c4a;
    --hand: #eceff4;
    --second: #bf616a;
    --shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 8px 24px rgb(0 0 0 / 20%);
}

.shani[data-theme="sepia"] {
    color-scheme: light;
    --bg: #efe4d0;
    --surface: #f7eedd;
    --surface-2: #e7d9c0;
    --ink: #3b2f22;
    --ink-muted: #84705a;
    --line: #dccbb0;
    --accent: #a4412c;
    --face: #f7eedd;
    --hand: #3b2f22;
    --second: #a4412c;
    --font-display: Georgia, "Times New Roman", serif;
}

/* ---------- From the shop (unlocked with achievement points) ---------- */

.shani[data-theme="sakura"] {
    color-scheme: light;
    --bg: #fdf2f4;
    --surface: #fffafb;
    --surface-2: #f8e3e8;
    --ink: #3a2328;
    --ink-muted: #8a6670;
    --line: #f0d3da;
    --accent: #d6567a;
    --face: #fffafb;
    --hand: #3a2328;
    --second: #d6567a;
    --shadow: 0 1px 2px rgb(120 40 60 / 6%), 0 8px 24px rgb(120 40 60 / 8%);
}

.shani[data-theme="ocean"] {
    color-scheme: dark;
    --bg: #0b1a26;
    --surface: #10263a;
    --surface-2: #153049;
    --ink: #e3f1fb;
    --ink-muted: #84a6bf;
    --line: #1f3c57;
    --accent: #3fc1e0;
    --face: #0f2335;
    --hand: #e3f1fb;
    --second: #ff8a65;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 10 20 / 40%);
}

.shani[data-theme="forest"] {
    color-scheme: dark;
    --bg: #121a14;
    --surface: #18231b;
    --surface-2: #1f2d23;
    --ink: #e4ecdf;
    --ink-muted: #8ea38f;
    --line: #2a3b2e;
    --accent: #8fc26a;
    --face: #16201a;
    --hand: #e4ecdf;
    --second: #d9a441;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 30%);
}

.shani[data-theme="coffee"] {
    color-scheme: dark;
    --bg: #1c1512;
    --surface: #261d18;
    --surface-2: #30251f;
    --ink: #f1e6d8;
    --ink-muted: #a8927e;
    --line: #3b2e26;
    --accent: #d39a5c;
    --face: #231b16;
    --hand: #f1e6d8;
    --second: #d39a5c;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(20 10 0 / 35%);
    --font-display: Georgia, "Times New Roman", serif;
}

.shani[data-theme="dracula"] {
    color-scheme: dark;
    --bg: #282a36;
    --surface: #2f3241;
    --surface-2: #383a4a;
    --ink: #f8f8f2;
    --ink-muted: #a3a7c0;
    --line: #44475a;
    --accent: #bd93f9;
    --face: #2c2e3b;
    --hand: #f8f8f2;
    --second: #ff79c6;
    --shadow: 0 1px 2px rgb(0 0 0 / 25%), 0 8px 24px rgb(0 0 0 / 25%);
}

.shani[data-theme="neon"] {
    color-scheme: dark;
    --bg: #0a0612;
    --surface: #120b20;
    --surface-2: #1a102d;
    --ink: #f2e9ff;
    --ink-muted: #9b87c4;
    --line: #2c1c4a;
    --accent: #ff2bd6;
    --face: #100a1c;
    --hand: #f2e9ff;
    --second: #19f0ff;
    --shadow: 0 0 0 1px #2c1c4a, 0 8px 28px rgb(255 43 214 / 12%);
    --glow: 0 0 8px rgb(255 43 214 / 45%);
}

.shani[data-theme="gold"] {
    color-scheme: dark;
    --bg: #0e0c08;
    --surface: #17140d;
    --surface-2: #211c12;
    --ink: #f5ecd6;
    --ink-muted: #b3a27c;
    --line: #3a3020;
    --accent: #e7c25b;
    --face: #14110b;
    --hand: #f5ecd6;
    --second: #e7c25b;
    --shadow: 0 0 0 1px #3a3020, 0 8px 28px rgb(231 194 91 / 10%);
    --glow: 0 0 6px rgb(231 194 91 / 35%);
    --font-display: Georgia, "Times New Roman", serif;
}

.shani[data-theme="phosphor"] {
    color-scheme: dark;
    --bg: #050805;
    --surface: #0a110a;
    --surface-2: #0f1a10;
    --ink: #7dff8a;
    --ink-muted: #3f9a4a;
    --line: #17361b;
    --accent: #b8ffbf;
    --face: #070d07;
    --hand: #7dff8a;
    --second: #b8ffbf;
    --shadow: 0 0 0 1px #17361b;
    --glow: 0 0 6px rgb(125 255 138 / 55%);
    --font-ui: var(--font-mono);
    --font-display: var(--font-mono);
}

/* ---------- More free themes ---------- */

.shani[data-theme="graphite"] {
    color-scheme: dark;
    --bg: #18191b;
    --surface: #212225;
    --surface-2: #2a2b2f;
    --ink: #ececec;
    --ink-muted: #9a9ca1;
    --line: #34363a;
    --accent: #a0a7b4;
    --face: #1e1f22;
    --hand: #ececec;
    --second: #e0805c;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 30%);
}

.shani[data-theme="paper"] {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #f7f8fa;
    --surface-2: #eef0f4;
    --ink: #16181d;
    --ink-muted: #5f6672;
    --line: #e2e5eb;
    --accent: #2f6fed;
    --face: #ffffff;
    --hand: #16181d;
    --second: #2f6fed;
    --shadow: 0 1px 2px rgb(20 30 60 / 6%), 0 8px 24px rgb(20 30 60 / 6%);
}

.shani[data-theme="solarized"] {
    color-scheme: light;
    --bg: #fdf6e3;
    --surface: #fffbee;
    --surface-2: #eee8d5;
    --ink: #073642;
    --ink-muted: #657b83;
    --line: #e4dcc3;
    --accent: #268bd2;
    --face: #fffbee;
    --hand: #073642;
    --second: #dc322f;
}

/* As readable as it gets: pure black and white, a strong yellow, every edge drawn. */
.shani[data-theme="contrast"] {
    color-scheme: dark;
    --bg: #000000;
    --surface: #0a0a0a;
    --surface-2: #1a1a1a;
    --ink: #ffffff;
    --ink-muted: #d6d6d6;
    --line: #8a8a8a;
    --accent: #ffd400;
    --face: #000000;
    --hand: #ffffff;
    --second: #ffd400;
    --shadow: 0 0 0 1px #8a8a8a;
}

/* ---------- More from the shop ---------- */

.shani[data-theme="matcha"] {
    color-scheme: light;
    --bg: #f1f4ea;
    --surface: #f9fbf4;
    --surface-2: #e3e9d6;
    --ink: #24301c;
    --ink-muted: #687659;
    --line: #d5ddc4;
    --accent: #5f8f3a;
    --face: #f9fbf4;
    --hand: #24301c;
    --second: #c06b3e;
    --shadow: 0 1px 2px rgb(40 60 20 / 6%), 0 8px 24px rgb(40 60 20 / 7%);
}

.shani[data-theme="lavender"] {
    color-scheme: light;
    --bg: #f5f2fb;
    --surface: #fcfbff;
    --surface-2: #e9e3f6;
    --ink: #2a2338;
    --ink-muted: #73698a;
    --line: #ddd5ee;
    --accent: #7c5cd6;
    --face: #fcfbff;
    --hand: #2a2338;
    --second: #d65c9b;
    --shadow: 0 1px 2px rgb(60 40 120 / 6%), 0 8px 24px rgb(60 40 120 / 8%);
}

.shani[data-theme="arctic"] {
    color-scheme: light;
    --bg: #eef5fa;
    --surface: #f9fcfe;
    --surface-2: #deebf4;
    --ink: #14283a;
    --ink-muted: #5a7389;
    --line: #cfe0ec;
    --accent: #1f8fc9;
    --face: #f9fcfe;
    --hand: #14283a;
    --second: #e2574c;
    --shadow: 0 1px 2px rgb(20 60 100 / 6%), 0 8px 24px rgb(20 60 100 / 8%);
}

.shani[data-theme="sunset"] {
    color-scheme: dark;
    --bg: #1d1222;
    --surface: #28182d;
    --surface-2: #331f38;
    --ink: #fbe9e2;
    --ink-muted: #b996a6;
    --line: #432a48;
    --accent: #ff8a4c;
    --face: #241628;
    --hand: #fbe9e2;
    --second: #ff4f8b;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 28px rgb(255 120 80 / 10%);
}

/* Shani's own colours: the red of the S running into blonde. */
.shani[data-theme="crimson"] {
    color-scheme: dark;
    --bg: #140b0d;
    --surface: #1e1114;
    --surface-2: #29171b;
    --ink: #fbeee6;
    --ink-muted: #b8968f;
    --line: #3a2025;
    --accent: #ff3b4e;
    --face: #1a0f11;
    --hand: #fbeee6;
    --second: #ffd98a;
    --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 28px rgb(255 59 78 / 10%);
    --glow: 0 0 6px rgb(255 59 78 / 40%);
}

.shani[data-theme="synthwave"] {
    color-scheme: dark;
    --bg: #1a1033;
    --surface: #241645;
    --surface-2: #2e1d55;
    --ink: #fdf0ff;
    --ink-muted: #a993d1;
    --line: #3d2970;
    --accent: #ff7edb;
    --face: #20143d;
    --hand: #fdf0ff;
    --second: #36f9f6;
    --shadow: 0 0 0 1px #3d2970, 0 8px 28px rgb(255 126 219 / 14%);
    --glow: 0 0 8px rgb(54 249 246 / 40%);
}

.shani[data-theme="aurora"] {
    color-scheme: dark;
    --bg: #07161a;
    --surface: #0c2025;
    --surface-2: #112a30;
    --ink: #e2fbf6;
    --ink-muted: #7fb3aa;
    --line: #1a3a40;
    --accent: #3ef0b4;
    --face: #0a1c20;
    --hand: #e2fbf6;
    --second: #a57cff;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 28px rgb(62 240 180 / 10%);
    --glow: 0 0 7px rgb(62 240 180 / 40%);
}

.shani[data-theme="royal"] {
    color-scheme: dark;
    --bg: #0b1030;
    --surface: #121940;
    --surface-2: #19224f;
    --ink: #eef0ff;
    --ink-muted: #9aa3d6;
    --line: #26306a;
    --accent: #f4c95d;
    --face: #0f153a;
    --hand: #eef0ff;
    --second: #f4c95d;
    --shadow: 0 0 0 1px #26306a, 0 8px 28px rgb(244 201 93 / 10%);
    --glow: 0 0 6px rgb(244 201 93 / 35%);
    --font-display: Georgia, "Times New Roman", serif;
}

/* ---------- Earned in Hoshimura (only through game achievements, never sold) ---------- */

/* Momiji: the hills in autumn, red maple on warm paper (the town). */
.shani[data-theme="momiji"] {
    color-scheme: light;
    --bg: #f7efe4;
    --surface: #fffaf3;
    --surface-2: #f1e2d0;
    --ink: #3b2219;
    --ink-muted: #8a6352;
    --line: #e8d2bb;
    --accent: #c2412d;
    --face: #fffaf3;
    --hand: #3b2219;
    --second: #d9922e;
    --shadow: 0 1px 2px rgb(110 40 20 / 7%), 0 8px 24px rgb(110 40 20 / 9%);
}

/* Kitsune: fox fire in the night forest (mastery 99). */
.shani[data-theme="kitsune"] {
    color-scheme: dark;
    --bg: #110d1a;
    --surface: #1a1427;
    --surface-2: #231b34;
    --ink: #f3ecff;
    --ink-muted: #a597c2;
    --line: #2f2546;
    --accent: #ff9a3d;
    --face: #171122;
    --hand: #f3ecff;
    --second: #7fd4ff;
    --shadow: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 26px rgb(255 154 61 / 10%);
    --glow: 0 0 8px rgb(255 154 61 / 40%);
}

/* Starlit bay: Hoshimura at night, the castle's lanterns over the water (the castle town). */
.shani[data-theme="starlit"] {
    color-scheme: dark;
    --bg: #07121f;
    --surface: #0d1b2d;
    --surface-2: #13243a;
    --ink: #eaf2ff;
    --ink-muted: #8ea5c4;
    --line: #1e3350;
    --accent: #ffd37a;
    --face: #0b1828;
    --hand: #eaf2ff;
    --second: #ff7aa8;
    --shadow: 0 0 0 1px #1e3350, 0 8px 28px rgb(255 211 122 / 9%);
    --glow: 0 0 7px rgb(255 211 122 / 38%);
    --font-display: Georgia, "Times New Roman", serif;
}