/**
 * Дизайн-токени проєкту — ЄДИНЕ місце, де компоненти теми прив'язуються
 * до конкретних кольорів/шрифтів сайту (Elementor → Site Settings → Global Colors/Fonts).
 *
 * Компонентні стилі (cart.css, mini-cart.css, variation-popup.css …) знають лише
 * змінні --theme-*. На новому проєкті редагується тільки цей файл.
 *
 * Чому «:root, body», а не лише :root: Elementor оголошує --e-global-* на
 * body.elementor-kit-*, а не на :root. На :root посилання на них падали б
 * у запасні значення; на body вони резолвляться і успадковуються всім сайтом
 * (зокрема <dialog> попапу та off-canvas). :root лишається для запасних значень.
 *
 * Запасне значення в кожному var() — поточний колір Monna, щоб сторінка
 * виглядала правильно, навіть якщо кіт Elementor не підвантажився.
 */
:root,
body {
	/* ---------- Кольори ---------- */
	--theme-text:        var(--e-global-color-0d86869, #79543F); /* ← ПРОЄКТ основний текст (коричневий) */
	--theme-text-strong: var(--e-global-color-acf893b, #432715); /* ← ПРОЄКТ заголовки, суми */
	--theme-text-muted:  color-mix(in srgb, var(--theme-text) 70%, transparent); /* другорядний текст */
	--theme-bg:          var(--e-global-color-5c0a9bc, #FAF0E5); /* ← ПРОЄКТ кремовий фон: попапи, бічний кошик */
	--theme-light:       var(--e-global-color-de6197a, #FFFFFF); /* ← ПРОЄКТ білий */
	--theme-accent:      var(--e-global-color-a1f6e25, #E6B8B9); /* ← ПРОЄКТ рожевий: кнопки, рамки, бейджі */
	--theme-accent-soft: #F2D6D2;                                /* ← ПРОЄКТ hover / обраний рядок */
	--theme-on-accent:   var(--theme-text);                      /* текст на рожевому */
	--theme-highlight:   var(--e-global-color-4dc46c9, #F0D996); /* ← ПРОЄКТ жовтий: хрестик, плашки */
	--theme-success:     #2e9e5b;                                /* ← ПРОЄКТ «Додано ✓» на кнопці картки */

	/* старі назви з шаблону — на них ще спираються menu-cats, ingredients */
	--theme-surface:     var(--theme-bg);
	--theme-surface-alt: var(--theme-accent-soft);
	--theme-gradient:    linear-gradient(var(--theme-accent), var(--theme-accent));

	/* ---------- Шрифти ---------- */
	--theme-font:           var(--e-global-typography-3e1e0a9-font-family, "Ysabeau"); /* ← ПРОЄКТ основний */
	--theme-font-secondary: var(--e-global-typography-ae2e9ba-font-family, "Ysabeau"); /* ← ПРОЄКТ дрібний текст */

	/* кнопки — глобальний шрифт «Кнопка» */
	--theme-button-font:    var(--e-global-typography-730f0ba-font-family, "Ysabeau"); /* ← ПРОЄКТ */
	--theme-button-size:    var(--e-global-typography-730f0ba-font-size, 18px);
	--theme-button-weight:  var(--e-global-typography-730f0ba-font-weight, 600);
	--theme-button-spacing: var(--e-global-typography-730f0ba-letter-spacing, -.03em);

	/* ---------- Геометрія ---------- */
	--theme-radius:    16px; /* ← ПРОЄКТ рядки, картки */
	--theme-radius-lg: 24px; /* ← ПРОЄКТ попапи */
	--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;                /* Sold out, неактивні кнопки */
}