/* Токены дизайн-системы МКБ (Horizon), значения взяты из переменных макета Figma.
   Имена повторяют переменные Figma: text/static/primary → --text-static-primary и т.д. */
:root {
  /* Шрифт: в макете Font/Family Universal = Gratimo Grotesk. На сайте МКБ он подключается глобально. */
  --font-universal: "Gratimo Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
  --weight-regular: 400;
  --weight-bold: 700;

  /* Текст */
  --text-static-primary: #181818;
  --text-static-secondary: rgba(36, 36, 36, 0.63);
  --text-static-tertiary: rgba(36, 36, 36, 0.6);
  --text-static-disabled: rgba(36, 36, 36, 0.5);
  --text-static-inverse: #ffffff;
  --text-static-inverse-disabled: rgba(255, 255, 255, 0.7);
  --text-status-success: #38810a;
  --text-link: #2764f8;
  --text-status-error: #dd0a34;         /* текст и рамка ошибки поля формы: в PNG-макете ошибок нет, взят фирменный красный (см. README) */

  /* Фоны и контейнеры */
  --background-primary: #f5f5f5;
  --background-secondary: #fbfbfb;      /* фон подвала: в PNG-макете #FBFBFB, переменная не сверена с Figma (см. README) */
  --container-static-inverse-primary: #ffffff;
  --container-static-inverse-soft: rgba(255, 255, 255, 0.6);
  --container-static-primary: #181818;
  --container-status-brand: #dd0a34;
  --container-interactive-disabled: rgba(36, 36, 36, 0.1);

  /* Контролы */
  --button-fill-inverse: #ffffff;
  --button-fill-inverse-hover: #f0f0f0;  /* наведение на белую кнопку первого экрана: значение из версии 3, переменная не сверена с Figma (см. README) */
  --button-fill-primary: #dd0a34;
  --button-fill-primary-hover: #c30028;
  --button-fill-primary-disabled: rgba(221, 10, 52, 0.24);
  --choice-background-selected: #181818;
  --choice-background-tertiary: rgba(36, 36, 36, 0.05);
  --choice-background-tertiary-hover: rgba(36, 36, 36, 0.1);
  --choice-background-secondary: rgba(36, 36, 36, 0.1);
  --choice-background-checked: #5ea83e;
  --choice-border: rgba(36, 36, 36, 0.13);
  --input-primary: rgba(36, 36, 36, 0.05);
  --slider-track: #dcdcdc;
  --progress-track: rgba(36, 36, 36, 0.1);
  --divider: rgba(36, 36, 36, 0.1);

  /* Размеры (dimension-*) */
  --dimension-25: 2px;
  --dimension-50: 4px;
  --dimension-100: 8px;
  --dimension-150: 12px;
  --dimension-200: 16px;
  --dimension-250: 20px;
  --dimension-300: 24px;
  --dimension-400: 32px;
  --dimension-500: 40px;
  --dimension-600: 48px;
  --dimension-700: 56px;
  --dimension-1000: 80px;

  /* Скругления */
  --radius-s: 8px;
  --radius-150: 12px;
  --radius-300: 24px;
  --radius-400: 32px;
  --radius-circle: 999px;

  /* Сетка: контент 1120 на 1440, 656 на 768, 343 на 375 */
  --container-width: 1120px;
  --container-padding: 16px;
  --blocks-gap: 48px;
}

@media (min-width: 768px) {
  :root { --container-padding: 56px; }
}
@media (min-width: 1280px) {
  :root { --container-padding: 80px; --blocks-gap: 80px; }
}

/* Типографика Web (имена стилей из макета) */
.t-head-xl   { font: var(--weight-bold) 44px/52px var(--font-universal); }
.t-head-l    { font: var(--weight-bold) 36px/44px var(--font-universal); }
.t-title-s   { font: var(--weight-bold) 28px/36px var(--font-universal); }
.t-title-xs  { font: var(--weight-bold) 20px/26px var(--font-universal); }
.t-head-xs   { font: var(--weight-bold) 16px/24px var(--font-universal); }
.t-body-xl   { font: var(--weight-regular) 20px/32px var(--font-universal); }
.t-body-l    { font: var(--weight-regular) 18px/28px var(--font-universal); }
.t-body-m    { font: var(--weight-regular) 16px/24px var(--font-universal); }
.t-body-s    { font: var(--weight-regular) 14px/20px var(--font-universal); }
.t-caption-l { font: var(--weight-regular) 14px/18px var(--font-universal); }
.t-caption-m { font: var(--weight-regular) 12px/16px var(--font-universal); }
.t-caption-s { font: var(--weight-regular) 12px/14px var(--font-universal); }
.t-caption-xs{ font: var(--weight-regular) 10px/12px var(--font-universal); }