/* ==========================================================================
   Дизайн-токены Telecomo
   --------------------------------------------------------------------------
   Единственное место, где заданы цвета, шрифты, отступы и типографика.
   Источник: _verstka/css/style.css (:root) и _verstka/docs/style_guide.md.

   По месту ничего из палитры не хардкодим — только через var(--...).
   Чтобы перекрасить проект целиком, достаточно поменять значения здесь.
   ========================================================================== */

:root {
    /* --- Цвета -------------------------------------------------------- */
    --color-text-primary:   #091e42;  /* основной текст */
    --color-text-secondary: #626f86;  /* вторичный текст */
    --color-accent:         #722ed1;  /* акцент */
    --color-accent-hover:   #531dab;  /* акцент при наведении */
    --color-accent-bg:      #f9f0ff;  /* подложка акцентных блоков */
    --color-bg-secondary:   #f8f8f9;  /* фон панелей и аккордеонов */
    --color-border:         #dcdfe4;  /* границы */
    --color-placeholder:    #b3b9c4;  /* плейсхолдеры форм */
    --color-error:          #f5222d;  /* ошибка */
    --color-error-bg:       #fff1f0;  /* подложка ошибки */
    --color-white:          #ffffff;

    /* --- Шрифты ------------------------------------------------------- */
    --font-headers: 'Unbounded', sans-serif;
    --font-body:    'Wix Madefor Display', sans-serif;

    /* --- Отступы ------------------------------------------------------ */
    --spacing-xs:  8px;
    --spacing-sm:  16px;
    --spacing-md:  24px;
    --spacing-lg:  32px;
    --spacing-xl:  48px;
    --spacing-xxl: 80px;

    /* --- Переходы ----------------------------------------------------- */
    --transition-default: 0.2s ease;
    --transition-slow:    0.35s ease;  /* кнопки, радио-карточки */

    /* --- Типографика: размеры и интерлиньяж --------------------------- */
    --font-size-h1: 56px;  --line-height-h1: 1.14;
    --font-size-h2: 48px;  --line-height-h2: 1.16;
    --font-size-h3: 28px;  --line-height-h3: 1.28;
    --font-size-h4: 24px;  --line-height-h4: 1.33;

    --font-size-h2-mobile: 28px;

    --font-size-subheading-s: 20px;
    --font-size-subheading-s-mobile: 18px;
    --line-height-subheading: 1.4;

    --font-size-text-l: 18px;  --line-height-text-l: 1.55;
    --font-size-text-m: 16px;  --line-height-text-m: 1.5;
    --font-size-text-s: 14px;  --line-height-text-s: 1.57;

    --font-size-text-l-mobile: 16px;

    /* --- Заголовки: рабочая шкала -------------------------------------
       Токены --font-size-h1…h4 выше взяты из первоначального макета и
       на боевых страницах не используются: там заголовок страницы был
       56 пикселей, а по сайту сложился размер 26. Оставляем их как
       справку по макету и вводим шкалу, по которой сайт живёт.

       Четыре уровня, все на Unbounded, все с одной жирностью — разница
       только в размере. Раньше заголовки блоков гуляли от 15 до 32
       пикселей и половина из них была набрана шрифтом основного текста.

         страница  26  — h1, один на страницу
         блок      22  — h2, крупный раздел внутри страницы
         подраздел 18  — h3 и заголовки в окнах
         карточка  16  — название плашки в сетке

       Название товара, новости и прочих карточек списка живёт отдельно:
       это не заголовок, а строка перечня, и набирается шрифтом текста
       (--font-size-card-name).
       ------------------------------------------------------------------ */
    --heading-weight: 600;

    --heading-page:      26px;  --heading-page-lh:    1.2;
    --heading-section:   22px;  --heading-section-lh: 1.25;
    --heading-sub:       18px;  --heading-sub-lh:     1.3;
    --heading-card:      16px;  --heading-card-lh:    1.35;

    /* На узких экранах шкала сжимается на ступень, пропорции сохраняются */
    --heading-page-mobile:    22px;
    --heading-section-mobile: 20px;
    --heading-sub-mobile:     17px;

    /* Названия карточек списка — шрифтом текста, не заголовочным */
    --font-size-card-name: 15px;  --line-height-card-name: 1.4;

    /* --- Формы и элементы управления ---------------------------------- */
    --input-border-width:    2px;
    --input-padding:         22px;
    --input-padding-mobile:  14px 18px;

    --button-padding:        16px 24px;
    --button-padding-l:      24px 32px;
    --button-icon-size:      24px;
    --button-icon-gap:       8px;

    --card-border-width:     1px;
    --card-padding:          32px;
    --card-padding-mobile:   16px;

    /* Прямые углы — осознанное решение дизайна.
       Единственное исключение — круглые иконочные кнопки в шапке. */
    --radius-base:  0;
    --radius-round: 50%;
    /* .viewed-card в исходной вёрстке ссылается на --radius-lg, но нигде её
       не определяет — свойство молча не применяется. Объявляем явно, значение
       соответствует принятым в дизайне прямым углам. */
    --radius-lg:    0;

    /* --- Сетка -------------------------------------------------------- */
    --container-max:      1736px;
    --container-padding:  16px;
    --grid-gap:           40px;
    --grid-gap-mobile:    16px;

    /* Несколько сторонних компонентов (arturgolubev:search.title — свои
       style.css в template1/ и modal/, трогать их не будем) до сих пор
       считают часть отступов через var(--width-multiplier) — как в
       /assets. Переменную нигде не переопределяли, поэтому она невалидна:
       calc() с ней обнуляет свойство целиком (padding инпута поиска,
       например). Задаём то же значение, что было в /assets, — те же
       calc(N*100vw/1920) fallback-строки рядом в тех же файлах и так
       считают руками, так что новых «резиновых» размеров это не добавляет,
       просто чинит уже написанные. */
    --width-multiplier: calc(100vw / 1920);
}