/* Оформление — десять палитр и правило «как в системе».
   ЭТОТ ФАЙЛ ОБЩИЙ для приложения и десктопа: `app/themes.css` и
   `desktop/src/themes.css` обязаны совпадать байт в байт, это проверяет тест
   `server/tests/test_themes.py`. Копия, а не общий путь: приложение уезжает
   rsync-ом, а десктоп вшивается в бинарь, и одного файла на диске для обоих
   не существует.

   Тема задаёт только цвета. Ни одного размера, ни одного шрифта, ни единого
   правила вёрстки: тема, умеющая двигать элементы, — это десять вёрсток,
   которые придётся чинить по отдельности.

   Полупрозрачные слои живут через `rgb(var(--x-rgb) / a)`, а не через
   зафиксированный rgba: иначе подсветка, рамка и тень остались бы сиреневыми
   на зелёной теме. Поэтому каждая палитра задаёт и цвет, и его компоненты.

   `--line` и `--line-2` выводятся из `--glow-rgb` в `:root` и потому
   пересчитываются сами. Светлые темы задают их заново: линия, выведенная из
   светлого свечения, на белом фоне не видна вовсе.

   Селектор — `[data-theme=…]`, а не `:root[data-theme=…]`: тогда палитру можно
   надеть на любой элемент, и образец в настройках красит сам себя своими же
   переменными, вместо того чтобы держать вторую копию десяти палитр в
   JavaScript. Специфичность у обоих одинаковая, побеждает порядок в файле, а
   `:root` стоит первым. */

:root {
  color-scheme: dark;
  --line: rgb(var(--glow-rgb) / 0.18);
  --line-2: rgb(var(--glow-rgb) / 0.32);
  /* Текст поверх заливки акцентом. Считать его от фона нельзя — заливка
     светлая, а фон тёмный, и белые буквы на золоте не читаются. */
  --on-gold: #241a05;
  --on-fiber: #0a0818;
}

/* 1. Ночь — та, с которой продукт начинался. Остаётся значением по умолчанию:
      человек, не открывавший настройки, не должен однажды увидеть другое
      приложение. */
:root,
[data-theme="night"] {
  color-scheme: dark;
  --bg0: #070510;
  --bg1: #100d24;
  --surface: #14102e;
  --surface-2: #1a1638;
  --fiber: #6f7bd9;
  --glow: #a9b8f0;
  --core: #d9e0fa;
  --gold: #f5c97b;
  --warn: #f0a3a3;
  --text: #eaecf8;
  --muted: #a4abcf;
  --fiber-rgb: 111 123 217;
  --glow-rgb: 169 184 240;
  --core-rgb: 217 224 250;
  --gold-rgb: 245 201 123;
  --warn-rgb: 240 163 163;
  --bg0-rgb: 7 5 16;
  --muted-rgb: 164 171 207;
  --on-gold: #241a05;
  --on-fiber: #0a0818;
}

/* 2. Пустота — чистый чёрный. На OLED-экране пиксель фона не светится вовсе,
      и ночью это единственная тема, которая не бьёт по глазам. */
[data-theme="void"] {
  color-scheme: dark;
  --bg0: #000000;
  --bg1: #08080b;
  --surface: #0d0d12;
  --surface-2: #131319;
  --fiber: #7c8cff;
  --glow: #aab4ff;
  --core: #e8ebff;
  --gold: #f0c46a;
  --warn: #ef9c9c;
  --text: #e4e7f2;
  --muted: #9298b0;
  --fiber-rgb: 124 140 255;
  --glow-rgb: 170 180 255;
  --core-rgb: 232 235 255;
  --gold-rgb: 240 196 106;
  --warn-rgb: 239 156 156;
  --bg0-rgb: 0 0 0;
  --muted-rgb: 146 152 176;
  --on-gold: #201704;
  --on-fiber: #05050a;
}

/* 3. Графит — без единого цветного оттенка в фоне. Для тех, кому синева
      мешает смотреть на фотографии и скриншоты. */
