/* Токены, сброс, базовая типографика.

   Тем четыре, и все они — только переопределение цветовых переменных ниже.
   Ни одного правила вёрстки тема не трогает: как только тема начнёт двигать
   отступы, каждый экран придётся проверять четырежды.

   Роли, а не оттенки. --green-dk это «фон главной кнопки», а --on-green —
   «текст на ней». В тёмной теме кнопка светлеет, а текст на ней темнеет:
   инверсия цвета без обмена ролями дала бы белое на светло-зелёном. */

:root,
:root[data-theme='light'] {
  --bg: #EAE9DC;
  --card: #F7F5EC;
  --card-2: #EFEDE1;
  --line: #DCD9C9;
  --ink: #2B302A;
  --muted: #5F6559;
  --green: #6E8B5B;
  --green-dk: #4A6340;
  --red: #C0554E;
  --amber: #D4A03C;

  /* Производные: заливки бейджей и мягких плашек. */
  /* Металлы наград. Тон взят от --amber и цвета категории «Финансы», но каждый
     затемнён до 4.5:1 на --card и --card-2: этими цветами набрана и подпись
     степени, а не только кружок. Светлее — и текст проваливает контраст. */
  --gold: #8B6421;
  --silver: #676D65;
  --bronze: #8D622F;

  /* Тёмный красный для текста. --red (#C0554E) даёт на карточке 4.13:1 —
     хватает значку, но не надписи. Разделяем: --red красит графику,
     --red-ink — буквы. */
  --red-ink: #AB443D;

  /* Нажатое состояние зелёной кнопки: её фон — --green-dk, и наведению нужен
     оттенок темнее. Белый текст на нём — 8.2:1. */
  --green-press: #3C5033;

  /* Тёмная охра для звезды «лягушки». Сам --amber (#D4A03C) даёт на карточке
     2.16:1 — звезда почти не видна, а это единственный признак лягушки в
     списке. Значку нужно 3:1, здесь 3.2:1 на обоих фонах карточек. */
  --amber-ink: #AF8027;

  /* Тот же смысл, но для НАДПИСИ, а не для значка. Отдельная переменная по той
     же причине, что и --red-btn: --amber-ink подобран под графику и на карточке
     даёт около 3:1 — значку хватает, тексту нет. Этой охрой набраны статусы
     интеграций («Записываются вручную»), и читать их приходится словами.
     Здесь 5.6:1 на белой карточке и 5.5:1 на песочной. */
  --amber-text: #8A5F14;

  /* Фирменный синий Telegram — только для плитки логотипа. Белый значок на нём
     даёт 3.4:1: это графика (плитка), а не текст, ей достаточно 3:1. */
  --tg-blue: #2AABEE;

  --green-soft: #E3E9DC;
  --red-soft: #F3E0DE;
  --amber-soft: #F5E9D2;
  --on-green: #FFFFFF;

  /* Текст на мягких плашках. Раньше эти три цвета стояли в app.css числами и в
     тёмной теме остались бы тёмными на тёмном.
     --on-amber-soft затемнён с прежнего #8A651E: тот давал на жёлтой плашке
     4.41:1 — чуть ниже нормы для текста. Теперь 4.9:1, и на песочной тоже. */
  --on-amber-soft: #825E1B;
  --on-red-soft: #943A34;

  /* Сплошная красная кнопка — только для подтверждения необратимого действия.
     Отдельные переменные, а не --red: тот подобран под графику и на белом
     тексте даёт 4.52:1, впритык к порогу. Здесь 5.79:1. */
  --red-btn: #AB443D;
  --red-btn-press: #94382F;
  --on-red: #FFFFFF;

  /* Фон за колонкой на широком экране. Тоже переменная: иначе в тёмной теме
     вокруг приложения светилась бы светлая рамка. */
  --bg-desk: #E2E1D2;

  --radius-card: 14px;
  --radius-btn: 10px;
  --radius-pill: 999px;

  --pad: 16px;
  --gap: 12px;
  --section: 20px;
  --tap: 44px;
  --appbar-h: 56px;
  --tabbar-h: 58px;
  --column: 430px;

  /* Широкий экран. --read-max держит ширину читаемой строки: без него список
     задач растянулся бы через весь монитор. --desk-gap — воздух вокруг
     приложения, чтобы окно не упиралось в края. */
  --side-w: 264px;
  --desk-max: 1720px;
  --desk-gap: 16px;
  --read-max: 1080px;

  --t-12: 12px;
  --t-13: 13px;
  --t-15: 15px;
  --t-16: 16px;
  --t-20: 20px;
  --t-28: 28px;

  --shadow: 0 1px 2px rgba(43, 48, 42, 0.06);
  --shadow-lift: 0 6px 24px rgba(43, 48, 42, 0.14);
  --ring: 0 0 0 3px rgba(110, 139, 91, 0.45);

  --font: 'Nunito', system-ui, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 140ms;
  --slow: 240ms;
}

/* Зелёная: та же светлая схема, уведённая в холодную зелень. Буквы темнее
   светлой темы — на зеленоватой карточке серый текст мылится. */
:root[data-theme='green'] {
  --bg: #DCE5D3;
  --card: #EFF4E9;
  --card-2: #E3EBDB;
  --line: #C7D4BC;
  --ink: #212C1D;
  --muted: #4C5945;
  --green-soft: #DCE7D0;
  --bg-desk: #D3DDC9;
}

/* Песочная: тёплая бумага. Зелень остаётся акцентом — она в бренде, и менять
   её вслед за фоном значило бы делать другое приложение. */
