/**
 * Checkout em etapas — tokens
 *
 * Único arquivo do plugin com valor literal de cor, medida ou duração. A
 * checkout.css só usa `var(--cee-*)`. Quatro cores são sobrescritas pela
 * configuração (WooCommerce → Configurações → Checkout em etapas):
 * --cee-moldura, --cee-moldura-texto, --cee-verde e --cee-link.
 *
 * FONTE: NENHUMA
 *
 * De propósito. A família vem do tema da loja: o plugin nunca declara
 * `font-family` a não ser `inherit` (campos e botões não herdam sozinhos).
 * O título da página usa o estilo de <h1> do próprio tema.
 *
 * DE ONDE VEM O RESTO
 *
 * Checkout da Chilli Beans: preto e branco, verde só em "confirmar compra",
 * cantos de 2px a 4px, linhas finas quase brancas, rótulos em caixa alta
 * espaçada, meios de pagamento como botões de borda preta.
 *
 * ONDE A REFERÊNCIA FOI AJUSTADA (contraste medido sobre branco)
 *
 *   verde do botão   #00913d dá 4,10:1 com texto branco. #007832 (o hover
 *                    da própria referência) dá 5,63:1.
 *   texto apagado    #bbb dá 1,92:1. #666 dá 5,74:1.
 *   borda de campo   #eee dá 1,16:1. #8c8c8c dá 3,36:1 (1.4.11 pede 3:1).
 *   link "editar"    #fa0 dá 1,97:1. #9a5b00 mantém o âmbar e dá 5,4:1.
 */

:root {
	/* ---------- Cor ---------- */
	--cee-moldura:        #000000; /* cabeçalho e rodapé */
	--cee-moldura-texto:  #FFFFFF;
	--cee-preto:          #000000;
	--cee-branco:         #FFFFFF;
	--cee-fundo:          #FFFFFF;
	--cee-fundo-suave:    #F5F5F5;

	--cee-texto:          #000000;
	--cee-texto-suave:    #666666;
	--cee-placeholder:    #767676;

	--cee-linha:          #EEEEEE;
	--cee-borda-controle: #8C8C8C;

	--cee-verde:          #007832;
	--cee-verde-hover:    color-mix(in srgb, var(--cee-verde) 78%, #000000);
	--cee-link:           #9A5B00;

	--cee-erro:           #CB333B;
	--cee-erro-suave:     #FFF0F0;
	--cee-foco:           #1A5FA8;

	/* ---------- Tipografia (só escala; a família é do tema) ---------- */
	--cee-peso:           400;
	--cee-peso-forte:     700;

	--cee-tam-xs:         0.8125rem;
	--cee-tam-sm:         0.9375rem;
	--cee-tam-base:       1rem;
	--cee-tam-lg:         1.125rem;
	--cee-tam-xl:         1.5rem;
	--cee-tam-titulo:     clamp(2rem, 1.4rem + 2.6vw, 3.25rem);

	--cee-entrelinha:       1.6;
	--cee-entrelinha-curta: 1.2;

	--cee-caixa-alta-espaco: 0.14em;
	--cee-botao-espaco:      0.02em;

	/* ---------- Espaço ---------- */
	--cee-e-3xs: 0.25rem;
	--cee-e-2xs: 0.5rem;
	--cee-e-xs:  0.75rem;
	--cee-e-sm:  1rem;
	--cee-e-md:  1.5rem;
	--cee-e-lg:  2rem;
	--cee-e-xl:  3rem;
	--cee-e-2xl: 4rem;

	/* ---------- Layout ---------- */
	--cee-largura:        1390px; /* container da referência */
	--cee-largura-email:  560px;
	--cee-coluna-resumo:  380px;
	--cee-coluna-rodape:  22rem;
	--cee-botao-pagamento: 11rem; /* largura mínima de cada meio de pagamento */
	--cee-margem:         clamp(var(--cee-e-sm), 3vw, var(--cee-e-xl));
	--cee-topo-altura:    60px;
	--cee-topo-altura-lg: 94px;
	--cee-titulo-etapa:   50px;
	--cee-linhas-coluna:  20;     /* linhas que o resumo da coluna ao lado ocupa */
	--cee-logo-altura:    32px;
	--cee-logo-altura-lg: 40px;

	/* ---------- Forma ---------- */
	--cee-raio:         4px;
	--cee-raio-campo:   2px;
	--cee-borda:        1px;
	--cee-borda-grossa: 2px;

	/* ---------- Controles ---------- */
	--cee-campo-altura:    3rem;
	--cee-email-altura:    3.5rem;
	--cee-botao-altura:    3rem;
	--cee-pagamento-altura: 4.5rem;
	--cee-toque:           44px;
	--cee-foco-largura:    3px;
	--cee-foco-distancia:  2px;

	--cee-miniatura: 72px;
	--cee-contador:  20px;

	/* ---------- Movimento ---------- */
	--cee-transicao: 160ms cubic-bezier(0.4, 0, 0.2, 1);
	--cee-duracao:   280ms;
	--cee-curva:     cubic-bezier(0.22, 0.61, 0.36, 1);
	--cee-subida:    12px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--cee-transicao: 0ms linear;
		--cee-duracao:   0ms;
		--cee-subida:    0px;
	}
}