[data-theme="graphite"] {
  color-scheme: dark;
  --bg0: #121316;
  --bg1: #17181c;
  --surface: #1c1e23;
  --surface-2: #23262c;
  --fiber: #7b8794;
  --glow: #b9c3cf;
  --core: #eef1f5;
  --gold: #e0b872;
  --warn: #eb9d9d;
  --text: #e0e3e8;
  --muted: #98a0ab;
  --fiber-rgb: 123 135 148;
  --glow-rgb: 185 195 207;
  --core-rgb: 238 241 245;
  --gold-rgb: 224 184 114;
  --warn-rgb: 235 157 157;
  --bg0-rgb: 18 19 22;
  --muted-rgb: 152 160 171;
  --on-gold: #201803;
  --on-fiber: #0d0f12;
}

/* 4. Тайга — тёмно-зелёная. */
[data-theme="taiga"] {
  color-scheme: dark;
  --bg0: #071109;
  --bg1: #0c1a11;
  --surface: #102217;
  --surface-2: #14291d;
  --fiber: #4f9d69;
  --glow: #8fd6a6;
  --core: #dff3e6;
  --gold: #e8c37a;
  --warn: #f0a3a3;
  --text: #dfeae2;
  --muted: #96b3a2;
  --fiber-rgb: 79 157 105;
  --glow-rgb: 143 214 166;
  --core-rgb: 223 243 230;
  --gold-rgb: 232 195 122;
  --warn-rgb: 240 163 163;
  --bg0-rgb: 7 17 9;
  --muted-rgb: 150 179 162;
  --on-gold: #1c1704;
  --on-fiber: #04140a;
}

/* 5. Уголь — тёплая, коричнево-оранжевая. */
[data-theme="ember"] {
  color-scheme: dark;
  --bg0: #140d08;
  --bg1: #1d140d;
  --surface: #241a11;
  --surface-2: #2c2015;
  --fiber: #c2703a;
  --glow: #f0a273;
  --core: #ffe6d5;
  --gold: #f5c97b;
  --warn: #f08e8e;
  --text: #f0e2d8;
  --muted: #bda394;
  --fiber-rgb: 194 112 58;
  --glow-rgb: 240 162 115;
  --core-rgb: 255 230 213;
  --gold-rgb: 245 201 123;
  --warn-rgb: 240 142 142;
  --bg0-rgb: 20 13 8;
  --muted-rgb: 189 163 148;
  --on-gold: #241a05;
  --on-fiber: #180d04;
}

/* 6. Глубина — океанская синь с бирюзой. */
[data-theme="deep"] {
  color-scheme: dark;
  --bg0: #04101a;
  --bg1: #071a28;
  --surface: #0a2131;
  --surface-2: #0e2a3d;
  --fiber: #2b8fb5;
  --glow: #6fd0ec;
  --core: #d6f2fb;
  --gold: #f2c56a;
  --warn: #f09a9a;
  --text: #dceaf2;
  --muted: #8db0c2;
  --fiber-rgb: 43 143 181;
  --glow-rgb: 111 208 236;
  --core-rgb: 214 242 251;
  --gold-rgb: 242 197 106;
  --warn-rgb: 240 154 154;
  --bg0-rgb: 4 16 26;
  --muted-rgb: 141 176 194;
  --on-gold: #1d1503;
  --on-fiber: #02121c;
}

/* 7. Терминал — чёрный и фосфорный зелёный. Шутка ровно наполовину: у
      технической аудитории D-002 это рабочий фон, а не украшение. */
[data-theme="terminal"] {
  color-scheme: dark;
  --bg0: #000000;
  --bg1: #030a04;
  --surface: #061006;
  --surface-2: #09180b;
  --fiber: #1f8f3a;
  --glow: #4ade6a;
  --core: #bdf8c9;
  --gold: #d8e05a;
  --warn: #ff8f6b;
  --text: #93e5a4;
  --muted: #5b9668;
  --fiber-rgb: 31 143 58;
  --glow-rgb: 74 222 106;
  --core-rgb: 189 248 201;
  --gold-rgb: 216 224 90;
  --warn-rgb: 255 143 107;
  --bg0-rgb: 0 0 0;
  --muted-rgb: 91 150 104;
  --on-gold: #101403;
  --on-fiber: #001004;
}

