/* ТЯГА · дизайн-система «Письмо» · токены.
   Значения сняты с холста «ТЯГА: концепт экранов». Цвет плашек вокруг чисел несёт смысл:
   мятный — деньги и успех, серо-сиреневый — нейтральное (расходы), персиковый — плохое. */
:root {
  /* текст и основная кнопка */
  --ink: #13204A;
  --ink-hover: #2A45A8;
  --ink-press: #1C2D63;
  --text: #2C3964;          /* абзацы */
  --muted: #5B6584;         /* подписи, даты, шаги */
  --faint: #646E8C;         /* «нет», недоступное: тёмнее, чем на холсте, ради контраста 4.5:1 */

  /* линии и подложки */
  --line: #C5CCE0;          /* обводка полей и вторичных кнопок, 1.5px */
  --divider: #E4E8F4;       /* разделители строк */
  --divider-soft: #DDE2EE;
  --underline: #8FA0CC;     /* пунктир полей внутри фразы */
  --surface: #FFFFFF;
  --panel: #F7F8FB;         /* панели и карточки */
  --chip: #F1F3F8;          /* чипы, поля внутри фразы, нейтральные статусы */

  /* смысловые цвета */
  --money: #BDEBD8;
  --money-soft: #EAF7F1;
  --money-chart: #3FB58A;
  --neutral-mark: #E4E8F4;
  --bad: #FFD9CE;
  --bad-soft: #FFE4DB;
  --bad-ink: #5C1F0B;
  --bad-icon: #9A3412;

  /* каналы публикаций: подложки карточек в плане и обложек в одобрении */
  --tint-vk: #E3ECFB;
  --tint-telegram: #E1F1F9;
  --tint-yandex_business: #FBF1CC;
  --tint-dzen: #F4E3DF;
  --tint-rutube: #ECEAF2;

  /* типографика */
  --font: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-base: 17px;
  --fs-lead: clamp(28px, 3.4vw + 8px, 40px);
  --fs-lead-hero: clamp(30px, 3.8vw + 8px, 44px);
  --fs-row: clamp(19px, 1vw + 12px, 22px);
  --fs-madlib: clamp(20px, 1.2vw + 12px, 26px);

  /* форма и сетка */
  --r-panel: 28px;
  --r-alert: 24px;
  --r-area: 22px;
  --r-mark: 10px;
  --container: 1120px;
  --gutter: 40px;
  --focus: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--ink-hover);
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}