/* Токены дизайн-системы «Табло». Копия из Маркетинг/Дизайн сайта.
   Правки — только в системе, сюда переносить копированием. */

:root {
  /* нейтраль: не серая — красноватый подтон, родня акценту */
  --paper: #ffffff;
  --surface: #f8f6f5;
  --zebra: #f0eded;
  --line: #e3dedd;
  --line-control: #c9c2c1;
  --ink-mute: #9a9291;
  --ink-2: #5f5757;
  --ink: #2a2425;
  --ink-line: #4a4243;

  /* акцент из логотипа: одно хроматическое действие */
  --accent: #b60249;
  --accent-hover: #8e0139;
  --accent-press: #75012f;

  /* статусы: всего два, третьей хромы в системе нет */
  --ok: #2e6b46;
  --warn: #8a5a00;

  /* семантика */
  --surface-page: var(--surface);
  --surface-card: var(--paper);
  --surface-zebra: var(--zebra);
  --surface-ink: var(--ink);

  --text-body: var(--ink);
  --text-secondary: var(--ink-2);
  --text-label: var(--ink-2);
  --text-disabled: var(--ink-mute);
  --text-on-ink: var(--surface);
  --text-on-action: var(--paper);

  --border-hairline: var(--line);
  --border-control: var(--line-control);
  --border-emphasis: var(--ink);
  --border-on-ink: var(--ink-line);

  --action: var(--accent);
  --action-hover: var(--accent-hover);
  --action-press: var(--accent-press);
  --status-ok: var(--ok);
  --status-warn: var(--warn);

  /* ошибка красится акцентом: четвёртая красная краска рядом с малиновым
     нечитаема, а все ошибки продукта — про деньги и сроки. Роль различают
     слова: ошибка всегда несёт причину и число-ориентир. */
  --status-error: var(--accent);
}

:root {
  --font-data: 'Fira Sans Condensed', 'Fira Sans', system-ui, sans-serif;
  --font-text: 'Fira Sans', system-ui, sans-serif;

  /* 8 ступеней, двухскоростная шкала: в плотной зоне шаг ~1.18,
     в заголовочной ~1.55. Крайние отличаются в 6.2 раза. */
  --size-label: 11px;   /* только служебные метки на широких экранах */
  --size-caption: 13px; /* подпись характеристики, пояснение */
  --size-value: 15px;   /* значение и основной текст */
  --size-lead: 18px;    /* строка в списке, кнопка */
  --size-title: 22px;   /* заголовок карточки, модель */
  --size-total: 28px;   /* итоговая сумма */
  --size-heading: 42px; /* заголовок раздела, только от 768px */
  --size-hero: 68px;    /* число на лендинге, только от 768px */

  --weight-text: 400;
  --weight-value: 500;
  --weight-title: 600;
  --weight-total: 700;

  --leading-data: 1.2;   /* данные сканируют */
  --leading-text: 1.5;   /* объяснения читают */
  --leading-title: 1.15;
  --leading-hero: 1.02;

  --measure-text: 60ch;  /* шире объяснение не набирают */
  --measure-heading: 20ch;

  --numeric: tabular-nums;
}

:root {
  /* база 6, а не 4/8: 8-сетка на 360px съедает шестую колонку
     характеристик, а 6 делит и строку данных 26, и контрол 48 */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;
  --space-5: 36px;
  --space-6: 48px;

  --row-data: 26px;   /* строка «метка — значение» */
  --control: 48px;    /* всё, что нажимают пальцем */
  --badge: 22px;      /* шильдик: нажимать не приглашает */
  --thumb: 38px;      /* плитка кадра в галерее */
}

:root {
  --radius: 2px;              /* одно значение на всю систему */
  --border-w: 1px;            /* хайрлайн между строками данных */
  --border-w-emphasis: 2px;   /* только под итогом и под шапкой раздела */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 1px;

  /* теней в системе нет: поверхности разделяет только граница */
  --shadow: none;

  --motion: 120ms linear; /* меняется только цвет, ничего не двигается */
}