/* 8. Бумага — светлая тёплая. Первая из трёх светлых: там, где темнота была
      единственным вариантом, продукт был непригоден на солнце. */
[data-theme="paper"] {
  color-scheme: light;
  --bg0: #faf7f2;
  --bg1: #f2ede4;
  --surface: #ffffff;
  --surface-2: #f6f2ea;
  --fiber: #4a5fd0;
  --glow: #2c46b8;
  --core: #14161f;
  --gold: #8a5f10;
  --warn: #b23c3c;
  --text: #262832;
  --muted: #6a6d79;
  --fiber-rgb: 74 95 208;
  --glow-rgb: 44 70 184;
  --core-rgb: 20 22 31;
  --gold-rgb: 138 95 16;
  --warn-rgb: 178 60 60;
  --bg0-rgb: 250 247 242;
  --muted-rgb: 106 109 121;
  --line: rgb(var(--core-rgb) / 0.14);
  --line-2: rgb(var(--core-rgb) / 0.28);
  --on-gold: #fff6e4;
  --on-fiber: #f4f6ff;
}

/* 9. Иней — светлая холодная. */
[data-theme="frost"] {
  color-scheme: light;
  --bg0: #f4f7fb;
  --bg1: #e9eff7;
  --surface: #ffffff;
  --surface-2: #f1f5fa;
  --fiber: #2f6fd0;
  --glow: #1f5bb5;
  --core: #0f1722;
  --gold: #7d5806;
  --warn: #b03a3a;
  --text: #1e2733;
  --muted: #5f6d7c;
  --fiber-rgb: 47 111 208;
  --glow-rgb: 31 91 181;
  --core-rgb: 15 23 34;
  --gold-rgb: 125 88 6;
  --warn-rgb: 176 58 58;
  --bg0-rgb: 244 247 251;
  --muted-rgb: 95 109 124;
  --line: rgb(var(--core-rgb) / 0.14);
  --line-2: rgb(var(--core-rgb) / 0.28);
  --on-gold: #fff6e0;
  --on-fiber: #f2f7ff;
}

/* 10. Сепия — кремовая, для долгого чтения. */
[data-theme="sepia"] {
  color-scheme: light;
  --bg0: #f4ecdd;
  --bg1: #ebe0cc;
  --surface: #fbf5ea;
  --surface-2: #f1e7d5;
  --fiber: #8a5a2b;
  --glow: #7a4a1c;
  --core: #2b2115;
  --gold: #8a5a18;
  --warn: #a33c2c;
  --text: #362a1c;
  --muted: #776650;
  --fiber-rgb: 138 90 43;
  --glow-rgb: 122 74 28;
  --core-rgb: 43 33 21;
  --gold-rgb: 138 90 24;
  --warn-rgb: 163 60 44;
  --bg0-rgb: 244 236 221;
  --muted-rgb: 119 102 80;
  --line: rgb(var(--core-rgb) / 0.16);
  --line-2: rgb(var(--core-rgb) / 0.3);
  --on-gold: #fdf4e4;
  --on-fiber: #fbf3e6;
}

/* «Как в системе» — не одиннадцатая палитра, а правило выбора между двумя.
   Пишется последним и потому побеждает: `data-theme="auto"` совпадает по
   специфичности с остальными селекторами выше. */
@media (prefers-color-scheme: light) {
  [data-theme="auto"] {
    color-scheme: light;
    --bg0: #faf7f2;
    --bg1: #f2ede4;
    --surface: #ffffff;
    --surface-2: #f6f2ea;
    --fiber: #4a5fd0;
    --glow: #2c46b8;
    --core: #14161f;
    --gold: #8a5f10;
    --warn: #b23c3c;
    --text: #262832;
    --muted: #6a6d79;
    --fiber-rgb: 74 95 208;
    --glow-rgb: 44 70 184;
    --core-rgb: 20 22 31;
    --gold-rgb: 138 95 16;
    --warn-rgb: 178 60 60;
    --bg0-rgb: 250 247 242;
    --muted-rgb: 106 109 121;
    --line: rgb(var(--core-rgb) / 0.14);
    --line-2: rgb(var(--core-rgb) / 0.28);
    --on-gold: #fff6e4;
    --on-fiber: #f4f6ff;
  }
}