/**
 * Craquenet Academy - Design tokens (loja WooCommerce)
 *
 * Cor e fonte já existem globalmente em style.css (--green-*, --yellow-*,
 * --font-*) e NÃO são redefinidas aqui. Este arquivo só soma tokens
 * estruturais que style.css nunca nomeou (espaçamento, radius, shadow,
 * transition, z-index), extraídos dos valores que já se repetem no CSS
 * institucional (ex: --radius-2xl bate com .card/.product-card,
 * --space-2xl bate com .section-padding).
 *
 * Carregado só nas telas da loja (ver functions.php), depois de
 * craquenet-style.
 */

:root {
	/* Cores de estado (novas, vindas do design system da nova loja em
	 * DESIGN-CRAQUENET-LOJA/design-system.css - só faltavam aqui). */
	--color-muted: #5b6b5e;
	--color-success: #157a41;
	--color-success-bg: #eaf6ee;
	--color-warning: #8a5f00;
	--color-warning-bg: #fdf6e3;
	--color-error: #c0392b; /* única cor fora da paleta da marca, exceção deliberada só pra erro */
	--color-error-bg: #fbebe9;
	--color-rating: #a67c00;

	/* Escala tipográfica fluida (nova) */
	--text-display: clamp(2.6rem, 2rem + 3vw, 4.2rem);
	--text-h1: clamp(2.2rem, 1.8rem + 2vw, 3.2rem);
	--text-h2: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
	--text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--text-label: 0.8125rem;
	--text-body: 1rem;
	--text-body-lg: 1.05rem;
	--text-caption: 0.8125rem;

	/* Layout (novo) */
	--max-width: 1240px;
	--page-px: clamp(20px, 4vw, 48px);

	/* Espaçamento */
	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-xs: 12px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 32px;
	--space-xl: 48px;
	--space-2xl: 70px; /* mesmo valor de .section-padding */

	/* Radius */
	--radius-sm: 12px;
	--radius-md: 16px;
	--radius-lg: 20px;
	--radius-pill: 22px; /* pílulas: .nav-item, .tag-badge */
	--radius-xl: 24px;
	--radius-2xl: 28px; /* .card, .product-card, .unit-card */
	--radius-3xl: 32px; /* .btn */
	--radius-4xl: 36px;
	--radius-full: 999px;
	--radius-circle: 50%;

	/* Shadow */
	--shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 10px 30px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 16px 30px rgba(14, 76, 39, 0.2);
	--shadow-btn: 0px 4px 14px rgba(0, 0, 0, 0.25);
	--shadow-btn-hover: 0px 8px 20px rgba(0, 0, 0, 0.35);

	/* Transition */
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
	--transition-smooth: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

	/* Z-index */
	--z-base: 1;
	--z-dropdown: 10;
	--z-sticky: 20;
	--z-overlay: 40;
	--z-modal: 50;
	--z-toast: 60;
}