:root[data-theme='sand'] {
  --bg: #EFE3D0;
  --card: #FAF4E8;
  --card-2: #F2E9D9;
  --line: #E0D1B8;
  --ink: #302619;
  --muted: #635742;
  --green-soft: #E6E7D3;
  --amber-soft: #F6E8CD;
  --bg-desk: #E7DAC5;
}

/* Тёмная: не инверсия светлой, а свой набор.
   Что меняется по существу, а не по яркости:
   • акценты светлеют — насыщенный зелёный на тёмном фоне не читается;
   • --on-green темнеет: кнопка стала светлой, белые буквы на ней пропали бы;
   • мягкие плашки перестают быть пастельными и становятся тёмными с цветной
     подсветкой, иначе они выжигали бы экран;
   • тень почти не работает на тёмном — держим её на разнице фона и рамки. */
:root[data-theme='dark'] {
  --bg: #151E18;
  --card: #1E2A21;
  --card-2: #26332A;
  --line: #35473B;
  --ink: #E9EFE4;
  --muted: #A2B29A;

  --green: #8FB27A;
  --green-dk: #A8C892;
  --green-press: #BCD8A8;
  --on-green: #16211A;

  --red: #E08078;
  --red-ink: #F0A49D;
  --amber: #E0B45E;
  --amber-ink: #E8C578;
  /* В тёмной теме охра и так светлая: на карточке 7.6:1, разделять нечего. */
  --amber-text: #E8C578;

  --gold: #D9B463;
  --silver: #B6BEB2;
  --bronze: #C9955C;

  --green-soft: #2A3A2C;
  --red-soft: #3D2A28;
  --amber-soft: #3A3222;
  --on-amber-soft: #E8C578;
  --on-red-soft: #F0A49D;

  /* В тёмной теме красная кнопка светлеет — буквы на ней обязаны потемнеть,
     как и на зелёной. Белым по светло-красному не прочитать (2.79:1). */
  --red-btn: #E08078;
  --red-btn-press: #EE9990;
  --on-red: #16211A;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 6px 24px rgba(0, 0, 0, 0.55);
  --ring: 0 0 0 3px rgba(168, 200, 146, 0.5);

  --bg-desk: #0E1511;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-15);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
  /* Подстраховка на весь текст, введённый человеком: слово из сорока знаков
     без пробелов CSS сам не перенесёт, и оно вылезет за карточку. Здесь — общее
     правило, а там, где нужна одна строка с многоточием, оно перебивается
     точечно. */
  overflow-wrap: break-word;
}

/* Шире 480px десктоп не делаем — колонка центрируется на фоне. */
@media (min-width: 481px) {
  body {
    background: var(--bg-desk);
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: 600;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--green-dk);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip {
  position: fixed;
  top: 8px;
  left: 50%;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  background: var(--green-dk);
  color: var(--on-green);
  text-decoration: none;
  transform: translate(-50%, -200%);
}

.skip:focus-visible {
  transform: translate(-50%, 0);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Масштаб широкого экрана ──────────────────────────────────── */

/* Телефон и монитор смотрят с разного расстояния и разными средствами. Размеры
   выше подобраны под руку и вытянутую руку: палец требует 44px, а мелкий текст
   на ходу не читается. За тем же столом, мышью, это выглядит крупно — и, что
   важнее, на экран помещается вчетверо меньше, чем могло бы. Сводка, ради
   которой десктопная раскладка и делалась, перестаёт быть сводкой, если её
   надо листать.
   
   Поэтому масштаб задаётся здесь, один раз, а не полусотней правок по месту:
   вся широкая вёрстка построена на этих переменных, и менять её поштучно
   значило бы разойтись с ними при первой же следующей правке.
   
   Ориентир — макет `doc/ref/desktop-version.png`. */
@media (min-width: 1100px) {
  :root {
    /* --t-12 с шкалой не уменьшается. Остальные ступени на широком экране
       жмутся на пиксель-другой, а эта уже нижняя: ниже двенадцати начинается
       не второстепенное, а нечитаемое. А набраны ею не украшения, а
       сведения: подписи показателей, счётчики задач в строках, даты наград,
       дни недели в календаре — две сотни надписей на десяти экранах.
       Поэтому внизу шкала схлопывается: --t-12 и --t-13 тут совпадают. */
    --t-12: 12px;
    --t-13: 12px;
    --t-15: 13px;
    --t-16: 14px;
    --t-20: 18px;
    --t-28: 24px;

    --pad: 14px;
    --gap: 12px;
    --section: 16px;
    /* Тач-цель мыши не нужна: 40px — это высота кнопки на макете. */
    --tap: 40px;
    --radius-card: 12px;

    --side-w: 248px;
  }
}

/* ── Полоса прокрутки ─────────────────────────────────────────── */

/* По умолчанию её рисует система, и она приходит бело-серой — чужой в любой из
   четырёх тем, а в тёмной просто светится сбоку. Своих цветов не заводим:
   берём те же --line и --muted, что у рамок и подписей, поэтому полоса
   переключается вместе с темой сама.

   Два набора правил не дубли: `scrollbar-*` — стандарт (Firefox и новые
   Chromium), `::-webkit-scrollbar` — старый механизм, который в Chromium
   всё ещё главнее и даёт скруглённый ползунок. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Прозрачная рамка + background-clip дают ползунку воздух по бокам: полоса
   во всю ширину смотрится тяжелее самого содержимого. */
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--line);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}