/* Дизайн-токены контура v2.
   Значения сняты из Figma EuYPicIasFMOADtVu2t09H, фрейм 3:1849 (десктоп 1440)
   и 3:2119 (мобильный 390) через REST API, а не на глаз.
   Разбор — AI_TASKS/07 Redesign WWW/inventory.md */

:root {
    /* --- Цвет --- */
    --vp-brand:        #6A041C;  /* основной бордовый: кнопки, заголовки, CTA-плашка */
    --vp-brand-hover:  #9C0022;
    --vp-brand-alt:    #B3072D;
    --vp-gold:         #CB9145;  /* вторичная кнопка, плашки «Оптові замовлення» */

    --vp-bg:           #FFFFFF;
    /* Нейтрально-бежевый, как в макетах. До приёмки стоял #FFFAF3 —
       заметно желтее, из-за чего все плашки уходили в тёплый. */
    --vp-bg-cream:     #FAF7F3;  /* фон секций */
    --vp-bg-card:      #FFFFFF;  /* карточки, которые в макете белые */
    --vp-bg-sand:      #F9EEE2;  /* фон плиток */
    --vp-bg-beige:     #F4EFE4;  /* фон секции «Чому обирають нас» */

    --vp-text:         #080808;
    --vp-text-soft:    #1C1C1C;
    --vp-text-invert:  #FFFFFF;
    --vp-link:         #0056A2;

    --vp-border:       rgba(106, 4, 28, 0.20);  /* тонкие рамки карточек */

    /* --- Типографика ---
       Forum — заголовки, Manrope — текст.
       Manrope заменяет коммерческий Gilroy из макета (решение в README задачи). */
    --vp-font-head: 'Forum', 'Times New Roman', serif;
    --vp-font-body: 'Manrope', 'Helvetica Neue', Arial, sans-serif;

    /* Размеры десктопа. Мобильные значения переопределяются в base.css. */
    --vp-fs-h1:     50px;   --vp-lh-h1:     58px;
    --vp-fs-h2:     32px;   --vp-lh-h2:     40px;
    --vp-fs-h3:     24px;   --vp-lh-h3:     30px;
    --vp-fs-h4:     18px;   --vp-lh-h4:     20px;
    --vp-fs-display: 75px;  --vp-lh-display: 76px;  /* «1000+» в секции категорий */

    --vp-fs-lg:     20px;   --vp-lh-lg:     24px;
    --vp-fs-md:     16px;   --vp-lh-md:     20px;
    --vp-fs-sm:     14px;   --vp-lh-sm:     18px;
    --vp-fs-xs:     12px;   --vp-lh-xs:     14px;

    --vp-fw-normal: 400;
    --vp-fw-medium: 500;

    /* --- Раскладка ---
       Контент 1312px при боковом отступе 64px (сверено по x/width секций макета). */
    --vp-container:      1312px;
    --vp-gutter:         64px;
    --vp-gutter-mobile:  16px;

    /* --- Шкала отступов --- */
    --vp-space-1:   4px;
    --vp-space-2:   8px;
    --vp-space-3:  12px;
    --vp-space-4:  16px;
    --vp-space-5:  20px;
    --vp-space-6:  24px;
    --vp-space-8:  32px;
    --vp-space-10: 40px;
    --vp-space-12: 48px;
    --vp-space-16: 64px;

    /* Вертикальные отступы секций: 40px сверху и снизу в большинстве секций макета */
    --vp-section-y:        40px;
    --vp-section-y-mobile: 32px;

    /* --- Радиусы --- */
    --vp-radius-sm:   4px;   /* основной: кнопки, мелкие карточки (25 вхождений) */
    --vp-radius-md:  12px;   /* контейнеры секций */
    --vp-radius-lg:  16px;   /* CTA-плашка, крупные карточки */
    --vp-radius-xl:  20px;
    --vp-radius-pill: 999px; /* круглые стрелки, иконки-кружки */

    /* --- Прочее --- */
    --vp-shadow-card: 0 2px 12px rgba(8, 8, 8, 0.06);
    --vp-transition:  0.2s ease;
}