/* ==========================================================================
   Дизайн-токены проекта (из макета Figma «Ui-kit»)
   Чистые CSS custom properties. Меняем значения здесь — меняется весь UI.
   Примечание для Битрикс: файл подключается первым, до остальных стилей.
   ========================================================================== */

:root {
  /* --- Цвета ------------------------------------------------------------- */
  --color-black: #0f0f0f;
  --color-white: #ffffff;
  --color-orange: #f57c00;        /* акцент */
  --color-grey: #eeeff1;
  --color-light-grey: #f6f6f6;
  --color-text: #575f70;          /* вторичный текст */
  --color-dark-blue: #282a48;
  --color-red: #eb5757;           /* ошибка */
  --color-white-bg: #fefefe;
  --color-white-bg-opacity: rgba(254, 254, 254, 0.2);

  /* Семантические алиасы */
  --bg-page: var(--color-white);
  --text-main: var(--color-black);
  --text-muted: var(--color-text);
  --accent: var(--color-orange);
  --accent-hover: #e55400;        /* затемнённый оранжевый для hover/clicked (из макета) */

  /* --- Типографика ------------------------------------------------------- */
  --font-base: 'Arimo', Arial, 'Helvetica Neue', Helvetica, sans-serif;

  --lh-heading: 1.1;
  --lh-text: 1.3;

  /* Адаптивная шкала размеров. База — 375 (mobile-first),
     переопределяется ниже в @media min-width. */
  --fs-h1: 40px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-l: 20px;
  --fs-m: 18px;
  --fs-s: 18px;
  --fs-xs: 16px;
  --fs-xxs: 14px;
  --fs-3xs: 12px;

  /* --- Отступы (шаг 4px) -------------------------------------------------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;
  --space-100: 100px;
  --space-120: 120px;

  /* --- Скругления -------------------------------------------------------- */
  --radius-control: 4px;   /* кнопки, инпуты, пилюли меню */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* --- Контейнер / сетка -------------------------------------------------
     Ширина макета: 1920. Контент центрируется, по бокам — резиновые поля. */
  --container-max: 1920px;
  --container-pad: 16px;   /* 375  */

  /* --- z-index ----------------------------------------------------------- */
  --z-header: 100;
  --z-menu: 200;
  --z-popup: 300;

  /* --- Переходы ---------------------------------------------------------- */
  --transition: 0.2s ease;

  /* Значения брейкпоинтов (справочно; в @media используются литералы):
     tablet 1024px · laptop 1440px · desktop 1920px */
}

/* Планшет 1024 --------------------------------------------------------------*/
@media (min-width: 1024px) {
  :root {
    --fs-h1: 52px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-l: 22px;
    --fs-m: 20px;
    --fs-s: 18px;
    --fs-xs: 16px;
    --fs-xxs: 16px;
    --fs-3xs: 12px;

    --container-pad: 40px;
  }
}

/* Ноутбук 1440 --------------------------------------------------------------*/
@media (min-width: 1440px) {
  :root {
    --fs-h1: 64px;
    --fs-h2: 40px;
    --fs-h3: 32px;
    --fs-l: 24px;
    --fs-m: 20px;
    --fs-s: 18px;
    --fs-xs: 16px;
    --fs-xxs: 14px;
    --fs-3xs: 12px;

    --container-pad: 80px;
  }
}

/* Десктоп 1920 --------------------------------------------------------------*/
@media (min-width: 1920px) {
  :root {
    --fs-h1: 100px;
    --fs-h2: 56px;
    --fs-h3: 48px;
    --fs-l: 32px;
    --fs-m: 28px;
    --fs-s: 24px;
    --fs-xs: 20px;
    --fs-xxs: 16px;
    --fs-3xs: 14px;

    --container-pad: 40px;
  }
}