/*
 * Tokens de design da Filhos Boutique.
 *
 * As onze cores do primeiro bloco sao as unicas editaveis no painel
 * (Filhos Boutique -> Cores). Tudo o que vem depois e derivado delas, entao
 * trocar uma cor no admin reestiliza o site inteiro de forma coerente, sem
 * precisar de um campo por estado.
 *
 * Os valores padrao foram amostrados pixel a pixel do mockup aprovado e do
 * logo original. Nao edite este arquivo para mudar a identidade: use o painel,
 * que imprime as sobrescritas em <style id="fb-tokens"> no cabecalho.
 */

:root {
	/* --- Cores da marca (editaveis no painel) --------------------------- */
	--fb-roxo-profundo: #4a2a5c; /* texto forte, titulos                    */
	--fb-roxo-escuro: #6b3f82;   /* hover de acao, enfase                   */
	--fb-roxo: #8e5c96;          /* cor de acao: botoes COMPRAR, CTA        */
	--fb-roxo-claro: #ac7eaf;    /* setas circulares, icones secundarios    */
	--fb-lavanda: #ead9ec;       /* barra de avisos do topo                 */
	--fb-lavanda-clara: #f7ebf5; /* chips de tamanho, superficies calmas    */
	--fb-rosa: #f8ecee;          /* cartoes de categoria                    */
	--fb-fundo: #fdf9fa;         /* fundo da pagina                         */
	--fb-fundo-topo: #fdf4f9;    /* cabecalho                               */
	--fb-rodape: #f6e6f3;        /* rodape                                  */
	--fb-dourado: #c2a35a;       /* filetes e ornamentos                    */

	/* Verde oficial do WhatsApp. Nao e editavel de proposito: e uma marca
	   de terceiro, e trocar a cor so prejudica o reconhecimento do botao. */
	--fb-whatsapp: #25d366;
	--fb-whatsapp-escuro: #1da851;

	/* --- Texto e superficies (derivados) -------------------------------- */
	--fb-texto: var(--fb-roxo-profundo);
	--fb-texto-suave: color-mix(in oklab, var(--fb-roxo-profundo) 68%, white);
	--fb-texto-tenue: color-mix(in oklab, var(--fb-roxo-profundo) 45%, white);
	--fb-texto-invertido: #fffdfe;
	--fb-superficie: #ffffff;
	--fb-superficie-calma: var(--fb-lavanda-clara);
	--fb-borda: color-mix(in oklab, var(--fb-roxo-claro) 34%, white);
	--fb-borda-forte: color-mix(in oklab, var(--fb-roxo-claro) 58%, white);

	/* --- Estados de acao (derivados do roxo principal) ------------------ */
	--fb-acao: var(--fb-roxo);
	--fb-acao-hover: color-mix(in oklab, var(--fb-roxo) 84%, black);
	--fb-acao-ativa: color-mix(in oklab, var(--fb-roxo) 70%, black);
	--fb-acao-suave: color-mix(in oklab, var(--fb-roxo) 12%, white);
	--fb-acao-texto: #ffffff;

	/* Anel de foco visivel: dourado sobre fundo claro passa no contraste e
	   nao se confunde com os estados roxos de hover. */
	--fb-foco: var(--fb-dourado);
	--fb-foco-anel: 0 0 0 3px color-mix(in oklab, var(--fb-dourado) 55%, white);

	--fb-sucesso: #2e7d5b;
	--fb-alerta: #b4682a;
	--fb-erro: #b3443f;

	/* --- Tipografia ----------------------------------------------------- */
	--fb-fonte-script: 'Parisienne', 'Snell Roundhand', cursive;
	--fb-fonte-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--fb-fonte-corpo: 'Nunito', ui-rounded, system-ui, -apple-system,
		'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Escala fluida: o minimo vale em 360px e o maximo em 1200px. */
	--fb-txt-xs: 0.75rem;
	--fb-txt-sm: 0.875rem;
	--fb-txt-base: 1rem;
	--fb-txt-md: clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem);
	--fb-txt-lg: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
	--fb-txt-xl: clamp(1.5rem, 1.33rem + 0.76vw, 2rem);
	--fb-txt-2xl: clamp(1.875rem, 1.6rem + 1.2vw, 2.75rem);
	--fb-txt-3xl: clamp(2.25rem, 1.75rem + 2.2vw, 3.75rem);

	--fb-peso-normal: 400;
	--fb-peso-medio: 600;
	--fb-peso-forte: 700;
	--fb-altura-apertada: 1.15;
	--fb-altura-titulo: 1.25;
	--fb-altura-corpo: 1.65;
	--fb-espacamento-caixa-alta: 0.18em;

	/* --- Espacamento (escala de 4px) ------------------------------------ */
	--fb-esp-1: 0.25rem;
	--fb-esp-2: 0.5rem;
	--fb-esp-3: 0.75rem;
	--fb-esp-4: 1rem;
	--fb-esp-5: 1.5rem;
	--fb-esp-6: 2rem;
	--fb-esp-7: 3rem;
	--fb-esp-8: 4rem;
	--fb-esp-9: 6rem;
	--fb-secao: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

	/* --- Layout --------------------------------------------------------- */
	--fb-largura: 1200px;
	--fb-largura-estreita: 760px;
	--fb-respiro: clamp(1rem, 0.6rem + 1.8vw, 2rem);

	/* --- Formas e sombras ----------------------------------------------- */
	--fb-raio-sm: 8px;
	--fb-raio: 14px;
	--fb-raio-lg: 22px;
	--fb-raio-pilula: 999px;
	--fb-sombra-1: 0 1px 2px rgb(74 42 92 / 0.05),
		0 2px 10px rgb(74 42 92 / 0.06);
	--fb-sombra-2: 0 6px 18px rgb(74 42 92 / 0.1);
	--fb-sombra-3: 0 14px 38px rgb(74 42 92 / 0.14);

	/* --- Movimento ------------------------------------------------------ */
	--fb-transicao: 180ms cubic-bezier(0.4, 0, 0.2, 1);
	--fb-transicao-lenta: 320ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Proporcao dos cards de produto: 3:4 retrato, igual ao mockup. */
	--fb-proporcao-produto: 3 / 4;
}

/*
 * Quem pede menos movimento recebe menos movimento. Vale para o site inteiro,
 * inclusive para o carrossel, que tambem checa isso no JavaScript.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--fb-transicao: 0ms;
		--fb-transicao-lenta: 0ms;
	}
}