/*
  Токены дизайн-системы СПРУТ — единственный источник темы.
  Правила и обоснование: design/design-system.md. Здесь только значения,
  ничего не переопределять руками в компонентах — только через эти переменные.
*/
:root {
  /* 1. Палитра */
  --color-bg: #EEF2F7;
  --color-surface: #FFFFFF;
  --color-border: #E4E1DA;
  --color-text: #333A42;
  /* затемнён 27.08.2026 веб-дизайнером: на фоне страницы #EEF2F7 прежний
     #6B7382 давал 4.25:1 — ниже порога WCAG AA 4.5:1 для мелкого текста.
     Сейчас 4.64:1 на фоне и 5.22:1 на карточке. */
  --color-muted: #656D7B;
  --color-accent: #2F6FED;
  --color-accent-hover: #2557C4;
  --color-accent-active: #1E45A0;

  /* финансовая конвенция полярности — не декоративные акценты */
  --color-success: #1A9D6C;
  --color-danger: #D0413A;

  /* Палитра рядов на графиках (--chart-1…8). Заведена 27.08.2026 веб-дизайнером:
     до неё цвета рядов объявлялись по месту в static/common.js — 22 штуки, ни
     одного в токенах, и половина неотличима друг от друга. Правила, по которым
     собрана эта восьмёрка (backend/agents/knowledge/web-design.md, §7):
       • их восемь, а не больше: дальше глаз перестаёт связывать ряд с легендой;
       • они различаются НЕ ТОЛЬКО тоном, но и яркостью — соседние ступени
         отличаются в 1,2 раза, поэтому график читается в чёрно-белой печати и
         у человека, не различающего красный и зелёный;
       • каждый даёт не меньше 3:1 к фону страницы (порог WCAG для графики):
         от 9,25:1 у самого тёмного до 3,25:1 у самого светлого.
     Это не второй акцент интерфейса (§6 design-system.md): у палитры рядов
     другая работа — различать каналы и источники, а не показывать «сюда нажми».
     Красный и зелёный финансовой конвенции сюда намеренно не входят: на графике
     они означали бы «расход» и «доход», а не «ряд номер такой-то». */
  --chart-1: #1A3B87;
  --chart-2: #09503B;
  --chart-3: #6D3297;
  --chart-4: #A32B3F;
  --chart-5: #9C4C16;
  --chart-6: #11759A;
  --chart-7: #C5499C;
  --chart-8: #58952B;

  /* морская подложка страницы (§7, правка 2026-08-09) — рисунок в static/sea-pattern.svg */
  --bg-pattern: url("/static/sea-pattern.svg");
  --bg-pattern-size: 480px 480px;

  /* Толщина основной линии в иллюстрациях пустых карточек (static/empty-*.svg),
     в пикселях холста 64×64. Правка 2026-08-09: ракушка рисовалась 3.1, а
     осьминог 2.1 — рядом это выглядело разной рукой. Сам SVG этот токен взять
     не может (картинки грузятся как background-image, CSS внутрь не заходит),
     поэтому сверку с файлами делает tests/test_design_tokens.py. */
  --illustration-stroke: 2.1;

  /* 2. Шрифты */
  --font-heading: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --text-xs: 12px;   --leading-xs: 16px;
  --text-sm: 13px;   --leading-sm: 18px;
  --text-base: 14px; --leading-base: 20px;
  --text-md: 16px;   --leading-md: 24px;
  --text-lg: 20px;   --leading-lg: 28px;
  --text-xl: 24px;   --leading-xl: 32px;
  --text-2xl: 26px;  --leading-2xl: 34px;
  --text-3xl: 32px;  --leading-3xl: 40px;

  /* 3. Геометрия */
  /* Размер эмодзи-иллюстрации в волшебном режиме (карточка желания и желание
     недели). Это не кегль текста, а размер картинки: шкала кеглей кончается на
     32px, и держать 44px прямо в вёрстке значило бы завести девятую ступень
     шкалы, которой нет. Один токен на оба места — раньше стояли 44px и 40px,
     и одинаковые по смыслу картинки были разного размера. */
  --art-emoji: 44px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .10);

  --border-width: 1px;
  --focus-ring-width: 2px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --card-padding: var(--space-8);
  --card-gutter: var(--space-6);

  /* 5. Анимации */
  --transition-fast: 130ms ease-out;
  --transition-panel: 220ms ease-in-out;
}