/* Единая палитра дашборда. Все цвета интерфейса берутся только отсюда.
   n0–n7 — поверхности и линии, n8–n14 — текст; светлая тема меняет значения, а не имена.
   Цветовые семейства: base — акцентный текст и линии, -tint — тонированный фон,
   -strong — насыщенная заливка или контур, -fill — светлая заливка под тёмный текст --on-fill. */
:root {
  --color-scheme: dark;
  --n0: #050e10;
  --n1: #0b1618;
  --n2: #121d20;
  --n3: #192426;
  --n4: #202b2e;
  --n5: #283336;
  --n6: #313c3f;
  --n7: #3e4a4d;
  --n8: #586568;
  --n9: #6c797c;
  --n10: #828f92;
  --n11: #9aa7ab;
  --n12: #b0bec2;
  --n13: #d0dbde;
  --n14: #e8f3f6;
  --paper: #fafbfb;
  --on-fill: #10232a;
  --shadow: #000000;
  --red: #eb766f; --red-tint: #512926; --red-strong: #b1403e; --red-fill: #ffa098;
  --orange: #fc8f46; --orange-tint: #5a3116; --orange-strong: #633a1f; --orange-fill: #ff9957;
  --amber: #deb564; --amber-tint: #47381a; --amber-strong: #675122; --amber-fill: #ecb94e;
  --green: #88d799; --green-tint: #23432b; --green-strong: #3d6c48; --green-fill: #9bdda8;
  --teal: #5fc7b6; --teal-tint: #15443e; --teal-strong: #276b61; --teal-fill: #53d2bf;
  --sky: #3fbfd0; --sky-tint: #11393f; --sky-strong: #065761; --sky-fill: #39cfe2;
  --blue: #73a2dd; --blue-tint: #253a53; --blue-strong: #396190; --blue-fill: #87b8f3;
  --violet: #ba9aea; --violet-tint: #3d3150; --violet-strong: #6d568e; --violet-fill: #ccabfe;
}

:root[data-theme="light"] {
  --color-scheme: light;
  --n0: #d9dfe1;
  --n1: #eef5f6;
  --n2: #ffffff;
  --n3: #f3f9fb;
  --n4: #e9f0f1;
  --n5: #e1e7e9;
  --n6: #d4dadc;
  --n7: #becacd;
  --n8: #8f9b9e;
  --n9: #778385;
  --n10: #667174;
  --n11: #525d60;
  --n12: #3f4a4c;
  --n13: #2b3537;
  --n14: #1a2326;
  --paper: #ffffff;
  --on-fill: #10232a;
  --shadow: #1d2b33;
  --red: #ae4440; --red-tint: #ffebe9; --red-strong: #fbb7b0; --red-fill: #ffa098;
  --orange: #a75001; --orange-tint: #feece2; --orange-strong: #f5bc9b; --orange-fill: #ff9957;
  --amber: #8a6500; --amber-tint: #faefda; --amber-strong: #e4c68e; --amber-fill: #ecb94e;
  --green: #11813c; --green-tint: #e3f6e6; --green-strong: #a6daaf; --green-fill: #9bdda8;
  --teal: #057d70; --teal-tint: #dbf7f2; --teal-strong: #8edcce; --teal-fill: #53d2bf;
  --sky: #067a87; --sky-tint: #daf6fb; --sky-strong: #8adae6; --sky-fill: #39cfe2;
  --blue: #276cba; --blue-tint: #e7f1fe; --blue-strong: #a7cefe; --blue-fill: #87b8f3;
  --violet: #7c54ae; --violet-tint: #f3edfe; --violet-strong: #d4bff7; --violet-fill: #ccabfe;
}

html { color-scheme: var(--color-scheme); }

.theme-toggle {
  flex: 0 0 auto; border: 1px solid var(--n7); border-radius: 6px; padding: 4px 9px;
  color: var(--n12); background: var(--n3); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--teal); color: var(--n14); }
.theme-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }