/* ============================================================
   tokens.css — дизайн-токены сайта «Салют-Фильтр»

   Файл-словарь: только объявления переменных в :root, правил
   для селекторов здесь нет и быть не должно.

   Все значения взяты из style.css / styles.css по частоте
   использования — ничего нового не придумано. Существующие
   стили эти переменные пока не используют: страницы переходят
   на них по одной, вместе с редизайном.

   НЕ ВНОСИТЬ СЮДА:
   - #007bff и #0056b3 — это дефолтная синева Bootstrap, к
     фирменной палитре завода отношения не имеет. При переделке
     страниц заменяется на --color-brand-blue, а не на акцентный
     красный.

   БРЕЙКПОИНТЫ (договорённость; CSS-переменные в @media
   не работают, поэтому это комментарий, а не переменные):
   - Канонические: 480, 768, 992, 1200
   - Ошибочные, при переделке страниц заменяются:
     767 -> 768, 991 -> 992, 575 -> 480
   ============================================================ */

:root {

    /* ---------- Цвета ---------- */

    /* Фоны */
    --color-bg:          #fff;      /* фон страницы (36 использований) */
    --color-bg-section:  #f9f9f9;   /* светлый фон секций (6) */
    --color-bg-card:     #fff;      /* фон карточек: .big-card, .part-item */
    --color-bg-input:    #f6f6f6;   /* фон полей ввода: input, textarea (3) */

    /* Затемнение поверх фотографии (тёмный стоп градиента карточки) */
    --color-scrim:       rgba(0, 0, 0, 0.7);

    /* Текст */
    --color-text:        #333;      /* основной текст (9) */
    --color-heading:     #2c2c2c;   /* тёмный текст заголовков (2) */
    --color-text-muted:  #555;      /* вторичный текст (5) */
    --color-text-faint:  #9f9f9f;   /* плейсхолдеры, подписи (2) */
    --color-text-inverted: #fff;    /* текст на тёмном фоне; белый уже есть как --color-bg, это его роль «текст» */

    /* Границы */
    --color-border:        #e1e1e1; /* обычная граница (3) */
    --color-border-strong: #d5d5d5; /* граница потемнее (2) */

    /* Акцент — служебный, НЕ брендовый. Только бейдж «Новинка»
       и сообщения об ошибках в формах. В брендбуке завода не
       значится: подобран верстальщиком в первой вёрстке и разошёлся
       по кнопкам и бейджам. Для элементов, представляющих бренд,
       использовать --color-brand-blue / --color-brand-orange. */
    --color-accent:       #d62e4c;
    --color-accent-hover: #bb2440;  /* затемнение при наведении (.def-btn:hover) */

    /* Фирменные цвета завода (брендбук; комментарии верстальщика
       в style.css, строки 1023-1026) */
    --color-brand-blue:   #22338B;  /* Pantone Reflex Blue C — основной цвет бренда, логотип */
    --color-brand-orange: #EC6300;  /* Pantone Orange 021 C — фирменный акцент */

    /* ---------- Типографика ---------- */

    /* Семейство: Inter поверх Montserrat — откат на прежний шрифт
       делается правкой одной этой строки */
    --font-family-base: 'Inter', 'Montserrat', sans-serif;

    /* Размеры: ряд из фактически используемых значений.
       32px — мобильная версия крупного заголовка (2xl в медиазапросах),
       отдельной ступени не требует. */
    --font-size-xs:  14px;   /* мелкий текст (21) */
    --font-size-sm:  16px;   /* базовый текст, кнопки (17) */
    --font-size-md:  18px;   /* увеличенный текст (13) */
    --font-size-lg:  24px;   /* заголовок карточки (.big-card-title) */
    --font-size-xl:  28px;   /* заголовок страницы, h1 (5) */
    --font-size-2xl: 42px;   /* заголовок секции (.def-title) */

    /* Насыщенности: начертания реально подключены в fonts/stylesheet.css */
    --font-weight-light:     300;
    --font-weight-regular:   400;  /* Montserrat Regular подключена как font-weight: normal */
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;

    /* ---------- Отступы (кратны 4px) ---------- */

    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  12px;
    --space-lg:  20px;   /* самый частый отступ проекта (84) */
    --space-xl:  40px;   /* вертикальные отступы секций (22) */
    --space-2xl: 60px;   /* крупные отступы секций (21) */

    /* ---------- Радиусы скругления ---------- */

    --radius-sm: 4px;    /* мелкие элементы: бейджи, инпуты */
    --radius-md: 8px;    /* кнопки, вложенные блоки */
    --radius-lg: 12px;   /* карточки (.part-item, .faq-item) */

    /* ---------- Тени ---------- */

    /* карточка в покое (.part-item) */
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* карточка при наведении (.part-item:hover) */
    --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.2);
    /* акцентная тень с фирменным красным */
    --shadow-accent: 0 4px 16px rgba(214, 46, 76, 0.15);

}