/* Palettes.
 *
 * A palette names a colour family; the `light` class on <html> picks the dark
 * or the light half of it. The two are independent, so every palette below is
 * written twice and defines the complete variable set from styles.css — a
 * missing variable would silently fall back to Nocturne and produce a colour
 * that belongs to no palette at all.
 *
 * The dark half is matched with `:not(.light)` so both halves have the same
 * specificity as each other and both outrank `:root.light` in styles.css,
 * whatever order the stylesheets happen to load in.
 */

/* --- Nocturne ------------------------------------------------------------- */

:root:not(.light)[data-palette="original"] {
  --bg: #090d18;
  --surface: rgba(18, 24, 42, 0.88);
  --surface-2: #151c30;
  --surface-3: #1c2540;
  --text: #f5f7ff;
  --muted: #94a0b8;
  --faint: #59647b;
  --line: rgba(158, 174, 210, 0.16);
  --grid: #71809e;
  --accent: #8b7cff;
  --accent-2: #4ee0bd;
  --danger: #ff6f91;
  --success: #35e0aa;
  --peer-bg: #283052;
  --axis-bg: #354176;
  --box-bg: #252c4c;
  --same-bg: #087c6a;
  --same-text: #ffffff;
  --same-number: #64ffd5;
  --selected-bg: #6c55e8;
  --pattern: #8b7cff;
  --link: #4ee0bd;
  --on-accent: #ffffff;
  --on-success: #041b15;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

:root.light[data-palette="original"] {
  --bg: #f4f2ed;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-2: #f8f7f3;
  --surface-3: #eeece6;
  --text: #171925;
  --muted: #676d7c;
  --faint: #9296a0;
  --line: rgba(32, 38, 57, 0.13);
  --grid: #5d6474;
  --accent: #6755da;
  --accent-2: #0b9b7b;
  --danger: #d73e64;
  --success: #078565;
  --peer-bg: #e7e2fa;
  --axis-bg: #cec4f7;
  --box-bg: #ebe8f8;
  --same-bg: #53cbae;
  --same-text: #092b24;
  --same-number: #007c61;
  --selected-bg: #8b73eb;
  --pattern: #7563ee;
  --link: #079879;
  --on-accent: #ffffff;
  --on-success: #041b15;
  --shadow: 0 30px 80px rgba(45, 42, 35, 0.13);
}

/* --- High Contrast -------------------------------------------------------- */

:root:not(.light)[data-palette="contrast"] {
  --bg: #000000;
  --surface: rgba(8, 8, 8, 0.94);
  --surface-2: #0e0e0e;
  --surface-3: #1a1a1a;
  --text: #ffffff;
  --muted: #dcdcdc;
  --faint: #a8a8a8;
  --line: rgba(255, 255, 255, 0.42);
  --grid: #ffffff;
  --accent: #ffd400;
  --accent-2: #00e5ff;
  --danger: #ff7a7a;
  --success: #3dff9e;
  --peer-bg: #242424;
  --axis-bg: #3c3c3c;
  --box-bg: #1b1b1b;
  --same-bg: #00584a;
  --same-text: #ffffff;
  --same-number: #5cffdb;
  --selected-bg: #4da3ff;
  --pattern: #ffd400;
  --link: #00e5ff;
  --on-accent: #000000;
  --on-success: #00140d;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
}

:root.light[data-palette="contrast"] {
  --bg: #ffffff;
  --surface: rgba(255, 255, 255, 0.97);
  --surface-2: #f4f4f4;
  --surface-3: #e8e8e8;
  --text: #000000;
  --muted: #2e2e2e;
  --faint: #545454;
  --line: rgba(0, 0, 0, 0.48);
  --grid: #000000;
  --accent: #0b3ecc;
  --accent-2: #006b5a;
  --danger: #c00018;
  --success: #34d98a;
  --peer-bg: #dfe6ff;
  --axis-bg: #bfcdfb;
  --box-bg: #ececec;
  --same-bg: #59d8b6;
  --same-text: #00231b;
  --same-number: #005844;
  --selected-bg: #0b3ecc;
  --pattern: #0b3ecc;
  --link: #17c4a5;
  --on-accent: #ffffff;
  --on-success: #00140d;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
}

/* --- Slate ---------------------------------------------------------------- */

:root:not(.light)[data-palette="slate"] {
  --bg: #0e1319;
  --surface: rgba(22, 29, 38, 0.88);
  --surface-2: #1a222c;
  --surface-3: #222c38;
  --text: #e9eef5;
  --muted: #9aa7b6;
  --faint: #67727f;
  --line: rgba(164, 181, 201, 0.16);
  --grid: #77869a;
  --accent: #5b8def;
  --accent-2: #4fd1c5;
  --danger: #f2686f;
  --success: #45d6a1;
  --peer-bg: #26313f;
  --axis-bg: #33425a;
  --box-bg: #212b38;
  --same-bg: #0e6b62;
  --same-text: #ffffff;
  --same-number: #6fe9d6;
  --selected-bg: #3f6fd8;
  --pattern: #5b8def;
  --link: #4fd1c5;
  --on-accent: #ffffff;
  --on-success: #04201a;
  --shadow: 0 30px 80px rgba(2, 6, 12, 0.45);
}

:root.light[data-palette="slate"] {
  --bg: #eef1f5;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-2: #f7f9fb;
  --surface-3: #e5e9f0;
  --text: #1a212b;
  --muted: #5c6673;
  --faint: #8b95a2;
  --line: rgba(26, 33, 43, 0.14);
  --grid: #5a6472;
  --accent: #2f62c4;
  --accent-2: #0e9384;
  --danger: #ce3b4e;
  --success: #43cfa0;
  --peer-bg: #dde5f3;
  --axis-bg: #c3d2ec;
  --box-bg: #e6eaf1;
  --same-bg: #5fd0bd;
  --same-text: #062724;
  --same-number: #06786a;
  --selected-bg: #3f6fd8;
  --pattern: #2f62c4;
  --link: #17b39f;
  --on-accent: #ffffff;
  --on-success: #04201a;
  --shadow: 0 30px 80px rgba(36, 47, 64, 0.14);
}

/* --- Indigo --------------------------------------------------------------- */

:root:not(.light)[data-palette="indigo"] {
  --bg: #0a0f2b;
  --surface: rgba(18, 26, 66, 0.88);
  --surface-2: #141d4a;
  --surface-3: #1c275e;
  --text: #eceffd;
  --muted: #97a2d6;
  --faint: #616ca4;
  --line: rgba(150, 164, 224, 0.18);
  --grid: #7b88c8;
  --accent: #5a6bff;
  --accent-2: #36c5f0;
  --danger: #ff5f87;
  --success: #2fd6c4;
  --peer-bg: #232f6e;
  --axis-bg: #31408f;
  --box-bg: #1e2963;
  --same-bg: #12657f;
  --same-text: #ffffff;
  --same-number: #63e6ff;
  --selected-bg: #4757e6;
  --pattern: #5a6bff;
  --link: #36c5f0;
  --on-accent: #ffffff;
  --on-success: #041a21;
  --shadow: 0 30px 80px rgba(3, 6, 28, 0.5);
}

:root.light[data-palette="indigo"] {
  --bg: #eef0fb;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-2: #f7f8ff;
  --surface-3: #e4e7fa;
  --text: #161a3c;
  --muted: #5d6494;
  --faint: #8f95bd;
  --line: rgba(30, 36, 86, 0.14);
  --grid: #5b63a0;
  --accent: #3a45d6;
  --accent-2: #0b86ad;
  --danger: #d32a5c;
  --success: #21b8a8;
  --peer-bg: #dfe3fb;
  --axis-bg: #c4cbf6;
  --box-bg: #e7eafb;
  --same-bg: #4ec6de;
  --same-text: #062b33;
  --same-number: #06697f;
  --selected-bg: #3a45d6;
  --pattern: #3a45d6;
  --link: #10a4c4;
  --on-accent: #ffffff;
  --on-success: #041a21;
  --shadow: 0 30px 80px rgba(24, 28, 74, 0.16);
}

/* --- Graphite ------------------------------------------------------------- */

:root:not(.light)[data-palette="graphite"] {
  --bg: #121212;
  --surface: rgba(29, 29, 29, 0.9);
  --surface-2: #1c1c1c;
  --surface-3: #272727;
  --text: #ededed;
  --muted: #a2a2a2;
  --faint: #6d6d6d;
  --line: rgba(255, 255, 255, 0.14);
  --grid: #7e7e7e;
  --accent: #b0742a;
  --accent-2: #6fb9a3;
  --danger: #c4504a;
  --success: #5fcf9b;
  --peer-bg: #282828;
  --axis-bg: #383838;
  --box-bg: #222222;
  --same-bg: #2f5f52;
  --same-text: #ffffff;
  --same-number: #8fe6c5;
  --selected-bg: #8f5c1d;
  --pattern: #b0742a;
  --link: #6fb9a3;
  --on-accent: #ffffff;
  --on-success: #052019;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

:root.light[data-palette="graphite"] {
  --bg: #f1f1f1;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-2: #fafafa;
  --surface-3: #e7e7e7;
  --text: #1d1d1d;
  --muted: #5e5e5e;
  --faint: #8d8d8d;
  --line: rgba(0, 0, 0, 0.13);
  --grid: #5a5a5a;
  --accent: #92591a;
  --accent-2: #14806b;
  --danger: #b53a35;
  --success: #4fc493;
  --peer-bg: #e3e3e3;
  --axis-bg: #d0d0d0;
  --box-bg: #ececec;
  --same-bg: #63cfae;
  --same-text: #06241d;
  --same-number: #0a7059;
  --selected-bg: #92591a;
  --pattern: #92591a;
  --link: #1fae91;
  --on-accent: #ffffff;
  --on-success: #052019;
  --shadow: 0 30px 80px rgba(40, 40, 40, 0.14);
}

/* --- Paper ---------------------------------------------------------------- */

:root:not(.light)[data-palette="paper"] {
  --bg: #14151a;
  --surface: rgba(26, 28, 34, 0.9);
  --surface-2: #1c1e25;
  --surface-3: #252830;
  --text: #f0f0ee;
  --muted: #a0a3ad;
  --faint: #6b6e78;
  --line: rgba(240, 240, 238, 0.14);
  --grid: #82868f;
  --accent: #4a82e8;
  --accent-2: #4fd6b2;
  --danger: #ef5f72;
  --success: #4ed7a6;
  --peer-bg: #262931;
  --axis-bg: #343947;
  --box-bg: #212429;
  --same-bg: #0f6a58;
  --same-text: #ffffff;
  --same-number: #6fecc9;
  --selected-bg: #3a6bd0;
  --pattern: #4a82e8;
  --link: #4fd6b2;
  --on-accent: #ffffff;
  --on-success: #04211a;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

:root.light[data-palette="paper"] {
  --bg: #fbfbf9;
  --surface: rgba(255, 255, 255, 0.95);
  --surface-2: #ffffff;
  --surface-3: #f1f0ec;
  --text: #1b1b1a;
  --muted: #5f5f5c;
  --faint: #90908b;
  --line: rgba(27, 27, 26, 0.14);
  --grid: #57574f;
  --accent: #1f5fd0;
  --accent-2: #0f8a6d;
  --danger: #c93a4a;
  --success: #3fc999;
  --peer-bg: #eceef5;
  --axis-bg: #d8dced;
  --box-bg: #f2f1ee;
  --same-bg: #64cfb0;
  --same-text: #06251e;
  --same-number: #06735a;
  --selected-bg: #1f5fd0;
  --pattern: #1f5fd0;
  --link: #14b491;
  --on-accent: #ffffff;
  --on-success: #04211a;
  --shadow: 0 30px 80px rgba(40, 38, 32, 0.12);
}

/* --- Sepia ---------------------------------------------------------------- */

:root:not(.light)[data-palette="sepia"] {
  --bg: #1c1610;
  --surface: rgba(38, 30, 22, 0.9);
  --surface-2: #251d15;
  --surface-3: #30271c;
  --text: #f0e3d0;
  --muted: #b29d83;
  --faint: #7d6b56;
  --line: rgba(240, 227, 208, 0.14);
  --grid: #9a8467;
  --accent: #b9722a;
  --accent-2: #5cc7ac;
  --danger: #c44a3c;
  --success: #57c9a4;
  --peer-bg: #322719;
  --axis-bg: #45341f;
  --box-bg: #2b2217;
  --same-bg: #185f4f;
  --same-text: #fff6e9;
  --same-number: #74e6c6;
  --selected-bg: #9d5d1c;
  --pattern: #b9722a;
  --link: #5cc7ac;
  --on-accent: #fff6e9;
  --on-success: #05221b;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

:root.light[data-palette="sepia"] {
  --bg: #f3e7d3;
  --surface: rgba(252, 246, 236, 0.92);
  --surface-2: #faf3e7;
  --surface-3: #ece0cb;
  --text: #3b2f22;
  --muted: #75624c;
  --faint: #a08a6f;
  --line: rgba(59, 47, 34, 0.16);
  --grid: #8a7358;
  --accent: #9c5b1f;
  --accent-2: #1f8272;
  --danger: #b53a2f;
  --success: #58c49a;
  --peer-bg: #e8d9bf;
  --axis-bg: #dcc7a4;
  --box-bg: #efe4d1;
  --same-bg: #6bc7ac;
  --same-text: #062620;
  --same-number: #0c6d59;
  --selected-bg: #9c5b1f;
  --pattern: #9c5b1f;
  --link: #1aab90;
  --on-accent: #fff8ee;
  --on-success: #05221b;
  --shadow: 0 30px 80px rgba(80, 60, 35, 0.16);
}

/* --- Sepia Rose ----------------------------------------------------------- */

:root:not(.light)[data-palette="sepia-rose"] {
  --bg: #1f1518;
  --surface: rgba(42, 29, 33, 0.9);
  --surface-2: #291c20;
  --surface-3: #352529;
  --text: #f5e2e4;
  --muted: #bd9aa0;
  --faint: #866a70;
  --line: rgba(245, 226, 228, 0.14);
  --grid: #a6838a;
  --accent: #c8446f;
  --accent-2: #56c6b0;
  --danger: #ef6a58;
  --success: #52cca4;
  --peer-bg: #362429;
  --axis-bg: #4a2f38;
  --box-bg: #2f2024;
  --same-bg: #185f52;
  --same-text: #fff5f6;
  --same-number: #74e6cc;
  --selected-bg: #b03f68;
  --pattern: #c8446f;
  --link: #56c6b0;
  --on-accent: #fff5f6;
  --on-success: #05221b;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

:root.light[data-palette="sepia-rose"] {
  --bg: #f6e6e4;
  --surface: rgba(253, 246, 245, 0.92);
  --surface-2: #fdf4f3;
  --surface-3: #eedad8;
  --text: #3d2a2c;
  --muted: #7b5b5e;
  --faint: #a88a8c;
  --line: rgba(61, 42, 44, 0.15);
  --grid: #8d6c6f;
  --accent: #a83a62;
  --accent-2: #1d8477;
  --danger: #bf3340;
  --success: #5cc5a4;
  --peer-bg: #f0dbe0;
  --axis-bg: #e6c4cc;
  --box-bg: #f2e2e2;
  --same-bg: #6dc9b4;
  --same-text: #06251f;
  --same-number: #0d6f5c;
  --selected-bg: #a83a62;
  --pattern: #a83a62;
  --link: #1bad93;
  --on-accent: #fff5f6;
  --on-success: #05221b;
  --shadow: 0 30px 80px rgba(86, 52, 56, 0.15);
}

/* --- Sepia Olive ---------------------------------------------------------- */

:root:not(.light)[data-palette="sepia-olive"] {
  --bg: #171a12;
  --surface: rgba(32, 36, 25, 0.9);
  --surface-2: #1f2318;
  --surface-3: #2a2f20;
  --text: #e9ead6;
  --muted: #a8ac8b;
  --faint: #757a5d;
  --line: rgba(233, 234, 214, 0.14);
  --grid: #8d9268;
  --accent: #a8bb45;
  --accent-2: #46c9b0;
  --danger: #f08a72;
  --success: #7ad79a;
  --peer-bg: #2b3020;
  --axis-bg: #3b4229;
  --box-bg: #25291b;
  --same-bg: #2f7a5a;
  --same-text: #f4fbf2;
  --same-number: #93ecbd;
  --selected-bg: #8ba033;
  --pattern: #a8bb45;
  --link: #46c9b0;
  --on-accent: #12160a;
  --on-success: #05210f;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

:root.light[data-palette="sepia-olive"] {
  --bg: #eeeadb;
  --surface: rgba(250, 248, 238, 0.92);
  --surface-2: #f8f6ec;
  --surface-3: #e4e0cd;
  --text: #33351f;
  --muted: #676a46;
  --faint: #969a72;
  --line: rgba(51, 53, 31, 0.15);
  --grid: #7c8055;
  --accent: #5f6c1f;
  --accent-2: #1a7f84;
  --danger: #b0432c;
  --success: #63c07f;
  --peer-bg: #e5e4cc;
  --axis-bg: #d6d6ae;
  --box-bg: #eae7d6;
  --same-bg: #7cc79a;
  --same-text: #06240f;
  --same-number: #0d6b3c;
  --selected-bg: #5f6c1f;
  --pattern: #5f6c1f;
  --link: #189b9f;
  --on-accent: #f9f9ed;
  --on-success: #05210f;
  --shadow: 0 30px 80px rgba(66, 68, 40, 0.15);
}

/* --- Terracotta ----------------------------------------------------------- */

/* Sun-yellowed paper, fired-clay tiles and dark walnut lettering, with the
   green of a card table as the second voice. The selected cell takes the tile
   colour outright, so the cell being played is the one that looks placed. */

:root:not(.light)[data-palette="terracotta"] {
  --bg: #1d130b;
  --surface: rgba(43, 29, 18, 0.9);
  --surface-2: #2a1c11;
  --surface-3: #382618;
  --text: #f3e6c4;
  --muted: #c2a57c;
  --faint: #86694a;
  --line: rgba(243, 230, 196, 0.14);
  --grid: #a9743f;
  --accent: #b9632f;
  --accent-2: #5fc2ab;
  --danger: #e2574c;
  --success: #57c9a4;
  --peer-bg: #362517;
  --axis-bg: #4b3320;
  --box-bg: #2f2014;
  --same-bg: #1c5f51;
  --same-text: #fff6e3;
  --same-number: #a6f2de;
  --selected-bg: #a85a2a;
  --pattern: #b9632f;
  --link: #5fc2ab;
  --on-accent: #fff9ea;
  --on-success: #05221b;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

:root.light[data-palette="terracotta"] {
  --bg: #e8d7a4;
  --surface: rgba(243, 232, 198, 0.92);
  --surface-2: #f3e8c8;
  --surface-3: #dfcf9f;
  --text: #412715;
  --muted: #794f25;
  --faint: #a5875a;
  --line: rgba(65, 39, 21, 0.18);
  --grid: #a16325;
  --accent: #a85a2a;
  --accent-2: #226b5b;
  --danger: #c4362e;
  --success: #56b39b;
  --peer-bg: #e6d6a6;
  --axis-bg: #d9c48d;
  --box-bg: #ecdfb6;
  --same-bg: #7cc4b0;
  --same-text: #062620;
  --same-number: #06241e;
  --selected-bg: #ad602e;
  --pattern: #ad602e;
  --link: #2f9a84;
  --on-accent: #fff9ea;
  --on-success: #05221b;
  --shadow: 0 30px 80px rgba(90, 60, 25, 0.18);
}

/* --- Blueprint ------------------------------------------------------------ */

:root:not(.light)[data-palette="blueprint"] {
  --bg: #062044;
  --surface: rgba(10, 42, 84, 0.9);
  --surface-2: #0a2c5c;
  --surface-3: #10386e;
  --text: #e8f2ff;
  --muted: #9bbde8;
  --faint: #6389bc;
  --line: rgba(174, 212, 255, 0.26);
  --grid: #9ccdff;
  --accent: #8fd2ff;
  --accent-2: #5ee0c8;
  --danger: #ff9fac;
  --success: #6fe7c0;
  --peer-bg: #103665;
  --axis-bg: #17498a;
  --box-bg: #0d2f58;
  --same-bg: #0d7d95;
  --same-text: #f2fbff;
  --same-number: #9ff4ff;
  --selected-bg: #66bdf2;
  --pattern: #8fd2ff;
  --link: #5ee0c8;
  --on-accent: #042144;
  --on-success: #03201c;
  --shadow: 0 30px 80px rgba(2, 10, 28, 0.6);
}

:root.light[data-palette="blueprint"] {
  --bg: #eaf1fa;
  --surface: rgba(255, 255, 255, 0.93);
  --surface-2: #f6f9fd;
  --surface-3: #dde8f6;
  --text: #0a2b55;
  --muted: #4a6d99;
  --faint: #7f9ab9;
  --line: rgba(10, 43, 85, 0.18);
  --grid: #3f6aa0;
  --accent: #0d5aa8;
  --accent-2: #0d8f86;
  --danger: #c23a4e;
  --success: #3fc9a8;
  --peer-bg: #dbe8f8;
  --axis-bg: #c0d7f2;
  --box-bg: #e4edf9;
  --same-bg: #5fcdd6;
  --same-text: #042930;
  --same-number: #056b78;
  --selected-bg: #0d5aa8;
  --pattern: #0d5aa8;
  --link: #12b3a4;
  --on-accent: #f2f8ff;
  --on-success: #03201c;
  --shadow: 0 30px 80px rgba(16, 45, 82, 0.15);
}

/* --- Newsprint ------------------------------------------------------------ */

:root:not(.light)[data-palette="newsprint"] {
  --bg: #181715;
  --surface: rgba(32, 31, 29, 0.9);
  --surface-2: #201f1d;
  --surface-3: #2b2a27;
  --text: #eeece5;
  --muted: #a6a49c;
  --faint: #726f68;
  --line: rgba(238, 236, 229, 0.16);
  --grid: #8c8a81;
  --accent: #e8e4d8;
  --accent-2: #6bb8cf;
  --danger: #ff8a7a;
  --success: #6fd3ab;
  --peer-bg: #2a2926;
  --axis-bg: #3a3833;
  --box-bg: #242320;
  --same-bg: #1f6b57;
  --same-text: #f7f6f1;
  --same-number: #86e8c6;
  --selected-bg: #cfcabb;
  --pattern: #e8e4d8;
  --link: #6bb8cf;
  --on-accent: #1b1a17;
  --on-success: #04211a;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

:root.light[data-palette="newsprint"] {
  --bg: #eceae4;
  --surface: rgba(248, 247, 242, 0.94);
  --surface-2: #f6f5f0;
  --surface-3: #e1dfd8;
  --text: #181816;
  --muted: #53524d;
  --faint: #84837c;
  --line: rgba(24, 24, 22, 0.2);
  --grid: #46453f;
  --accent: #2b2a26;
  --accent-2: #1d6f86;
  --danger: #b3261e;
  --success: #47c096;
  --peer-bg: #e3e1d9;
  --axis-bg: #d3d0c6;
  --box-bg: #e8e6df;
  --same-bg: #6ac7a9;
  --same-text: #062620;
  --same-number: #0a6a54;
  --selected-bg: #2b2a26;
  --pattern: #2b2a26;
  --link: #2cb6a0;
  --on-accent: #f7f6f1;
  --on-success: #04211a;
  --shadow: 0 30px 80px rgba(40, 39, 33, 0.16);
}

/* --- Glass ---------------------------------------------------------------- */

/* Only --surface is translucent: it is the one panel with a backdrop filter
   behind it. The board reads through --surface-2, which stays opaque so the
   grid lines behind a cell cannot show through the cell. */

:root:not(.light)[data-palette="glass"] {
  --bg: #070d1c;
  --surface: rgba(180, 205, 255, 0.1);
  --surface-2: #101a2e;
  --surface-3: #17233c;
  --text: #f2f6ff;
  --muted: #a8b8d8;
  --faint: #6d7c9c;
  --line: rgba(200, 220, 255, 0.22);
  --grid: #6b7c9e;
  --accent: #5f8bff;
  --accent-2: #5ce1e6;
  --danger: #ff6b8a;
  --success: #4fe0b8;
  --peer-bg: #1b2842;
  --axis-bg: #26355a;
  --box-bg: #172238;
  --same-bg: #0e6f77;
  --same-text: #f2fbff;
  --same-number: #7cf0f5;
  --selected-bg: #4a6fe0;
  --pattern: #5f8bff;
  --link: #5ce1e6;
  --on-accent: #ffffff;
  --on-success: #04201f;
  --shadow: 0 30px 80px rgba(2, 6, 20, 0.5);
}

:root.light[data-palette="glass"] {
  --bg: #e9eef7;
  --surface: rgba(255, 255, 255, 0.55);
  --surface-2: #f7f9fe;
  --surface-3: #e8eef9;
  --text: #14203a;
  --muted: #556484;
  --faint: #8794ae;
  --line: rgba(20, 32, 58, 0.12);
  --grid: #6c7b99;
  --accent: #3a63e0;
  --accent-2: #0f9aa8;
  --danger: #d64a68;
  --success: #45d2b4;
  --peer-bg: #dfe8f9;
  --axis-bg: #c7d6f4;
  --box-bg: #e8eef9;
  --same-bg: #5fd3d8;
  --same-text: #052a2d;
  --same-number: #06737a;
  --selected-bg: #3a63e0;
  --pattern: #3a63e0;
  --link: #17bcc4;
  --on-accent: #ffffff;
  --on-success: #04201f;
  --shadow: 0 30px 80px rgba(30, 45, 80, 0.14);
}