/**
 * ShopTop Design System — Variáveis semânticas
 * ------------------------------------------------------------------
 * Camada intermediária entre os tokens primitivos (tokens.css) e os
 * componentes (buttons.css, cards.css, forms.css...).
 *
 * Em vez de os componentes usarem "--shoptop-color-primary-600"
 * diretamente, eles usam "--shoptop-btn-primary-bg". Isso permite
 * trocar o significado de uma cor (ex.: qual tom é usado no hover de
 * um botão) sem precisar caçar cada component que usa aquele tom.
 *
 * Regra: este arquivo só pode referenciar tokens de tokens.css.
 * Nenhum valor de cor/medida "cru" deve ser escrito aqui.
 *
 * Depende de: tokens.css (deve ser carregado antes).
 */

:root {
	/* ---------------------------------------------------------------
	 * Superfícies e texto
	 * --------------------------------------------------------------- */
	--shoptop-color-bg: #FFFFFF;
	--shoptop-color-bg-alt: #F8F7FC;
	/* Sprint E: 3ª opção de fundo de seção, para alternar branco / cinza-lilás
	 * (bg-alt) / azul bem suave (bg-alt-blue) e dar ritmo à Home sem perder
	 * leveza. */
	--shoptop-color-bg-alt-blue: var(--shoptop-color-primary-25);
	--shoptop-color-surface: #FFFFFF;
	--shoptop-color-border: var(--shoptop-gray-200);
	/* Sprint F: era --shoptop-gray-300 (#D1D5DB) — contraste ~1,5:1 contra
	 * fundo branco, abaixo do mínimo de 3:1 exigido pela WCAG 1.4.11 para
	 * bordas de campo/botão. --shoptop-gray-500 dá ~4,8:1. Afeta borda de
	 * botão secundário, todos os inputs (forms.css) e o tracejado de
	 * categoria-placeholder — nenhuma mudança de cor de texto/fundo. */
	--shoptop-color-border-strong: var(--shoptop-gray-500);

	--shoptop-color-text: var(--shoptop-color-ink-900);
	--shoptop-color-text-secondary: var(--shoptop-gray-500);
	--shoptop-color-text-muted: var(--shoptop-gray-400);
	--shoptop-color-text-inverse: #FFFFFF;

	/* Destaque pontual (ex.: ribbon de promoção especial) — reaproveita
	 * a identidade secundária, sem inventar uma 3ª família de matiz. */
	--shoptop-color-accent: var(--shoptop-color-secondary-500);

	/* ---------------------------------------------------------------
	 * Links
	 * --------------------------------------------------------------- */
	--shoptop-color-link: var(--shoptop-color-primary-600);
	--shoptop-color-link-hover: var(--shoptop-color-primary-700);

	/* ---------------------------------------------------------------
	 * Botões — primário (ações da ShopTop: comprar, adicionar ao carrinho)
	 * --------------------------------------------------------------- */
	--shoptop-btn-primary-bg: var(--shoptop-color-primary-600);
	--shoptop-btn-primary-bg-hover: var(--shoptop-color-primary-700);
	--shoptop-btn-primary-text: #FFFFFF;

	/* Botões — secundário/outline (ações neutras) */
	--shoptop-btn-secondary-bg: transparent;
	--shoptop-btn-secondary-bg-hover: var(--shoptop-gray-50);
	--shoptop-btn-secondary-border: var(--shoptop-color-border-strong);
	--shoptop-btn-secondary-text: var(--shoptop-color-text);

	/* Botões — parceiro/marketplace (visualmente distinto do primário,
	 * para nunca ser confundido com "comprar na ShopTop") */
	--shoptop-btn-partner-bg: var(--shoptop-color-partner-500);
	--shoptop-btn-partner-bg-hover: var(--shoptop-color-partner-700);
	--shoptop-btn-partner-text: #FFFFFF;

	/* Botões — afiliado (redireciona para fora da ShopTop) */
	--shoptop-btn-affiliate-bg: transparent;
	--shoptop-btn-affiliate-border: var(--shoptop-color-info-500);
	--shoptop-btn-affiliate-text: var(--shoptop-color-info-700);
	--shoptop-btn-affiliate-bg-hover: var(--shoptop-color-info-50);

	/* Botões — perigo (cancelar pedido, remover item) */
	--shoptop-btn-danger-bg: var(--shoptop-color-danger-500);
	--shoptop-btn-danger-bg-hover: var(--shoptop-color-danger-700);
	--shoptop-btn-danger-text: #FFFFFF;

	/* ---------------------------------------------------------------
	 * Cards
	 * --------------------------------------------------------------- */
	--shoptop-card-bg: var(--shoptop-color-surface);
	--shoptop-card-border: var(--shoptop-color-border);
	--shoptop-card-radius: var(--shoptop-radius-md);
	--shoptop-card-shadow: var(--shoptop-shadow-sm);
	--shoptop-card-shadow-hover: var(--shoptop-shadow-md);
	--shoptop-card-padding: var(--shoptop-space-3);

	/* ---------------------------------------------------------------
	 * Selos (badges) de vendedor/entrega — ver docs/DESIGN-SYSTEM.md
	 * --------------------------------------------------------------- */
	--shoptop-badge-proprio-bg: var(--shoptop-color-success-50);
	--shoptop-badge-proprio-text: var(--shoptop-color-success-700);
	--shoptop-badge-proprio-border: var(--shoptop-color-success-500);

	--shoptop-badge-parceiro-bg: var(--shoptop-color-partner-50);
	--shoptop-badge-parceiro-text: var(--shoptop-color-partner-700);
	--shoptop-badge-parceiro-border: var(--shoptop-color-partner-500);

	--shoptop-badge-afiliado-bg: var(--shoptop-color-info-50);
	--shoptop-badge-afiliado-text: var(--shoptop-color-info-700);
	--shoptop-badge-afiliado-border: var(--shoptop-color-info-500);

	--shoptop-badge-promo-bg: var(--shoptop-color-warning-50);
	--shoptop-badge-promo-text: var(--shoptop-color-warning-700);
	--shoptop-badge-promo-border: var(--shoptop-color-warning-500);

	/* ---------------------------------------------------------------
	 * Formulários (inputs, selects, textareas)
	 * --------------------------------------------------------------- */
	--shoptop-input-bg: #FFFFFF;
	--shoptop-input-border: var(--shoptop-color-border-strong);
	--shoptop-input-border-focus: var(--shoptop-color-primary-500);
	--shoptop-input-text: var(--shoptop-color-text);
	--shoptop-input-placeholder: var(--shoptop-color-text-muted);
	--shoptop-input-radius: var(--shoptop-radius-sm);

	--shoptop-field-error-border: var(--shoptop-color-danger-500);
	--shoptop-field-error-text: var(--shoptop-color-danger-700);
}