/* ==========================================================================
   Stroyka — дизайн-токены
   Источник визуального стиля: virmak.ru (computed styles, снято 2026-10-04).
   В комментариях указано исходное значение virmak, если мы от него отходим.
   ========================================================================== */

/* Шрифт: на virmak — Zona Pro (коммерческий, файлы брать нельзя).
   Замена — Montserrat (Google Fonts, OFL), подключён локально: css/fonts.css. */

:root {
  /* ---------- Цвета ---------- */
  /* Акцент (жёлтый virmak: --e-global-color-3406fe9) */
  --color-accent:          #FECB0B; /* кнопки, логотип, акцентные слова в заголовках, полоски */
  --color-accent-bright:   #FFD400; /* второй жёлтый virmak (--e-global-color-0a79980) */
  --color-accent-hover:    #F2BE00; /* ховер кнопки: лёгкое затемнение + блик (на virmak блик идёт постоянно) */
  --color-accent-soft:     rgba(255, 212, 0, 0.29); /* полупрозрачный жёлтый virmak (фон иконок) */

  /* Тёмные */
  --color-dark:            #1E1E20; /* основной текст, подвал, тёмные блоки */
  --color-dark-2:          #1D1D1B; /* альтернативный тёмный из палитры virmak */
  --color-black:           #000000; /* текст на жёлтых кнопках */
  --color-overlay:         rgba(30, 30, 32, 0.79); /* затемнение поверх фото */

  /* Светлые */
  --color-white:           #FFFFFF;
  --color-gray-100:        #E3E4E4; /* фон карточек и серых секций */
  --color-gray-50:         rgba(227, 228, 228, 0.49); /* фон карточек товаров (светлее) */
  --color-text-muted:      #444444; /* второстепенный текст */
  --color-on-dark-muted:   rgba(255, 255, 255, 0.76);

  /* Семантика */
  --color-bg:              var(--color-white);
  --color-bg-alt:          var(--color-gray-100);
  --color-text:            var(--color-dark);
  --color-text-on-dark:    var(--color-white);
  --color-logo:            var(--color-accent);
  --color-logo-outline:    var(--color-dark); /* логотип: жёлтый текст с тёмной обводкой (решение: вариант «в») */

  /* ---------- Типографика ---------- */
  --font-heading: "Montserrat", "Zona Pro", Arial, sans-serif;
  --font-body:    "Montserrat", "Zona Pro", Arial, sans-serif;

  --fw-regular:  400;
  --fw-medium:   500; /* заголовки virmak — 500 */
  --fw-semibold: 600; /* подзаголовки, телефон, цены */
  --fw-bold:     700; /* логотип STROYKA */

  /* Наш: крупный H1 первого экрана (экран без фото держится на типографике) */
  --fs-display:  clamp(2rem, 1.2rem + 3.2vw, 3.5rem);       /* 32 → 56px */

  /* Размеры: мобильные (390px) → десктопные (1440px) значения virmak, плавно через clamp */
  --fs-h1:       clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); /* 26 → 34px */
  --fs-h2:       clamp(1.5rem,   1.35rem + 0.6vw, 1.875rem); /* 24 → 30px */
  --fs-h3:       clamp(1.25rem,  1.2rem + 0.2vw,  1.375rem); /* 20 → 22px */
  --fs-h4:       1.25rem;                                    /* 20px */
  --fs-lead:     clamp(1rem,     0.95rem + 0.2vw, 1.125rem); /* 16 → 18px */
  --fs-body:     clamp(0.9375rem, 0.92rem + 0.1vw, 1rem);    /* 15 → 16px */
  --fs-small:    0.875rem;  /* 14px */
  --fs-xs:       0.75rem;   /* 12px */
  --fs-button:   1rem;      /* 16px */
  --fs-nav:      1.0625rem; /* 17px */
  --fs-logo:     clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);  /* наш: 22 → 28px */

  --lh-heading:  1.3;  /* virmak: 44.2/34, 39/30 */
  --lh-body:     1.6;  /* virmak: 25.6/16 */
  --lh-card:     1.5;  /* virmak: 27/18 в карточках */
  --ls-logo:     0.04em;
  --logo-outline: 1.5px; /* толщина обводки логотипа */

  /* ---------- Скругления ---------- */
  --radius-sm:    6px;    /* маленькая кнопка в шапке */
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-card:  24px;   /* все карточки virmak */
  --radius-pill:  24px;   /* основные кнопки (при высоте 52px → «таблетка») */
  --radius-round: 100px;  /* круглые иконки, кнопка «наверх» */

  /* ---------- Тени (у virmak почти плоский дизайн) ---------- */
  --shadow-card:        0 1px 10px rgba(39, 36, 36, 0.02);
  --shadow-card-soft:   0 0 14px rgba(136, 136, 136, 0.04);
  --shadow-float:       0 18px 42px rgba(17, 24, 39, 0.12); /* всплывающие плашки, баннер cookies */
  --shadow-float-strong:0 18px 48px rgba(17, 24, 39, 0.24);

  /* ---------- Отступы и сетка ---------- */
  --container-max:      1296px; /* контент virmak: 1440 − 2×72 */
  --gutter:             16px;   /* мобильный боковой отступ (virmak ≈ 15px) */
  --gutter-desktop:     72px;
  --grid-gap:           20px;   /* gap между карточками virmak */
  --section-py:         clamp(48px, 4vw + 32px, 72px);   /* вертикальный отступ секций: 72px */
  --section-py-lg:      clamp(64px, 6vw + 40px, 100px);  /* увеличенный: ~100px */
  --card-padding:       25px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- Кнопки ---------- */
  --btn-height:         52px;
  --btn-padding:        16px 20px;
  --btn-padding-sm:     10px 14px;
  --btn-border:         1px solid transparent;
  --btn-gap:            20px; /* между двумя кнопками */

  /* ---------- Шапка ---------- */
  --header-height:        66px;
  --mobile-bar-height:    72px; /* нижняя панель < 768px, наш */

  /* ---------- Анимации ---------- */
  --transition-fast:    0.3s ease;
  --transition-btn:     0.5s ease;
  --card-hover-lift:    translateY(-5px); /* ховер карточек virmak */
  --transition-card:    transform 0.4s ease, box-shadow 0.3s ease, background 0.3s ease;

  /* ---------- Брейкпоинты (для справки, в media нельзя использовать var) ----------
     mobile < 768px, tablet 768–1024px, desktop ≥ 1025px (как у Elementor) */
}