/* СИГМАКОД — токены 1.0. Собрано из tokens.json (tools/build-tokens.py). Руками не править. */
:root {

  /* color/brand */
  --sc-color-brand-red: #FF3927; /* Фирменный красный. Точка логотипа, геометрия, крупные акценты. Белый текст на нём — только от 24 px. */
  --sc-color-brand-mint: #A0EFD0; /* Фирменный мятный. Геометрия, фон выделенной строки, фон блока. Текст на нём — только тёмный. */
  --sc-color-brand-blue: #91D2F1; /* Фирменный голубой. Геометрия, фон блока, информационные плашки. Текст на нём — только тёмный. */

  /* color/red */
  --sc-color-red-50: #FFF1EE;
  --sc-color-red-100: #FFE3DE;
  --sc-color-red-500: var(--sc-color-brand-red);
  --sc-color-red-600: #D62D20; /* Кнопки и красный текст. Белый на нём 4.93:1, он на бумаге 4.71:1. */
  --sc-color-red-700: #B3241A; /* Наведение и нажатие кнопки. */

  /* color/mint */
  --sc-color-mint-50: #EAFBF3;
  --sc-color-mint-100: #D7F7E9;
  --sc-color-mint-300: var(--sc-color-brand-mint);
  --sc-color-mint-600: #1F8A64; /* Иконки и графика на бумаге (4.11:1). Для текста — 700. */
  --sc-color-mint-700: #0F6E50; /* Мятный текст на бумаге, 5.96:1. */

  /* color/blue */
  --sc-color-blue-50: #EEF8FD;
  --sc-color-blue-100: #DDF1FB;
  --sc-color-blue-200: #ADE6FC;
  --sc-color-blue-300: var(--sc-color-brand-blue);
  --sc-color-blue-600: #1C7AAE; /* Иконки и графика на бумаге, 4.51:1. */
  --sc-color-blue-700: #0E5E86; /* Голубой текст на бумаге, 6.77:1. */

  /* color/neutral */
  --sc-color-neutral-white: #FFFFFF;
  --sc-color-neutral-paper: #F9FAF8; /* Бумага. Основной фон всех носителей. */
  --sc-color-neutral-50: #F1F3F0;
  --sc-color-neutral-100: #E4E7E3;
  --sc-color-neutral-200: #C9CDCB; /* Линейки и рамки. */
  --sc-color-neutral-300: #A9AEAB;
  --sc-color-neutral-400: #858A87; /* Неактивные элементы. Не для важного текста: 3.35:1. */
  --sc-color-neutral-500: #6A6F6C; /* Подписи и источники, 4.89:1. */
  --sc-color-neutral-600: #545855; /* Второстепенный текст, 6.91:1. */
  --sc-color-neutral-700: #3A3D3B;
  --sc-color-neutral-800: #232725;
  --sc-color-neutral-900: #171B19; /* Тёмная плашка: обложка кейса, слайд-разделитель. */
  --sc-color-neutral-ink: #080909; /* Тушь. Основной текст, 19.04:1 на бумаге. */

  /* color/status */
  --sc-color-status-success: var(--sc-color-mint-700);
  --sc-color-status-success-bg: var(--sc-color-mint-100);
  --sc-color-status-info: var(--sc-color-blue-700);
  --sc-color-status-info-bg: var(--sc-color-blue-100);
  --sc-color-status-warning: #9A6200; /* 4.87:1 на бумаге. */
  --sc-color-status-warning-bg: #FFF1D6;
  --sc-color-status-error: var(--sc-color-red-700); /* red-700: 5,9 : 1 на red-50 и 6,3 : 1 на бумаге. red-600 на red-50 даёт только 4,48. */
  --sc-color-status-error-bg: var(--sc-color-red-50);

  /* color/role */
  --sc-color-role-bg: var(--sc-color-neutral-paper);
  --sc-color-role-bg-subtle: var(--sc-color-neutral-50);
  --sc-color-role-bg-inverse: var(--sc-color-neutral-900);
  --sc-color-role-surface: var(--sc-color-neutral-white); /* Поля ввода, всплывающие окна. */
  --sc-color-role-text: var(--sc-color-neutral-ink);
  --sc-color-role-text-secondary: var(--sc-color-neutral-600);
  --sc-color-role-text-tertiary: var(--sc-color-neutral-500);
  --sc-color-role-text-disabled: var(--sc-color-neutral-400);
  --sc-color-role-text-inverse: var(--sc-color-neutral-paper);
  --sc-color-role-text-accent: var(--sc-color-red-600);
  --sc-color-role-border: var(--sc-color-neutral-200);
  --sc-color-role-border-strong: var(--sc-color-neutral-ink);
  --sc-color-role-action: var(--sc-color-red-600); /* Главное действие. Одна красная кнопка на экран. */
  --sc-color-role-action-hover: var(--sc-color-red-700);
  --sc-color-role-on-action: var(--sc-color-neutral-white);
  --sc-color-role-highlight: var(--sc-color-brand-mint); /* Выделенная строка, активный пункт, выбранное. */
  --sc-color-role-highlight-soft: var(--sc-color-mint-100); /* Наведение на строку и кнопку на цветном фоне. */
  --sc-color-role-info-surface: var(--sc-color-brand-blue); /* Информационный блок, фон формы. */
  --sc-color-role-info-surface-soft: var(--sc-color-blue-100);
  --sc-color-role-focus: var(--sc-color-red-600);
  --sc-color-role-selection: var(--sc-color-brand-mint);

  /* font */
  --sc-font-family-display: 'Oswald', 'Arial Narrow', sans-serif; /* Только прописные и цифры, только Bold. Без scaleX и других искажений. */
  --sc-font-family-text: 'Manrope', 'Arial', sans-serif; /* Всё остальное. Вариативный файл: начертания 200–800, в системе используем 400 и 600. */
  --sc-font-family-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace; /* Только примеры кода в документации. Системный, не загружается. */
  --sc-font-weight-regular: 400;
  --sc-font-weight-semibold: 600; /* Названия карточек и строк, метки, акцент в тексте. */
  --sc-font-weight-display: 700; /* Только Oswald. */

  /* size */
  --sc-size-xl: clamp(3.5rem, 1.5634rem + 8.2629vw, 9rem); /* Oswald. Первый экран, обложка, главная цифра. */
  --sc-size-l: clamp(2.5rem, 1.7958rem + 3.0047vw, 4.5rem); /* Oswald. Номера разделов и шагов, показатели, финальный призыв. */
  --sc-size-m: clamp(1.75rem, 1.4859rem + 1.1268vw, 2.5rem); /* Manrope. Заголовок страницы и секции, название кейса. */
  --sc-size-s: clamp(1rem, 0.9560rem + 0.1878vw, 1.125rem); /* Manrope. Текст, подводка, кнопки, поля; 600 — названия карточек и строк. */
  --sc-size-xs: 0.875rem; /* Manrope. Подписи, источники, метки, мелкий юридический текст. */

  /* typography */
  --sc-typography-display-family: var(--sc-font-family-display); /* Заголовок первого экрана и обложки; главная цифра («58») — тем же кеглем. */
  --sc-typography-display-weight: 700;
  --sc-typography-display-size: var(--sc-size-xl);
  --sc-typography-display-line: 1;
  --sc-typography-display-tracking: -0.01em;
  --sc-typography-display-case: uppercase;
  --sc-typography-display-s-family: var(--sc-font-family-display); /* Номера 01–04, показатели, финальный призыв. */
  --sc-typography-display-s-weight: 700;
  --sc-typography-display-s-size: var(--sc-size-l);
  --sc-typography-display-s-line: 1;
  --sc-typography-display-s-tracking: 0;
  --sc-typography-display-s-case: uppercase;
  --sc-typography-heading-family: var(--sc-font-family-text); /* Заголовок. */
  --sc-typography-heading-weight: 400;
  --sc-typography-heading-size: var(--sc-size-m);
  --sc-typography-heading-line: 1.1;
  --sc-typography-heading-tracking: -0.03em;
  --sc-typography-body-family: var(--sc-font-family-text); /* Текст, подводка, кнопки. */
  --sc-typography-body-weight: 400;
  --sc-typography-body-size: var(--sc-size-s);
  --sc-typography-body-line: 1.55;
  --sc-typography-body-tracking: 0;
  --sc-typography-body-strong-family: var(--sc-font-family-text); /* Название карточки, строки, этапа. */
  --sc-typography-body-strong-weight: 600;
  --sc-typography-body-strong-size: var(--sc-size-s);
  --sc-typography-body-strong-line: 1.35;
  --sc-typography-body-strong-tracking: -0.01em;
  --sc-typography-small-family: var(--sc-font-family-text); /* Подписи, источники, даты. */
  --sc-typography-small-weight: 400;
  --sc-typography-small-size: var(--sc-size-xs);
  --sc-typography-small-line: 1.45;
  --sc-typography-small-tracking: 0;
  --sc-typography-label-family: var(--sc-font-family-text); /* Метка отрасли: TRAVELTECH. Не больше трёх слов. */
  --sc-typography-label-weight: 600;
  --sc-typography-label-size: var(--sc-size-xs);
  --sc-typography-label-line: 1.3;
  --sc-typography-label-tracking: 0.06em;
  --sc-typography-label-case: uppercase;

  /* space */
  --sc-space-0: 0px;
  --sc-space-1: 4px;
  --sc-space-2: 8px;
  --sc-space-3: 12px;
  --sc-space-4: 16px;
  --sc-space-5: 20px;
  --sc-space-6: 24px;
  --sc-space-8: 32px;
  --sc-space-10: 40px;
  --sc-space-12: 48px;
  --sc-space-16: 64px;
  --sc-space-20: 80px;
  --sc-space-24: 96px;
  --sc-space-32: 128px;
  --sc-space-40: 160px;

  /* layout */
  --sc-layout-max-width: 1760px; /* Ширина контента. Фоны и геометрия — на всю ширину окна. */
  --sc-layout-margin: clamp(1.25rem, -0.0704rem + 5.6338vw, 5rem); /* Поле страницы: 20 px на экране 375, 80 px от 1440. */
  --sc-layout-gutter-mobile: 16px;
  --sc-layout-gutter-tablet: 20px;
  --sc-layout-gutter-desktop: 24px;
  --sc-layout-columns-mobile: 4;
  --sc-layout-columns-tablet: 8;
  --sc-layout-columns-desktop: 12;
  --sc-layout-section-y: clamp(3rem, 1.4155rem + 6.7606vw, 7.5rem); /* Вертикальный отступ секции. */
  --sc-layout-measure: 64ch; /* Максимальная длина строки текста. */
  --sc-layout-breakpoint-tablet: 700px;
  --sc-layout-breakpoint-desktop: 1100px;
  --sc-layout-breakpoint-wide: 1440px;

  /* border */
  --sc-border-width-hairline: 1px; /* Линейки между блоками, рамки полей. */
  --sc-border-width-strong: 2px; /* Фокус, активное поле. */
  --sc-border-width-accent: 0.045em; /* Красная черта под главной цифрой, от кегля цифры. */

  /* radius */
  --sc-radius-none: 0px; /* Всё: кнопки, поля, карточки, плашки, изображения, геометрия. */
  --sc-radius-full: 9999px; /* Только круглая кнопка виджета мессенджеров и аватары в соцсетях. */

  /* shadow */
  --sc-shadow-none: none;
  --sc-shadow-overlay: 0px 16px 40px 0px #0809092E; /* Единственная тень: то, что лежит поверх страницы (виджет, всплывающая форма). */

  /* motion */
  --sc-motion-duration-fast: 120ms; /* Цвет фона кнопки. */
  --sc-motion-duration-base: 180ms; /* Сдвиг стрелки, раскрытие виджета. */
  --sc-motion-duration-slow: 320ms; /* Появление формы, аккордеон. */
  --sc-motion-easing-out: cubic-bezier(0.16, 1, 0.3, 1); /* Всё, что появляется или сдвигается. */
  --sc-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --sc-motion-arrow-shift: 4px; /* Стрелка сдвигается вправо при наведении и фокусе. */

  /* geometry */
  --sc-geometry-angle: 27; /* Главный угол косых плоскостей: пологий край, в градусах от горизонтали. */
  --sc-geometry-angle-alt: 63; /* Крутой край: 90 − 27. Других углов у косых краёв нет. */

  /* dimension */
  --sc-dimension-icon-s: 16px;
  --sc-dimension-icon-m: 20px;
  --sc-dimension-icon-l: 24px;
  --sc-dimension-icon-stroke: 1.5px; /* Толщина линии иконки на сетке 24. */
  --sc-dimension-control-s: 44px;
  --sc-dimension-control-m: 52px;
  --sc-dimension-control-l: 60px;
  --sc-dimension-logo-min-screen: 80px;
  --sc-dimension-logo-min-print: 20mm;

  /* z */
  --sc-z-header: 100;
  --sc-z-widget: 200;
  --sc-z-modal: 300;
  --sc-z-toast: 400;
}

