/* ==========================================================================
   MOSEPDM — дизайн-токены
   Значения сняты из Figma (file VpAM9nt9oJjSLe5K8cDNa2, frame 213:4 «Desktop»).
   Переменные Figma: White #FFFFFF, Black #080C2D, Light Gray #F0F1F9.
   ========================================================================== */

:root {
  /* ---------- Цвет ------------------------------------------------------ */
  --c-ink:        #080C2D;             /* Figma: Black — весь основной текст */
  --c-ink-50:     rgba(8, 12, 45, .5); /* «утоплённая» часть заголовка       */
  --c-ink-10:     rgba(8, 12, 45, .1); /* бордер карточки цвета              */
  --c-blue:       #2B4EDA;             /* акцент: кнопки, бейджи, выделение  */
  --c-muted:      #848696;             /* подзаголовки, вторичный текст      */
  --c-muted-2:    #6B6B6B;             /* код RAL под карточкой              */
  --c-line:       #D9D9D9;             /* линия под шапкой                   */
  --c-chip:       #AEAEAE;             /* квадрат-маркер у подписи раздела   */
  --c-white:      #FFFFFF;
  --c-light:      #F0F1F9;             /* Figma: Light Gray                  */
  --c-page:       #FAFCFF;             /* фон страницы                       */

  /* ---------- Типографика ----------------------------------------------- */
  /* ВНИМАНИЕ: Figma отдаёт Arial почти во всех текстовых слоях и Inter —
     в логотипе и подписях RAL. Похоже на подстановку вместо недостающего
     шрифта. Здесь стоит Inter; подтвердите гарнитуру и замените. */
  --font-base: "Inter", Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Все начертания в макете — Regular 400, трекинг везде −3% */
  --fw:      400;
  --fw-semi: 600;
  --ls:      -.03em;

  --fs-mega:  52px;   /* Figma: MEGA — H1 и заголовки секций, line-height 1 */
  --fs-h2:    36px;   /* подзаголовок секции, line-height 1.2               */
  --fs-h3:    20px;
  --fs-b2:    16px;   /* лид, кнопки, подписи разделов                      */
  --fs-b1:    14px;   /* меню, бейджи, телефон                              */
  --fs-c1:    12px;   /* подписи под карточками                             */
  --fs-c2:    10.5px; /* «Фасовка» / «Фракция» в наведённой карточке        */

  --lh-mega:   1;
  --lh-tight:  1.03;  /* меню, кнопки, логотип                              */
  --lh-snug:   1.2;
  --lh-body:   1.4;

  /* ---------- Сетка ------------------------------------------------------ */
  --container:  1440px;
  --gutter:     40px;         /* поле макета слева/справа */
  --content:    1360px;       /* 1440 − 2 × 40            */
  --col-left:   461px;        /* левая колонка до текстового блока секции */

  --header-h:   80px;
  --hero-top:   395px;        /* белая зона под шапкой + заголовок */
  --hero-video: 655px;        /* высота видеополосы                */

  /* ---------- Карточка цвета -------------------------------------------- */
  --card-w:        285px;
  --card-media-h:  220px;
  --card-gap-x:    18px;      /* шаг 303 − ширина 285 */
  --card-gap-y:    32px;      /* шаг 280 − высота 248 */
  --swatch-w:      120px;     /* «маска»: фото до наведения */
  --swatch-h:      97px;

  /* ---------- Кнопки и контролы ------------------------------------------ */
  --btn-h:      56px;
  --btn-px:     24px;
  --pill-h:     40px;
  --field-h:    56px;

  /* ---------- Движение ---------------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .18s;
  --dur-base:  .3s;
  --dur-slow:  .5s;

  --z-header: 100;
  --z-nav:    110;
}

@media (max-width: 1023px) { :root { --gutter: 24px; --fs-mega: 40px; --fs-h2: 26px; --header-h: 64px; } }
@media (max-width: 599px)  { :root { --gutter: 16px; --fs-mega: 35px; --fs-h2: 21px; --btn-h: 52px; } }