/**
 * Дизайн-токени проєкту — ЄДИНЕ місце, де компоненти теми прив'язуються
 * до конкретних кольорів і шрифтів сайту (Elementor → Site Settings → Global Colors / Fonts).
 *
 * Компонентні стилі (cart.css, mini-cart.css, product-search.css …) знають лише
 * змінні --theme-*. На новому проєкті редагується тільки цей файл.
 *
 * Чому «:root, body», а не лише :root: Elementor оголошує --e-global-* на
 * body.elementor-kit-N, а не на :root. На :root посилання на них падали б
 * у запасні значення; на body вони резолвляться і успадковуються всім сайтом
 * (зокрема <dialog> попапу та off-canvas). :root лишається для запасних значень.
 *
 * THE FISH: Kit — власні ID кольорів (0d86869 текст, 4dc46c9 поверхня, de6197a білий),
 * accent Kit — червоний. Кнопки — градієнт із Site Settings → Buttons. Запасне
 * значення в кожному var() — колір магазину, тож сторінка виглядає правильно,
 * навіть поки Kit не налаштований.
 */
:root,
body {
	/* ---------- Кольори ---------- */
	--theme-text:          var(--e-global-color-0d86869, #1D1A1B); /* ← ПРОЄКТ основний текст */
	--theme-text-strong:   var(--e-global-color-0d86869, #1D1A1B); /* ← ПРОЄКТ заголовки, суми, ціни */
	--theme-text-muted:    #8A8588;                                 /* ← ПРОЄКТ другорядний текст, підписи, деталі товару */
	--theme-bg:            #FFFFFF;                                 /* ← ПРОЄКТ фон попапів, бічного кошика, підказок */
	--theme-light:         var(--e-global-color-de6197a, #FFFFFF); /* ← ПРОЄКТ білий */
	--theme-surface:       var(--e-global-color-4dc46c9, #F1EEEB); /* ← ПРОЄКТ бежева поверхня (фон сторінки, плитки категорій) */
	--theme-surface-alt:   #F9F6F3;                                 /* ← ПРОЄКТ світліша поверхня: плашки, трек перемикача */
	--theme-line:          #E8E3DF;                                 /* ← ПРОЄКТ рамки полів, карток, розділювачі */
	--theme-accent:        var(--e-global-color-accent, #E2372E);  /* ← ПРОЄКТ червоний: серце в обраному, бейджі, помилки */
	--theme-accent-strong: #C72D25;                                 /* ← ПРОЄКТ hover акценту */
	--theme-accent-soft:   #FBEDEC;                                 /* ← ПРОЄКТ hover рядка підказок, обрана плитка */
	--theme-on-accent:     #FFFFFF;                                 /* ← ПРОЄКТ текст на червоному */
	--theme-badge:         var(--e-global-color-accent, #E2372E);  /* ← ПРОЄКТ лічильники кошика й обраного (кружечки) */
	--theme-on-badge:      #FFFFFF;                                 /* ← ПРОЄКТ цифра на лічильнику */
	--theme-highlight:     var(--e-global-color-4dc46c9, #F1EEEB); /* ← ПРОЄКТ плашки, фон мініатюр */
	--theme-success:       #2E9E5B;                                 /* ← ПРОЄКТ «Додано ✓» на кнопці картки */
	--theme-error:         #C0392B;                                 /* ← ПРОЄКТ поле з помилкою */
	--theme-gradient:      linear-gradient(90deg, #83757A 0%, #1D1A1BE5 89%); /* ← ПРОЄКТ активна плитка категорії, кнопки */

	/* ---------- Шрифти ----------
	   THE FISH: системні глобали Kit (Primary / Text / Accent) лишились дефолтними — Roboto — і на сайті
	   НЕ використовуються. Беремо власні глобали Kit (Onest), якими реально стилізовані сторінки. */
	--theme-font:           var(--e-global-typography-9d8c2fd-font-family, "Onest");   /* ← ПРОЄКТ основний (body 16/1.4) */
	--theme-font-secondary: var(--e-global-typography-ae2e9ba-font-family, "Onest");   /* ← ПРОЄКТ дрібний текст (плитки категорій) */
	--theme-font-heading:   var(--e-global-typography-ee15393-font-family, "Onest");   /* ← ПРОЄКТ заголовки блоків (24/500) */

	/* ---------- Кнопки = Site Settings → Buttons ----------
	   Один стандарт для всіх кнопок теми (оформлення, міні-кошик, вхід, кабінет, WooCommerce):
	   assets/css/buttons.css застосовує ці токени. Значення — як у Kit; змінили Kit — змініть тут. */
	--theme-button-font:     var(--e-global-typography-730f0ba-font-family, "Onest");  /* ← ПРОЄКТ глобальний шрифт кнопок у Kit */
	--theme-button-size:     var(--e-global-typography-730f0ba-font-size, 14px);
	--theme-button-weight:   var(--e-global-typography-730f0ba-font-weight, 400);
	--theme-button-spacing:  var(--e-global-typography-730f0ba-letter-spacing, .04em);
	--theme-button-line:     var(--e-global-typography-730f0ba-line-height, 1em);
	--theme-button-radius:   32px;   /* ← ПРОЄКТ = Buttons → Border Radius */
	--theme-button-pad-y:    15px;   /* ← ПРОЄКТ висота 44px (14px тексту + 2×15) — як «Кошик» у шапці й «У кошик» на картках (іконка 20 + 2×12) */
	--theme-button-pad-x:    16px;   /* ← ПРОЄКТ мінімальний бічний відступ */
	--theme-button-bg:       var(--theme-gradient);                    /* ← ПРОЄКТ = Buttons → Background (градієнт) */
	--theme-button-bg-hover: var(--e-global-color-a1f6e25, #000);      /* ← ПРОЄКТ = Buttons → Hover Background */
	--theme-button-color:    var(--e-global-color-de6197a, #FFFFFF);   /* ← ПРОЄКТ = Buttons → Text Color */

	/* ---------- Геометрія ---------- */
	--theme-radius:    8px;  /* ← ПРОЄКТ поля, рядки, плитки */
	--theme-radius-lg: 12px; /* ← ПРОЄКТ картки, попапи, блок підсумку */
	--theme-shadow:    4px 4px 4px 0 rgba(0, 0, 0, .04); /* ← ПРОЄКТ картки товарів і категорій */

	/* ---------- Стани й шари ---------- */
	--theme-overlay:          rgba(0, 0, 0, .5); /* ← ПРОЄКТ затемнення під попапом (= Overlay у off-canvas Elementor) */
	--theme-overlay-blur:     0px;               /* ← ПРОЄКТ розмиття під попапом */
	--theme-disabled-opacity: .5;                /* розпродано, неактивні кнопки */
}