/* ============================================================
   +7 Телеком — цвета обеих тем в ОДНОМ месте.

   Почему это появилось: тёмная тема была набором точечных заплаток —
   93 отдельных правила «html[data-theme="dark"] …» в девяти файлах. Любой
   новый элемент выглядел нормально в светлой теме и ломался в тёмной,
   потому что про заплатку забывали. Стрелка у сортировки — ровно этот
   случай: цвет был вписан числом и в тёмной теме стал невидимым.

   Правило на будущее: новые стили берут цвет ТОЛЬКО отсюда. Тогда тема
   переключается сама, а отдельные правила для тёмной темы не нужны.
   За этим следит test/theme-consistency.test.js.

   Имена по смыслу, а не по цвету: «поверхность», «линия», «текст» —
   поэтому одна и та же переменная в светлой теме светлая, в тёмной тёмная.
   ============================================================ */

:root {
  /* Поверхности: фон карточек, полей ввода, «пилюль» */
  --t-surface: #ffffff;
  --t-surface-2: #f7fbff;
  --t-surface-3: #eef5fe;

  /* Линии: обычная рамка и более заметная (поля ввода, активные состояния) */
  --t-line: #cfe6fb;
  --t-line-strong: #a9d8f3;

  /* Текст */
  --t-ink: #0b2c4e;
  --t-muted: #6b8aaa;

  /* Акцент и то, что пишется поверх него */
  --t-accent: #0090e7;
  --t-accent-ink: #ffffff;
  --t-accent-soft: rgba(10, 87, 163, .07);

  /* Состояния */
  --t-ok: #16a34a;
  --t-warn: #b45309;
  --t-bad: #c0262c;

  /* Полоса прокрутки внутри блоков */
  --t-scroll: #a9d8f3;
}

html[data-theme="dark"] {
  --t-surface: #16232f;
  --t-surface-2: #1b2a39;
  --t-surface-3: #17293a;

  --t-line: #2b4257;
  --t-line-strong: #33506a;

  --t-ink: #e6eef7;
  --t-muted: #8fb0cc;

  --t-accent: #3fb4ff;
  --t-accent-ink: #0b1622;
  --t-accent-soft: rgba(63, 180, 255, .14);

  --t-ok: #4ade80;
  --t-warn: #fbbf24;
  --t-bad: #f87171;

  --t-scroll: #33506a;
}