/*!
 * CzarCommerce Design Tokens — FASE 12.1
 * -----------------------------------------------------------------------------
 * Tokens estáticos do design system próprio. Carregado em todas as páginas
 * do front-end e no editor de blocos pela classe CzarCommerce\Theme\DesignTokens.
 *
 * Camadas:
 *   - cor: aliases --czar-color-* apontam para as vars dinâmicas emitidas
 *     em :root pelo plugin core (CzarCommerce\FrontendCss) a partir da
 *     Palettes ativa. Não duplica valores nem força fallback que conflite
 *     com a paleta selecionada pelo lojista.
 *   - espaço, raio, sombra, z-index: valores fixos do design system.
 *
 * Regra de uso (FASE 12.1):
 *   Código NOVO consome APENAS variáveis declaradas aqui ou pelo FrontendCss.
 *   Código herdado continua intocado até as Fases 12.2+ migrarem incremental.
 */

:root {
	/* ---- Cor (aliases para as vars dinâmicas da paleta) ---- */
	--czar-color-primary:   var(--czar-primary);
	--czar-color-secondary: var(--czar-secondary);
	--czar-color-accent:    var(--czar-accent);
	--czar-color-bg:        var(--czar-bg);
	--czar-color-surface:   var(--czar-surface);
	--czar-color-text:      var(--czar-text);
	--czar-color-price:     var(--czar-price);
	--czar-color-sale:      var(--czar-sale);

	/* ---- Espaço (rem, 1rem = 16px) ---- */
	--czar-space-0:  0;
	--czar-space-1:  0.25rem;   /*  4px */
	--czar-space-2:  0.5rem;    /*  8px */
	--czar-space-3:  0.75rem;   /* 12px */
	--czar-space-4:  1rem;      /* 16px */
	--czar-space-5:  1.25rem;   /* 20px */
	--czar-space-6:  1.5rem;    /* 24px */
	--czar-space-8:  2rem;      /* 32px */
	--czar-space-12: 3rem;      /* 48px */
	--czar-space-16: 4rem;      /* 64px */
	--czar-space-20: 5rem;      /* 80px */
	--czar-space-24: 6rem;      /* 96px */

	/* ---- Raio ---- */
	--czar-radius-sm:   4px;
	--czar-radius-md:   8px;
	--czar-radius-lg:   16px;
	--czar-radius-full: 9999px;

	/* ---- Sombra ---- */
	--czar-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06),
	                  0 1px 1px rgba(15, 23, 42, 0.04);
	--czar-shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08),
	                  0 2px 4px rgba(15, 23, 42, 0.04);
	--czar-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12),
	                  0 4px 8px rgba(15, 23, 42, 0.06);

	/* ---- Z-index (camadas nomeadas; cada faixa reserva +10 para variações) ---- */
	--czar-z-dropdown: 1000;
	--czar-z-modal:    2000;
	--czar-z-toast:    3000;
}