/* Аркона — токены. Все значения сняты с макетов CorelDraw (сетка 1920, контейнер 1280) */

:root {
  /* Цвет */
  --ink:            #2C2C2C;  /* основной текст и логотип, R44 G44 B44 */
  --ink-muted:      #808080;  /* второстепенный текст */
  --ink-soft:       #999999;  /* подписи, плейсхолдеры */
  --bg:             #F8F8F8;  /* фон страницы */
  --surface:        #FFFFFF;  /* шапка, карточки, поля ввода */
  --surface-warm:   #D6D0CE;  /* подложка героя */
  --surface-warm-2: #EDEAE9;
  --placeholder:    #E6E6E6;  /* заглушки под фото */
  --line:           #E5E5E5;  /* разделители */
  --line-strong:    #CCCCCC;
  --hover-gray:     #EEEEEE;  /* заливка светлой кнопки при наведении */
  --danger:         #FF0000;

  /* Типографика */
  --font: "Involve", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-nav:    12.7px;  /* меню, мелкие подписи (в макете 12.67) */
  --fs-base:   15.3px;  /* основной текст (в макете 15.33, самый частый кегль) */
  --fs-input:  14px;      /* «Поиск...» и счётчик корзины, в макете 14.0 */
  --fs-lead:   18.7px;  /* лид под заголовком (в макете 18.67) */
  --fs-btn:    16px;
  --fs-h3:     24px;
  --fs-h2:     32px;
  --fs-h1:     38px;
  --fs-display: 53.9px;   /* «НАША КАРТИНА ИЛИ МАГНИТ», в макете 53.87 */

  --lh-tight: 1.33;  /* в макете и H1, и H2 идут с интерлиньяжем 1.33 */
  --lh-base:  1.33;  /* основной текст в макете: 20.4 px при кегле 15.3 */
  /* Трекинг: в макете у ВСЕХ капс-элементов он нулевой. Замер ширин при ls=0 совпал
     с макетом до 0.03 px на заголовках разделов, «Наши работы», «Кто мы?», входе,
     карточках, кнопках, меню и подвале. Раньше здесь стояло .08em и буквы разъезжались. */
  --ls-wide:  0;

  /* Сетка. Контейнер 1280 = 3 колонки по 404 с зазором 34 = 4 колонки по 320 */
  --container: 1280px;
  --gutter: 40px;
  --col-gap: 34px;

  /* Ритм */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 34px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 130px;   /* воздух между секциями главной */

  /* Прочее */
  --header-h: 180px;   /* полная высота шапки */
  --sticky-h: 49px;    /* липнет только строка меню: от неё считаются якоря и липкие блоки */
  --radius: 10px;        /* кнопки в макете скруглены на 10 px */
  --radius-input: 4px;   /* поля ввода */
  --radius-check: 2px;   /* чекбоксы */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Ниже 1280 контейнер сжимается вместе с типографикой.
   Выше 1280 всё зафиксировано: на 1280, 1440, 1680, 1920 и 2560
   размеры текста, кнопок и карточек одинаковые, меняются только поля. */
@media (max-width: 1279px) {
  :root {
    --fs-h1:      clamp(26px, 3.0vw, 38px);
    --fs-h2:      clamp(22px, 2.5vw, 32px);
    --fs-h3:      clamp(19px, 2.0vw, 24px);
    --fs-lead:    clamp(16px, 1.6vw, 19px);
    --fs-display: clamp(34px, 4.2vw, 54px);
    --gutter: 24px;
    --sp-8: 88px;
  }
}

/* Высота шапки меняется не на 1279, а там, где реально меняется сама шапка:
   на 1024+ есть строка меню, ниже она уезжает в бургер, на телефоне шапка ещё ниже.
   От этой переменной зависят липкие блоки и посадка якорей — врать ей нельзя. */
@media (max-width: 1023px) { :root { --header-h: 148px; --sticky-h: 148px; } }
@media (max-width: 767px)  { :root { --header-h: 96px;  --sticky-h: 96px;  } }

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --sp-8: 64px;
    --sp-7: 56px;
  }
}