/*
 * CF Ecommerce Core — WooCommerce na paleta do design system.
 *
 * Por que este arquivo existe (e não vive no theme.json):
 * o WooCommerce Blocks traz ~838 regras próprias e apenas UMA delas consome
 * `--wp--preset--color--*`. Medido no laboratório em 06/09/2026. Ou seja: a
 * cor que hoje "acerta" no checkout chega por herança do cascade, não por
 * token — e tudo que o Woo pinta sozinho (bordas de campo, separadores,
 * raios) fica fora da paleta.
 *
 * O Woo expõe 18 custom properties `--wc-*`. Mapear essas 18 para os presets
 * do tema resolve o sistema inteiro sem sobrescrever seletor por seletor e
 * sem quebrar a edição visual no Gutenberg.
 *
 * Todo par cor-sobre-cor usado aqui já consta da matriz de CONTRASTE.md.
 */

:root,
.wc-block-components-form,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	/* Ação primária — mesmo par do elements.button do theme.json (19,19:1) */
	--wc-primary: var(--wp--preset--color--contrast);
	--wc-primary-text: var(--wp--preset--color--base);

	/* Ação secundária (18,07:1) */
	--wc-secondary: var(--wp--preset--color--surface);
	--wc-secondary-text: var(--wp--preset--color--contrast);

	/* Destaque e links — mesmo accent do elements.link (6,17:1) */
	--wc-highlight: var(--wp--preset--color--accent);
	--wc-highligh-text: var(--wp--preset--color--base); /* typo é do Woo, não nosso */

	/* Superfícies e texto terciário (5,33:1) */
	--wc-content-bg: var(--wp--preset--color--base);
	--wc-subtext: var(--wp--preset--color--muted);

	/* Traços: um só token de linha em toda a loja */
	--wc-separator-color: var(--wp--preset--color--line);
	--wc-form-border-color: var(--wp--preset--color--line);
	--wc-form-border-width: 1px;

	/* Raio: o mesmo do botão, para o checkout não ter três raios diferentes */
	--wc-form-border-radius: var(--wp--custom--radius--control);
	--wc-card-border-radius: var(--wp--custom--radius--control);

	/* Semântica. `sale` e `success` existem; info e warning ainda não —
	   lacuna registrada em CONTINUAR-AQUI § 7.5. Até lá, o Woo mantém os dele. */
	--wc-red: var(--wp--preset--color--sale);
	--wc-destructive: var(--wp--preset--color--sale);
	--wc-green: var(--wp--preset--color--success);
}

/*
 * O que as variáveis não alcançam.
 * O Woo pinta estes com valor literal no próprio CSS; sem regra explícita
 * eles ficam fora da paleta (medido: #2B2D2F no texto do campo, borda
 * rgba(43,45,47,.8), raios 4px e 5px).
 */
/* Especificidade casada com a do Woo — `.wc-block-components-form` + `[type]`
   dá (0,3,1), o mesmo do seletor dele. Como esta folha declara dependência de
   `wc-blocks-packages-style`, ela sai depois na ordem e vence sem `!important`. */
.wc-block-components-form .wc-block-components-text-input input[type],
.wc-block-components-form .wc-block-components-textarea[class],
.wc-block-components-form .wc-block-components-select__container[class],
.wc-block-components-form .wc-block-components-combobox-control input[type] {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
}

.wc-block-components-form .wc-block-components-text-input input[type]:focus,
.wc-block-components-form .wc-block-components-combobox-control input[type]:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--accent);
}

/* Rótulos e microcopy no token de texto terciário, não no cinza do Woo. */
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-form .wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--muted);
}

/* Painel de resumo: superfície do sistema, linha do sistema. */
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-order-summary,
.wc-block-cart__totals-title + * {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
}

/* Preço e total no mesmo peso tipográfico do catálogo. */
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	font-size: var(--wp--preset--font-size--price);
	color: var(--wp--preset--color--contrast);
}

/* Selo de promoção usa o token de promoção, não o vermelho do Woo. */
.wc-block-components-product-badge,
.wc-block-components-sale-badge {
	background-color: var(--wp--preset--color--sale-soft);
	color: var(--wp--preset--color--sale);
	border-color: var(--wp--preset--color--sale);
}