/* Короткие имена ролей: var(--sc-bg), var(--sc-text), var(--sc-action)… */
:root {
  --sc-bg: var(--sc-color-role-bg);
  --sc-bg-subtle: var(--sc-color-role-bg-subtle);
  --sc-bg-inverse: var(--sc-color-role-bg-inverse);
  --sc-surface: var(--sc-color-role-surface);
  --sc-text: var(--sc-color-role-text);
  --sc-text-secondary: var(--sc-color-role-text-secondary);
  --sc-text-tertiary: var(--sc-color-role-text-tertiary);
  --sc-text-disabled: var(--sc-color-role-text-disabled);
  --sc-text-inverse: var(--sc-color-role-text-inverse);
  --sc-text-accent: var(--sc-color-role-text-accent);
  --sc-border: var(--sc-color-role-border);
  --sc-border-strong: var(--sc-color-role-border-strong);
  --sc-action: var(--sc-color-role-action);
  --sc-action-hover: var(--sc-color-role-action-hover);
  --sc-on-action: var(--sc-color-role-on-action);
  --sc-highlight: var(--sc-color-role-highlight);
  --sc-highlight-soft: var(--sc-color-role-highlight-soft);
  --sc-info-surface: var(--sc-color-role-info-surface);
  --sc-info-surface-soft: var(--sc-color-role-info-surface-soft);
  --sc-focus: var(--sc-color-role-focus);
  --sc-selection: var(--sc-color-role-selection);
  --sc-red: var(--sc-color-brand-red);
  --sc-mint: var(--sc-color-brand-mint);
  --sc-blue: var(--sc-color-brand-blue);
  --sc-ink: var(--sc-color-neutral-ink);
  --sc-paper: var(--sc-color-neutral-paper);
}