/* =============================================
   BEAUTY BALM — дизайн-токени
   Єдине джерело правди для кольорів, типографіки,
   сітки й радіусів. Значення взяті з гайдлайну
   «Гайдлайн дизайн-системи · версія 1, серпень 2026»,
   не підбирались на око.

   Правило: у решті CSS не писати hex-и напряму —
   тільки var(--…). Якщо потрібного токена немає,
   спершу додати його сюди.
   ============================================= */

:root {

    /* ── 01 · Колір ────────────────────────────
       Основа — глибокий індиго з акварельної палітри
       логотипу. Акварельні відтінки — тільки як
       підкладки плиток і бейджі, ніколи як текст
       на світлому.                                */

    /* Основні */
    --bb-ink:              #241F3D;   /* основний текст, заголовки */
    --bb-indigo:           #3B2F6B;   /* головні кнопки, активні стани */
    --bb-indigo-hover:     #2D2354;   /* натиснення/ховер головної кнопки */
    --bb-periwinkle:       #7B7FD4;   /* посилання, надзаголовки, підкреслення */
    --bb-periwinkle-line:  #8E93E0;   /* підкреслення активного пункту меню */
    --bb-accent-italic:    #5F5AA8;   /* курсивний акцент у H1 */

    /* Акварельні підкладки */
    --bb-lavender:         #EDEAFA;
    --bb-mint:             #E9F6F1;
    --bb-rose:             #F7ECF6;
    --bb-photo-bg:         #F1EFFB;   /* фон секції, місце фото */

    /* Текст і лінії */
    --bb-body:             #4A4470;   /* основний абзац */
    --bb-secondary:        #6A6390;   /* другорядний текст, неактивне меню */
    --bb-muted:            #9990C4;   /* підписи, плейсхолдери */
    --bb-line:             #E7E3F5;   /* розділювачі, рамки карток */
    --bb-line-input:       #DFDAF3;   /* рамки полів і чіпів */
    --bb-line-button:      #CFC9EA;   /* рамка другорядної кнопки */
    --bb-line-soft:        #EFECFA;   /* розділювачі всередині панелей, доріжка повзунка */

    /* Стани й фони */
    --bb-success:          #2E9E6B;   /* в наявності, знижка */
    --bb-sale:             #E8A7C8;   /* бейдж «−15%» */
    --bb-bg:               #FAF9FE;   /* фон сторінки */
    --bb-tint:             #F3F1FB;   /* поле пошуку, чіпи */
    --bb-surface:          #FFFFFF;   /* шапка, картки, панелі */
    --bb-selected-bg:      #F7F6FD;   /* фон обраного варіанта */

    /* Градієнти */
    --bb-footer-gradient:  linear-gradient(132deg, #2D1B4E 0%, #7B52AF 100%);
    --bb-strip-gradient:   linear-gradient(90deg, #8E93E0, #A88FD6 45%, #8FDCC4);

    /* Текст на темному (футер) */
    --bb-on-dark:          #F3EEFA;
    --bb-on-dark-soft:     #E0D6EF;
    --bb-on-dark-muted:    #D3C4E6;
    --bb-on-dark-line:     rgba(255, 255, 255, .22);

    /* Тінь панелей */
    --bb-shadow:           0 24px 60px -20px rgba(60, 50, 110, .3);


    /* ── 02 · Типографіка ──────────────────────
       Дві гарнітури. Cormorant Garamond — заголовки
       й назви товарів. Onest — увесь інтерфейс,
       абзаци, ціни. Третьої не додавати.           */

    --bb-font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --bb-font-ui:       'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Розміри — десктоп */
    --bb-fs-hero:       76px;    /* H1 головної */
    --bb-fs-h1:         64px;    /* H1 внутрішньої сторінки */
    --bb-fs-h2:         40px;    /* заголовок секції */
    --bb-fs-h3:         36px;    /* підзаголовок у блоці */
    --bb-fs-product:    20px;    /* назва товару в картці */
    --bb-fs-lead:       18px;    /* лід під H1 */
    --bb-fs-body:       15.5px;  /* абзац */
    --bb-fs-ui:         14.5px;  /* меню, кнопки, посилання */
    --bb-fs-price:      28px;    /* ціна на сторінці товару */
    --bb-fs-price-card: 19px;    /* ціна в картці */
    --bb-fs-small:      13px;    /* дрібний інтерфейс, стара ціна */
    --bb-fs-caption:    12.5px;  /* підпис: об'єм, наявність */
    --bb-fs-eyebrow:    11.5px;  /* надзаголовок, бренд — uppercase */

    /* Розміри — мобільна */
    --bb-fs-hero-m:     44px;
    --bb-fs-h1-m:       36px;
    --bb-fs-h2-m:       28px;
    --bb-fs-product-m:  17px;

    /* Висота рядка */
    --bb-lh-hero:       1;
    --bb-lh-h1:         1.03;
    --bb-lh-h2:         1.1;
    --bb-lh-h3:         1.15;
    --bb-lh-product:    1.22;
    --bb-lh-body:       1.65;
    --bb-lh-lead:       1.6;

    /* Міжлітерний інтервал */
    --bb-ls-hero:       -.015em;
    --bb-ls-h1:         -.02em;
    --bb-ls-eyebrow:    .14em;   /* бренд, надзаголовок */
    --bb-ls-label:      .18em;   /* надзаголовок секції */
    --bb-ls-logo:       .26em;   /* напис BEAUTY BALM у шапці */
    --bb-ls-logo-m:     .22em;   /* те саме на мобільній */
    --bb-ls-footer:     .16em;   /* заголовки колонок футера */

    /* Насиченість */
    --bb-fw-light:      300;
    --bb-fw-regular:    400;
    --bb-fw-medium:     500;
    --bb-fw-semibold:   600;


    /* ── 03 · Сітка й відступи ─────────────────── */

    --bb-container:     1280px;
    --bb-gutter:        52px;    /* бокові поля, десктоп */
    --bb-gutter-m:      20px;    /* бокові поля, мобільна */

    --bb-gap-products:  22px;    /* між картками товарів */
    --bb-gap-tiles:     18px;    /* між плитками категорій */
    --bb-gap-columns:   48px;    /* між великими колонками */

    --bb-section:       88px;    /* вертикальний ритм між секціями */
    --bb-section-tight: 76px;
    --bb-section-min:   56px;    /* ніколи менше */
    --bb-section-m:     56px;    /* мобільна */

    --bb-cols-home:     4;       /* товарів у ряд: головна */
    --bb-cols-catalog:  3;       /* каталог із фільтрами */
    --bb-cols-mobile:   2;       /* мобільна */

    /* Радіуси */
    --bb-radius-sm:     8px;     /* мініатюри */
    --bb-radius-md:     10px;    /* фото товару, плитки */
    --bb-radius-lg:     12px;    /* панелі */
    --bb-radius-pill:   100px;   /* кнопки й чіпи */
    --bb-radius-check:  4px;     /* чекбокси */

    /* Розміри елементів */
    --bb-btn-h:         52px;    /* головна дія */
    --bb-btn-h-m:       44px;    /* мінімум на мобільному */
    --bb-tap-min:       44px;    /* мінімальна зона натискання */
    --bb-check-size:    16px;

    /* Пропорції фото */
    --bb-ratio-card:    4 / 5;   /* картка товару */
    --bb-ratio-product: 1 / 1;   /* головне фото товару й мініатюри */


}


/* ── Мобільні перевизначення ────────────────────
   Токени, які змінюють значення на вузькому екрані,
   перевизначаються тут — решта CSS користується
   тими самими іменами й нічого не знає про брейкпоінт. */

@media (max-width: 767.98px) {
    :root {
        --bb-gutter:  var(--bb-gutter-m);
        --bb-section: var(--bb-section-m);
        --bb-btn-h:   var(--bb-btn-h-m);

        --bb-fs-hero:    var(--bb-fs-hero-m);
        --bb-fs-h1:      var(--bb-fs-h1-m);
        --bb-fs-h2:      var(--bb-fs-h2-m);
        --bb-fs-product: var(--bb-fs-product-m);
    }
}


/* ── Базова типографіка ─────────────────────────
   Мінімум, який робить токени видимими одразу:
   гарнітури, фон, колір тексту. Решта — у main.css
   під час верстки конкретних екранів.              */

body {
    font-family: var(--bb-font-ui);
    font-size: var(--bb-fs-body);
    line-height: var(--bb-lh-body);
    color: var(--bb-body);
    background: var(--bb-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.bb-display {
    font-family: var(--bb-font-display);
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
}

h1 { font-size: var(--bb-fs-h1); line-height: var(--bb-lh-h1); letter-spacing: var(--bb-ls-h1); }
h2 { font-size: var(--bb-fs-h2); line-height: var(--bb-lh-h2); }
h3 { font-size: var(--bb-fs-h3); line-height: var(--bb-lh-h3); }

h1 em, h2 em {
    font-weight: var(--bb-fw-regular);
    color: var(--bb-accent-italic);
}

a { color: var(--bb-periwinkle); }
a:hover, a:focus { color: var(--bb-indigo); }