/* =========================================================================== Malune — TOKENS ESTE É O ÚNICO ARQUIVO DO TEMA QUE PODE TER COR EM HEXADECIMAL. Em qualquer outro lugar (estilo.css, style.css, PHP, JS), cor se escreve `var(--cor-alguma-coisa)`. É o critério de aceite §9 do PROMPT-LOJA.md. POR QUE ESTE ARQUIVO EXISTE. Até a v2.9.4 o tema tinha DOIS sistemas de token vivendo em paralelo e divergindo: - `estilo.css` definia os seus (`--primary`, `--muted`, `--m-*`) - `style.css` usava os do WordPress (`--wp--preset--color--*`, do theme.json) Eles não batiam. O hover do botão era `#ed4763` num e `#a8182f` no outro; o raio do botão era 10px num e 8px no outro; o carmim escuro era `#a3172f` aqui e `#a8182f` lá. Dava para ver a diferença na tela, botão ao lado de botão. Este arquivo acaba com isso: os dois nomes antigos continuam existindo, mas como APELIDO do token em português — ninguém precisa reescrever as 900 linhas de CSS herdadas, e mesmo assim só há um valor. DE ONDE VEM A COR. Do `theme.json`, sempre. O WordPress publica cada cor da paleta como `--wp--preset--color--` no de toda página, e é daí que os tokens abaixo leem. O hex depois da vírgula é só rede de segurança para o caso de a folha de presets não ter saído (o editor de blocos em certos contextos, por exemplo) — não é uma segunda fonte de verdade. Para mudar uma cor da marca: mexa no `theme.json`, não aqui. DECISÃO DE 12/09/2026 (§10 da AUDITORIA-REFORMULACAO-FASE-0.md). A §4 do PROMPT-LOJA.md pedia `#777777` para texto suave e `#ed4763` para hover. Os dois reprovam contraste AA, que a §9 do mesmo prompt exige: #777777 sobre branco = 4,48 (AA pede 4,5) — o Lighthouse já reprovava #ed4763 sob texto branco = 3,70 Valem os do theme.json, que passam: `#6b6b6b` (5,33) e `#a8182f` (7,40). =========================================================================== */ :root { /* ---- MARCA ---------------------------------------------------------- */ --cor-primaria: var(--wp--preset--color--carmim, #c71f3b); --cor-primaria-hover: var(--wp--preset--color--carmim-escuro, #a8182f); /* Rosa claro: só preenchimento decorativo e faixa. NUNCA texto nem fundo de botão — sob texto branco dá 3,70 e reprova AA. */ --cor-primaria-clara: var(--wp--preset--color--carmim-claro, #ed4763); --cor-primaria-suave: #fdf1f3; --cor-terracota: #A97B54; /* ---- SEMÂNTICAS ----------------------------------------------------- */ --cor-sucesso: var(--wp--preset--color--sucesso, #5A8F66); /* O verde de fundo (#5A8F66) dá só 3,78 sobre branco. Para TEXTO existe o tom escuro; o claro fica para preenchimento. */ --cor-sucesso-tinta: var(--wp--preset--color--sucesso-tinta, #3f6b4a); --cor-sucesso-fundo: var(--wp--preset--color--sucesso-fundo, #eef4ef); --cor-perigo: var(--wp--preset--color--erro, #C35C5C); --cor-perigo-hover: #a22828; /* ---- TEXTO E SUPERFÍCIE --------------------------------------------- */ --cor-texto: var(--wp--preset--color--tinta, #3d3d3d); --cor-texto-suave: var(--wp--preset--color--tinta-suave, #6b6b6b); --cor-texto-invertido: #ffffff; /* Texto sobre o rodapé escuro. Creme, não branco puro: sobre #3d3d3d dá 9,4 e cansa menos que o branco. */ --cor-texto-claro: #f2efed; --cor-fundo: var(--wp--preset--color--fundo, #faf8f7); --cor-card: var(--wp--preset--color--cartao, #ffffff); --cor-borda: var(--wp--preset--color--borda, #ece7e3); --cor-borda-suave: #f3eceb; /* ---- UTILITÁRIAS ----------------------------------------------------- */ /* Verde oficial do WhatsApp. Fica fora do theme.json de propósito: é cor de terceiro, não da Malune, e não deve aparecer no seletor do editor. */ --cor-whatsapp: #25D366; /* ---- RAIOS ---------------------------------------------------------- Alinhados ao theme.json e à §4 do prompt. O botão era 10px aqui e 8px lá; agora é 8px nos dois. */ --raio-padrao: 16px; /* cards, containers, seções */ --raio-botao: 8px; --raio-imagem: 8px; --raio-campo: 12px; /* inputs, selects, textarea */ --raio-msg: 14px; /* avisos do WooCommerce */ --raio-pilula: 100px; /* menu do header, badges */ /* ---- ELEVAÇÃO E FOCO ------------------------------------------------- */ --sombra: 0 4px 18px rgba(0, 0, 0, .04); --sombra-forte: 0 10px 34px rgba(0, 0, 0, .07); --sombra-gaveta: -8px 0 28px rgba(43, 39, 36, .12); /* Anel de foco visível — critério §9 ("foco visível"). Carmim a 35%: dá para ver em fundo claro e não vira borrão colorido. */ --foco: 0 0 0 3px rgba(199, 31, 59, .35); /* ---- MOVIMENTO ------------------------------------------------------- */ /* A §4 do prompt: 0,18s, só em cor. Sem transform, sem sombra. */ --transicao: .18s; /* ---- TIPOGRAFIA ------------------------------------------------------ */ --fonte-titulo: var(--wp--preset--font-family--titulo, Montserrat, 'Segoe UI', system-ui, sans-serif); --fonte-corpo: var(--wp--preset--font-family--corpo, 'Open Sans', -apple-system, 'Segoe UI', system-ui, sans-serif); /* ---- ESCALA DE PONTOS DE QUEBRA -------------------------------------- CSS puro não aceita var() dentro de @media, então estes não são lidos pelo navegador — estão aqui como CONTRATO: nenhuma media query nova do tema pode inventar um terceiro ponto. 640px celular (`max-width: 640px`) 781 / 782px o ponto do WordPress: onde `wp-block-columns` empilha. Usar `max-width: 781px` e `min-width: 782px` — nunca 782 nos dois, senão as duas regras valem juntas em exatamente 782px. Antes da Fase 1 havia SETE valores: 640, 720, 768, 780, 781, 782 e 820. Os quatro extras não vinham de decisão de layout — 820 no hero, 768 no cupom, 780 no rodapé, 720 nos benefícios —, e o resultado eram faixas de largura onde uma parte da página já tinha empilhado e outra não. Os quatro foram para 781px, que é onde o WordPress já quebrava de qualquer jeito. */ --quebra-celular: 640px; --quebra-wp: 781px; } /* =========================================================================== APELIDOS HERDADOS Nomes antigos que as ~900 linhas de `estilo.css` e `style.css` já usam. Continuam válidos, mas agora são ponteiro para o token acima — não têm valor próprio. Nada novo deve usá-los. Quando o CSS herdado for reescrito (fases 2 a 6), este bloco encolhe até sumir. Apagar um apelido antes disso quebra a regra que ainda o usa. =========================================================================== */ :root { --primary: var(--cor-primaria); /* ATENÇÃO: `--primary-dark` era #ed4763 — mais CLARO que o carmim, apesar do nome, e reprovando AA. Agora aponta para o hover de verdade. */ --primary-dark: var(--cor-primaria-hover); --success: var(--cor-sucesso); --danger: var(--cor-perigo); --text: var(--cor-texto); --muted: var(--cor-texto-suave); --bg: var(--cor-fundo); --card: var(--cor-card); --border: var(--cor-borda); --radius: var(--raio-padrao); --radius-btn: var(--raio-botao); --radius-campo: var(--raio-campo); --radius-msg: var(--raio-msg); --sombra-legada: var(--sombra); --m-carmim: var(--cor-primaria); --m-carmim-esc: var(--cor-primaria-hover); --m-carmim-claro: var(--cor-primaria-clara); --m-carmim-suave: var(--cor-primaria-suave); --m-creme: var(--cor-fundo); --m-cartao: var(--cor-card); --m-tinta: var(--cor-texto); --m-tinta-suave: var(--cor-texto-suave); --m-terracota: var(--cor-terracota); --m-borda: var(--cor-borda); --m-raio: var(--raio-padrao); --m-raio-sm: var(--raio-botao); --m-sombra: var(--sombra); --m-sombra-forte: var(--sombra-forte); }