/**
 * ShopTop Design System — Tokens primitivos
 * ------------------------------------------------------------------
 * Este arquivo define os valores BRUTOS da identidade visual da
 * ShopTop: cores, escala de cinzas, espaçamento, raio de borda,
 * sombra e escala tipográfica.
 *
 * Estes tokens não devem ser usados diretamente nos componentes.
 * Eles existem apenas para alimentar as variáveis semânticas
 * definidas em variables.css (ex.: --shoptop-btn-primary-bg).
 *
 * Alterar um valor aqui reflete em todo o site de uma só vez.
 * Não duplicar estes valores em outros arquivos CSS.
 */

:root {
	/* ---------------------------------------------------------------
	 * Paleta principal (marca ShopTop — azul profundo)
	 * Sprint D: pivô de marca — o roxo que era primário vira
	 * "secondary/identidade" (ver abaixo). Escala completa 50–900.
	 * --------------------------------------------------------------- */
	/* Sprint E: azul quase-branco, mais suave que primary-50, só para
	 * alternância de fundo de seção (nunca usado em botão/badge). */
	--shoptop-color-primary-25: #F5F9FF;
	--shoptop-color-primary-50: #EFF6FF;
	--shoptop-color-primary-100: #DBEAFE;
	--shoptop-color-primary-200: #BFDBFE;
	--shoptop-color-primary-300: #93C5FD;
	--shoptop-color-primary-400: #60A5FA;
	--shoptop-color-primary-500: #2563EB;
	/* Sprint White Label G.16: primary-600/700 passam a apontar para
	 * --brand-primary-base/--brand-primary-hover em vez do hex direto —
	 * único ponto de override da cor de marca (Empresa > Cores). Sem
	 * configuração, os --brand-* caem exatamente nos mesmos hex de
	 * antes (zero mudança visual). Quando a Empresa tem "cor primária"
	 * preenchida, functions.php do tema injeta um <style> inline
	 * redefinindo os dois --brand-* com o mesmo hex configurado (perde
	 * o nuance de escurecer no hover — troca aceitável por não precisar
	 * calcular tom mais escuro em PHP, ver docs/ADR-0012). Só estes 2
	 * tokens são afetados — o resto da paleta (25–500, 800–900) continua
	 * fixo, não é objetivo desta sprint reescrever o Design System
	 * inteiro (seção 28 do pedido).
	 */
	--brand-primary-base: #1D4ED8;
	--brand-primary-hover: #1E40AF;
	--shoptop-color-primary-600: var(--brand-primary-base);
	--shoptop-color-primary-700: var(--brand-primary-hover);
	--shoptop-color-primary-800: #1E3A8A;
	--shoptop-color-primary-900: #172554;

	/* ---------------------------------------------------------------
	 * Paleta secundária (identidade — roxo/magenta, era o primário)
	 * --------------------------------------------------------------- */
	--shoptop-color-secondary-50: #FAF5FF;
	--shoptop-color-secondary-100: #F3E8FF;
	--shoptop-color-secondary-200: #E9D5FF;
	--shoptop-color-secondary-300: #D8B4FE;
	--shoptop-color-secondary-400: #C084FC;
	/* Sprint White Label G.16: mesmo mecanismo do primary-600/700 acima,
	 * para a "cor secundária" da Empresa. */
	--brand-secondary-base: #9333EA;
	--shoptop-color-secondary-500: var(--brand-secondary-base);
	--shoptop-color-secondary-600: #7E22CE;
	/* "Cor de destaque" da Empresa: token reservado, ainda sem nenhum
	 * componente consumindo (nenhum ponto óbvio e de baixo risco no
	 * Design System atual para mapear "destaque" sem também mudar
	 * primary/secondary já cobertos acima) — disponível para uma
	 * aplicação futura pontual (ex.: ribbon de promoção), sem efeito
	 * hoje. Ver docs/ADR-0012, seção "Cores — parcialmente aplicado". */
	--brand-accent: #9333EA;
	--shoptop-color-secondary-700: #6B21A8;
	--shoptop-color-secondary-800: #581C87;
	--shoptop-color-secondary-900: #3B0764;

	/* ---------------------------------------------------------------
	 * Cores semânticas de vendedor/entrega e ofertas
	 * --------------------------------------------------------------- */
	/* Verde — vendido e entregue pela ShopTop (produto próprio) */
	--shoptop-color-success-50: #F0FDF4;
	--shoptop-color-success-500: #16A34A;
	--shoptop-color-success-600: #15803D;
	--shoptop-color-success-700: #166534;

	/* Laranja — vendido e entregue por parceiro/marketplace */
	--shoptop-color-partner-50: #FFF7ED;
	--shoptop-color-partner-500: #F97316;
	--shoptop-color-partner-600: #EA580C;
	--shoptop-color-partner-700: #C2410C;

	/* Azul claro ("sky") — oferta de afiliado. Deliberadamente uma
	 * família diferente do primary (que agora também é azul), para
	 * não confundir "marca" com "selo de afiliado". */
	--shoptop-color-info-50: #F0F9FF;
	--shoptop-color-info-500: #0284C7;
	--shoptop-color-info-600: #0369A1;
	--shoptop-color-info-700: #075985;

	/* Amarelo — promoções / achadinhos / alertas */
	--shoptop-color-warning-50: #FFFBEB;
	--shoptop-color-warning-500: #F59E0B;
	--shoptop-color-warning-700: #B45309;

	/* Vermelho — erros e ações destrutivas */
	--shoptop-color-danger-50: #FEF2F2;
	--shoptop-color-danger-500: #DC2626;
	--shoptop-color-danger-700: #B91C1C;

	/* "Azul quase preto" para texto principal — distinto do cinza
	 * neutro (--shoptop-gray-900), que continua existindo para
	 * bordas/fundos neutros. */
	--shoptop-color-ink-900: #0F172A;

	/* ---------------------------------------------------------------
	 * Escala de cinzas (neutros)
	 * --------------------------------------------------------------- */
	--shoptop-gray-50: #F9FAFB;
	--shoptop-gray-100: #F3F4F6;
	--shoptop-gray-200: #E5E7EB;
	--shoptop-gray-300: #D1D5DB;
	--shoptop-gray-400: #9CA3AF;
	--shoptop-gray-500: #6B7280;
	--shoptop-gray-600: #4B5563;
	--shoptop-gray-700: #374151;
	--shoptop-gray-800: #1F2937;
	--shoptop-gray-900: #111827;

	/* ---------------------------------------------------------------
	 * Espaçamento — escala base 8px (com passo extra de 4px)
	 * --------------------------------------------------------------- */
	--shoptop-space-1: 4px;
	--shoptop-space-2: 8px;
	--shoptop-space-3: 16px;
	--shoptop-space-4: 24px;
	--shoptop-space-5: 32px;
	--shoptop-space-6: 48px;
	--shoptop-space-7: 64px;
	--shoptop-space-8: 96px;

	/* ---------------------------------------------------------------
	 * Raio de borda
	 * --------------------------------------------------------------- */
	--shoptop-radius-sm: 6px;
	--shoptop-radius-md: 10px;
	--shoptop-radius-lg: 16px;
	--shoptop-radius-full: 999px;

	/* ---------------------------------------------------------------
	 * Sombra (uso discreto — cards e dropdowns, nunca em texto/botão)
	 * --------------------------------------------------------------- */
	--shoptop-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
	--shoptop-shadow-md: 0 4px 10px rgba(17, 24, 39, 0.08);
	--shoptop-shadow-lg: 0 10px 24px rgba(17, 24, 39, 0.12);

	/* ---------------------------------------------------------------
	 * Tipografia — fonte de sistema (nenhuma fonte externa nesta etapa)
	 * --------------------------------------------------------------- */
	--shoptop-font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--shoptop-font-size-xs: 0.75rem;   /* 12px — legendas, selos pequenos */
	--shoptop-font-size-sm: 0.875rem;  /* 14px — texto secundário, h6 */
	--shoptop-font-size-base: 1rem;    /* 16px — corpo de texto */
	--shoptop-font-size-md: 1.125rem;  /* 18px — h5 */
	--shoptop-font-size-lg: 1.25rem;   /* 20px — h4 */
	--shoptop-font-size-xl: 1.5rem;    /* 24px — h3 */
	--shoptop-font-size-2xl: 2rem;     /* 32px — h2 */
	--shoptop-font-size-3xl: 2.5rem;   /* 40px — h1 */

	--shoptop-line-height-tight: 1.15;
	--shoptop-line-height-snug: 1.3;
	--shoptop-line-height-base: 1.5;

	--shoptop-font-weight-regular: 400;
	--shoptop-font-weight-medium: 500;
	--shoptop-font-weight-semibold: 600;
	--shoptop-font-weight-bold: 700;
}