/* ==========================================================================
   Spice Guild — дизайн-токени

   ЄДИНЕ МІСЦЕ, ДЕ ЗАДАЮТЬСЯ КОЛЬОРИ. Щоб перефарбувати весь магазин,
   міняється тільки блок «Бренд» нижче — далі все підхоплюється саме:
   і наші стилі, і згенерований темою CSS (палітра Kadence прив'язана
   до цих же змінних у секції «Міст до Kadence»).

   Селектор :root:root — навмисно подвоєний: так специфічність вища за
   інлайновий :root від Kadence і наші значення виграють незалежно від
   порядку підключення стилів.
   ========================================================================== */

:root:root {

	/* --- Бренд --------------------------------------------------------- */
	/* Приглушене золото #a6822e — під логотип. Міняти ТІЛЬКИ тут. */

	--sg-accent:        #a6822e;   /* основний: кнопки, ціни, активні стани, лого */
	--sg-accent-dark:   #886a26;   /* hover, натиснутий стан */
	--sg-accent-darker: #68511d;   /* глибокий hover */
	--sg-accent-soft:   #f7f1e3;   /* ледь помітна заливка: активні фільтри, бейджі */
	--sg-accent-tint:   #fbf9f2;   /* ледь помітний тон — чергування секцій */

	--sg-ink:           #14110c;   /* заголовки */
	--sg-body:          #33302a;   /* основний текст */
	--sg-muted:         #6b665e;   /* вторинний текст */
	--sg-faint:         #938d83;   /* мета, підписи, закреслені ціни */

	--sg-surface:       #f6f1e8;   /* тепла підкладка секцій */
	--sg-card:          #f7f4ef;   /* фон зображення в картці товару */
	--sg-white:         #ffffff;
	--sg-line:          #e8e1d5;   /* рамки, роздільники */

	--sg-sale:          #c62828;   /* бейдж «Розпродаж» */
	--sg-star:          #f5a524;   /* зірки рейтингу */
	--sg-success:       #2e7d32;
	--sg-info:          #1565c0;
	--sg-warning:       #ef6c00;

	/* --- Темні поверхні: шапка, герой, футер ---------------------------- */

	--sg-dark:          #1a1713;   /* основна темна підкладка */
	--sg-dark-2:        #221e19;   /* трохи світліша: смуга навігації */
	--sg-dark-3:        #2b261f;   /* службова смуга зверху */

	--sg-on-dark:        rgba(255, 255, 255, .94);
	--sg-on-dark-muted:  rgba(255, 255, 255, .62);
	--sg-on-dark-line:   rgba(255, 255, 255, .14);

	/* --- Типографіка --------------------------------------------------- */

	--sg-font:          "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--sg-fs-body:       15px;
	--sg-fs-small:      13px;
	--sg-fs-title:      15px;   /* назва товару в картці */
	--sg-fs-price:      16px;
	--sg-lh:            1.7;
	--sg-fw-medium:     500;
	--sg-fw-bold:       600;

	/* --- Форма --------------------------------------------------------- */

	--sg-radius:        2px;    /* референс майже без скруглень */
	--sg-radius-lg:     4px;
	--sg-shadow:        0 1px 3px rgba(0, 0, 0, .06);
	--sg-shadow-hover:  0 6px 22px rgba(0, 0, 0, .10);
	--sg-transition:    .22s ease;

	/* --- Ритм ---------------------------------------------------------- */

	--sg-gap:           24px;
	--sg-section-y:     60px;   /* вертикальні відступи секцій головної */
	--sg-section-y-sm:  40px;

	/* ==================================================================
	   Міст до Kadence

	   Тема генерує свій CSS через ці змінні. Прив'язавши їх до наших
	   токенів, ми накриваємо і кнопки, і посилання, і сітку каталогу,
	   і блоки Gutenberg — без правок у самій темі.

	   Палітра в базі (kadence_global_palette) лишається тим самим набором:
	   вона потрібна для превʼю в Customizer і для класів .has-theme-palette-N.
	   ================================================================== */

	--global-palette1:  var(--sg-accent);
	--global-palette2:  var(--sg-accent-dark);
	--global-palette3:  var(--sg-ink);
	--global-palette4:  var(--sg-body);
	--global-palette5:  var(--sg-muted);
	--global-palette6:  var(--sg-faint);
	--global-palette7:  var(--sg-surface);
	--global-palette8:  var(--sg-card);
	--global-palette9:  var(--sg-white);
	--global-palette11: var(--sg-success);
	--global-palette12: var(--sg-info);
	--global-palette13: var(--sg-sale);
	--global-palette14: var(--sg-warning);
	--global-palette15: var(--sg-star);
}

/* Класи кольорів Gutenberg — щоб блоки на головній теж їхали з токенів. */
:root:root {
	--wp--preset--color--theme-palette1: var(--sg-accent);
	--wp--preset--color--theme-palette2: var(--sg-accent-dark);
	--wp--preset--color--theme-palette3: var(--sg-ink);
	--wp--preset--color--theme-palette4: var(--sg-body);
	--wp--preset--color--theme-palette5: var(--sg-muted);
	--wp--preset--color--theme-palette6: var(--sg-faint);
	--wp--preset--color--theme-palette7: var(--sg-surface);
	--wp--preset--color--theme-palette8: var(--sg-card);
	--wp--preset--color--theme-palette9: var(--sg-white);
}