/**
 * Дизайн-токени проєкту — ЄДИНЕ місце, де компоненти теми прив'язуються
 * до конкретних кольорів і шрифтів сайту (Elementor → Site Settings → Global Colors / Fonts).
 *
 * Компонентні стилі (cart.css, mini-cart.css, checkout.css …) знають лише
 * змінні --theme-*. На новому проєкті редагується тільки цей файл.
 *
 * Чому «:root, body», а не лише :root: Elementor оголошує --e-global-* на
 * body.elementor-kit-N, а не на :root. На :root посилання на них падали б
 * у запасні значення; на body вони резолвляться і успадковуються всім сайтом
 * (зокрема <dialog> попапу та off-canvas). :root лишається для запасних значень.
 *
 * Magic Shop: прив'язка до системних кольорів і шрифтів Kit (primary / secondary /
 * text). Kit: Primary #8D69A0 (фіолетовий, основний), Secondary #F7F4F8, Text #524B5B,
 * Accent #171535 (темно-синій) — Accent у компонентах не використовуємо — їхні ID однакові в кожному Kit. Запасне значення в кожному var() —
 * колір магазину, тож сторінка виглядає правильно, навіть поки Kit не налаштований.
 */
:root,
body {
	/* ---------- Кольори ---------- */
	--theme-text:          var(--e-global-color-text, #3C3646);      /* ← ПРОЄКТ основний текст */
	--theme-text-strong:   var(--e-global-color-primary, #3C3646);   /* ← ПРОЄКТ заголовки, суми */
	--theme-text-muted:    #9B93A3;                                  /* ← ПРОЄКТ другорядний текст, підписи */
	--theme-bg:            #FFFFFF;                                  /* ← ПРОЄКТ фон попапів, бічного кошика, карток */
	--theme-light:         #FFFFFF;                                  /* ← ПРОЄКТ білий */
	--theme-line:          #E6DFEB;                                  /* ← ПРОЄКТ рамки полів, карток, розділювачі */
	--theme-accent:        var(--e-global-color-primary, #8D69A0);   /* ← ПРОЄКТ фіолетовий = Primary Kit: кнопки, активні стани (Accent Kit тут — темно-синій, не беремо) */
	--theme-accent-strong: #7B5588;                                  /* ← ПРОЄКТ hover / натиснута кнопка */
	--theme-accent-soft:   #F1EDF3;                                  /* ← ПРОЄКТ hover рядка, обрана плитка, плашки */
	--theme-on-accent:     #FFFFFF;                                  /* ← ПРОЄКТ текст на фіолетовому */
	--theme-badge:         var(--e-global-color-primary, #3C3646);   /* ← ПРОЄКТ лічильники кошика й обраного (кружечки) */
	--theme-on-badge:      #FFFFFF;                                  /* ← ПРОЄКТ цифра на лічильнику */
	--theme-highlight:     var(--e-global-color-secondary, #F1EDF3); /* ← ПРОЄКТ бейджі, плашки */
	--theme-success:       #2E9E5B;                                  /* ← ПРОЄКТ «Додано ✓» на кнопці картки */
	--theme-error:         #C0392B;                                  /* ← ПРОЄКТ поле з помилкою */

	/* ---------- Шрифти ---------- */
	--theme-font:           var(--e-global-typography-text-font-family, "Montserrat");      /* ← ПРОЄКТ основний */
	--theme-font-secondary: var(--e-global-typography-secondary-font-family, "Montserrat"); /* ← ПРОЄКТ дрібний текст */
	--theme-font-heading:   var(--e-global-typography-primary-font-family, "Montserrat");   /* ← ПРОЄКТ заголовки блоків (фільтри, «Ви переглядали») */

	/* кнопки — глобальний шрифт «Accent» */
	--theme-button-font:    var(--e-global-typography-accent-font-family, "Montserrat"); /* ← ПРОЄКТ */
	--theme-button-size:    var(--e-global-typography-accent-font-size, 15px);
	--theme-button-weight:  var(--e-global-typography-accent-font-weight, 500);
	--theme-button-spacing: var(--e-global-typography-accent-letter-spacing, 0);
	--theme-button-radius:  12px; /* ← ПРОЄКТ = Site Settings → Buttons → Border Radius */

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

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