/**
 * tokens.css — Os tokens do tema.
 *
 * ┌─ ONDE A COR MORA ────────────────────────────────────────────────────────────┐
 * │ NO theme.json, e em lugar NENHUM mais. Este arquivo não define cor: ele faz   │
 * │ ALIAS das presets que o WordPress gera a partir do theme.json.                │
 * │                                                                               │
 * │ Trocar uma cor do site = editar UMA linha do theme.json. A troca vale no      │
 * │ front E dentro do editor Gutenberg de uma vez — que é exatamente o que a      │
 * │ regra "cor mora em token" queria, e o que editor styles exige.                │
 * │                                                                               │
 * │ O valor depois da vírgula em cada var() é só fallback, para o caso de as       │
 * │ global styles não terem sido geradas. Não edite ele: edite o theme.json.      │
 * └──────────────────────────────────────────────────────────────────────────────┘
 *
 * ⚠️ #1A8F47 é PROIBIDO como fundo de botão: mede 4,15:1 contra branco e reprova
 *    o AA (mínimo 4,5:1). O verde de botão é #188643 (4,64:1).
 *    Mesma armadilha, dois pares que o mockup trazia e também reprovam como TEXTO:
 *    #1E88E5 (3,68:1) e #EC0F8E (4,18:1). Por isso existem quatro tokens distintos:
 *      --cor-link       #1567B8  (5,79:1) → texto de link
 *      --cor-link-hover #D40C80  (5,04:1) → hover de texto
 *      --cor-foco       #1E88E5  → SÓ anel de foco (aí o requisito é 3:1, e passa)
 *      --cor-magenta    #EC0F8E  → SÓ decoração e texto grande
 */

:root {
	/* ── Cor (alias do theme.json) ─────────────────────────────────────────── */
	--cor-marca:         var(--wp--preset--color--marca, #5B1E9A);
	--cor-marca-clara:   var(--wp--preset--color--marca-clara, #7A2FC0);
	--cor-marca-escura:  var(--wp--preset--color--marca-escura, #2A1240);
	--cor-magenta:       var(--wp--preset--color--magenta, #EC0F8E);
	/*
	 * O MESMO magenta escuro do --cor-link-hover, com o nome do que ele é: o magenta que
	 * pode ser TEXTO. Existe porque rótulo pequeno em magenta não é "hover de link", e
	 * chamá-lo assim empurrava quem escrevia CSS de volta para o --cor-magenta decorativo
	 * — foi exatamente o que aconteceu no eyebrow e no número do passo (13px, 4,2:1).
	 */
	--cor-magenta-texto: var(--wp--preset--color--magenta-texto, #D40C80);
	--cor-link-hover:    var(--wp--preset--color--magenta-texto, #D40C80);
	--cor-amarelo:       var(--wp--preset--color--amarelo, #FDB515);
	--cor-verde:         var(--wp--preset--color--verde, #7BC142);
	--cor-whatsapp:      var(--wp--preset--color--whatsapp, #188643);
	--cor-link:          var(--wp--preset--color--azul-texto, #1567B8);
	--cor-foco:          var(--wp--preset--color--foco, #1E88E5);
	--cor-texto:         var(--wp--preset--color--texto, #2A1240);
	--cor-texto-suave:   var(--wp--preset--color--texto-suave, #6B5B7B);
	--cor-texto-claro:   var(--wp--preset--color--texto-claro, #D9C6EF);
	--cor-borda:         var(--wp--preset--color--borda, #F0E8FA);
	--cor-superficie:    var(--wp--preset--color--superficie, #FBF7FF);
	--cor-fundo:         var(--wp--preset--color--fundo, #FFFFFF);

	/*
	 * Cores de apoio: também vêm do theme.json, mas de settings.custom em vez da
	 * palette — assim elas NÃO aparecem no seletor de cor do cliente (ele escolhe entre
	 * as 16 da marca, não entre 29), e mesmo assim o hex continua morando num lugar só.
	 */
	--cor-whatsapp-hover: var(--wp--custom--cor--whatsapp-hover, #14713A);
	--cor-sobre-roxo:     var(--wp--custom--cor--sobre-roxo, #EFE3FB);
	--cor-migalha:        var(--wp--custom--cor--migalha, #CBB6E0);
	--cor-borda-campo:    var(--wp--custom--cor--borda-campo, #E6DBF5);
	--cor-borda-suave:    var(--wp--custom--cor--borda-suave, #E0D0F5);
	--cor-icone-suave:    var(--wp--custom--cor--icone-suave, #8B7BA0);
	--cor-listra:         var(--wp--custom--cor--listra, #F4ECFD);
	--cor-ambar-fundo:    var(--wp--custom--cor--ambar-fundo, #FFF8E5);
	--cor-ambar-chip:     var(--wp--custom--cor--ambar-chip, #FFF3CD);
	--cor-ambar-borda:    var(--wp--custom--cor--ambar-borda, #F7DCA8);
	--cor-ambar-texto:    var(--wp--custom--cor--ambar-texto, #8A5100);
	--cor-temporada-a:    var(--wp--custom--cor--temporada-a, #FFF6E0);
	--cor-temporada-b:    var(--wp--custom--cor--temporada-b, #FDEBF6);
	/*
	 * Pontas ESCURAS dos gradientes de avatar da prova social. Existem porque a
	 * inicial do depoimento é branca sobre o gradiente, e as pontas festivas
	 * reprovavam AA como fundo de texto: #FDB515 dá 1,78:1 e #7BC142 dá 2,20:1
	 * contra branco. Mesmo matiz, luminância baixada até passar — ver tokens.css
	 * acima, é a mesma regra do --cor-link.
	 */
	--cor-avatar-ambar:   var(--wp--custom--cor--avatar-ambar, #9E6D01);
	--cor-avatar-verde:   var(--wp--custom--cor--avatar-verde, #52822B);

	/* ── Tipografia (alias do theme.json) ──────────────────────────────────── */
	--fonte-titulo: var(--wp--preset--font-family--titulo, Fredoka, ui-rounded, system-ui, sans-serif);
	--fonte-corpo:  var(--wp--preset--font-family--corpo, Nunito, system-ui, sans-serif);

	/* ── Medidas ───────────────────────────────────────────────────────────── */
	--largura-barra:     1400px;   /* barra do header — medida, não estimada */
	--largura-conteudo:  1200px;
	--largura-prosa:     820px;

	/* ── Raio ──────────────────────────────────────────────────────────────── */
	--raio-p:   12px;
	--raio-m:   20px;
	--raio-g:   28px;
	--raio-max: 999px;

	/* ── Sombra ────────────────────────────────────────────────────────────── */
	--sombra-card:  0 6px 20px rgba(91, 30, 154, .08);
	--sombra-barra: 0 2px 12px rgba(0, 0, 0, .08);
	--sombra-alta:  0 18px 44px rgba(91, 30, 154, .28);
	--sombra-wa:    0 8px 22px rgba(24, 134, 67, .40);

	/* ── Movimento (card "Movimento" do design system) ─────────────────────── */
	--curva:       cubic-bezier(.33, 1, .68, 1);
	--curva-saida: cubic-bezier(.32, 0, .67, 0);
	--dur-rapida:  .15s;
	--dur-media:   .3s;
	--dur-lenta:   .45s;

	/* Breakpoint do menu: abaixo disso, 8 categorias + CTA não cabem e vira drawer. */
	--bp-menu: 1200px;
}