/* ===========================================================================
   Design tokens — выгружены 1:1 из переменных Figma
   Файл: Платформа складов I Лендинг (dWai1hPqu1Xmp6mX0XF6pD)
   Не редактировать вручную по частям: значения соответствуют макету.
   =========================================================================== */

:root {
  /* --- Типографика: семейство ------------------------------------------- */
  --font-main: 'TT Hoves Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;

  /* --- Начертания (weight/*) -------------------------------------------- */
  --weight-400: 400; /* Regular */
  --weight-500: 500; /* Medium  */

  /* --- Шкала кеглей (scale/*) ------------------------------------------- */
  --scale-00: 12px;
  --scale-01: 14px;
  --scale-03: 16px;
  --scale-05: 24px;

  /* --- Цвет: фон (component/background/*) ------------------------------- */
  --bg-main: #ffffff;
  --bg-accent: #0055ff;
  --bg-accent-tertiary: rgba(32, 124, 255, 0.12); /* #207cff1f */
  --bg-accent-quartiary: rgba(32, 124, 255, 0.05); /* #207cff0d */
  --bg-dark-primary: #292824;
  --bg-main-tertiary: rgba(255, 255, 255, 0.12); /* #ffffff1f */

  /* --- Цвет: текст (component/text/*) ----------------------------------- */
  --text-constant-dark: #292824;
  --text-constant-light: #ffffff;
  --text-constant-light-secondary: rgba(255, 255, 255, 0.78); /* #ffffffc7 */
  --text-secondary: rgba(41, 40, 36, 0.78); /* #292824c7 */
  --text-accent: #0055ff;
  --text-accent-secondary: #207cff;

  /* --- Цвет: иконки (component/icon/*) ---------------------------------- */
  --icon-main: #292824;
  --icon-secondary: rgba(41, 40, 36, 0.78);
  --icon-tertiary: rgba(41, 40, 36, 0.52); /* #29282485 */
  --icon-dark-10: rgba(41, 40, 36, 0.12); /* #2928241f */
  --icon-accent: #0055ff;
  --icon-constant-light: #ffffff;
  --icon-warning: #fe9133;

  /* --- Цвет: границы ----------------------------------------------------- */
  --border-main-quarteary: rgba(41, 40, 36, 0.12); /* #2928241f */

  /* --- Кнопки (component/button/*) --------------------------------------- */
  --btn-accent-primary-body: #0055ff;
  --btn-accent-primary-body-hover: #207cff;
  --btn-accent-primary-label: #ffffff;
  --btn-accent-primary-icon: #ffffff;
  --btn-accent-secondary-label: #0055ff;
  --btn-outline-primary-label: #0055ff;
  --btn-outline-primary-background: #ffffff;
  --btn-outline-primary-border: rgba(32, 124, 255, 0.12); /* #207cff1f */

  /* --- Поля ввода (component/input/*) ------------------------------------ */
  --input-title: #292824;
  --input-placeholder: rgba(41, 40, 36, 0.52); /* #29282485 */
  --input-background: #ffffff;
  --input-border: rgba(41, 40, 36, 0.12);

  /* --- Чекбокс (component/checkbox/*) ------------------------------------ */
  --checkbox-background-default: #ffffff;
  --checkbox-border-default: rgba(41, 40, 36, 0.12);
  --checkbox-background-true: #0055ff;

  /* --- Сегментед-пикер (component/segment/*) ----------------------------- */
  --segment-title-active: #292824;
  --segment-background-active: #ffffff;
  --segment-background: rgba(41, 40, 36, 0.05); /* #2928240d */

  /* --- Отступы (semantic/spaces/*) --------------------------------------- */
  --space-xxxs: 4px;
  --space-xxs: 8px;
  --space-xs: 10px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 20px;
  --space-xl: 24px;
  --space-xxxl: 32px;
  --space-max: 40px;

  /* --- Скругления (semantic/radii/*) ------------------------------------- */
  --radius-xxxs: 4px;
  --radius-xxs: 8px;
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 20px;
  --radius-xl: 24px;
  --radius-xxxl: 32px;

  /* --- Размеры (semantic/sizes/*) ---------------------------------------- */
  --size-xl: 44px;
  --size-xxl: 56px;

  /* --- Тени --------------------------------------------------------------- */
  --shadow-main: 0 4px 24px 0 rgba(0, 0, 0, 0.08),
    0 1px 3px 0 rgba(0, 0, 0, 0.04);

  /* --- Сетка страницы ------------------------------------------------------
     Макет свёрстан под 1920px: контент 1652px, поля по 134px.
     Hero — карточка 1824px с полями по 48px.                                */
  --page-width: 1920px;
  --container: 1652px;
  --container-pad: 134px;
  --hero-pad: 48px;
  --navbar-width: 1399px;

  /* Боковое поле страницы. В макете 1920: (1920-1652)/2 = 134.
     Ниже — плавно сжимается, чтобы контент не прилипал к краям экрана
     на нестандартных ширинах (iPad Pro в горизонте и т.п.). */
  --page-gutter: clamp(24px, 6.98vw, 134px);

  /* У секций-героев поле своё: в макете 1920 это (1920-1824)/2 = 48. */
  --hero-gutter: clamp(12px, 2.5vw, 48px);
}

/* Планшет и мобила: поля из своих макетов (768: 32, 375: 16) — формула
   секций та же, меняется только переменная. */
@media (max-width: 1199px) {
  :root {
    --page-gutter: 32px;   /* планшетный макет: контент 704 при холсте 768 */
    --hero-gutter: 24px;   /* hero-card 720 при холсте 768 */
  }
}

@media (max-width: 767px) {
  :root {
    --page-gutter: 16px;   /* мобильный макет: контент 343 при холсте 375 */
    --hero-gutter: 12px;   /* hero-card 351 при холсте 375 */
  }
}