/*
Sem border-radius em nenhuma regra abaixo: a UI real do arterio-next (globals.css +
componentes) é totalmente flat/sharp, mesmo o design system ter um token de raio
(--radius: 0.625rem) na paleta base — os componentes de página o sobrescrevem para
cantos retos. Manter assim para bater com a referência visual.
*/

/*
Paleta: preto neutro com escala de opacidade, que é o que o arterio-next de fato
renderiza. O globals.css dele declara `--primary: #030213` e
`--muted-foreground: #717182`, mas nenhuma página usa esses tokens — os componentes
escrevem `text-black` (101 ocorrências), `text-black/60` (82), `text-black/40` (29),
`border-black/10` (38). Os dois tokens declarados puxam para azul-roxo, e adotá-los
tingia de azul todo texto secundário do site. A referência é o que renderiza, não o
que está declarado.
*/

:root {
	--arterio-bg: #ffffff;
	--arterio-text: #000000;
	--arterio-text-80: rgba(0, 0, 0, 0.8);
	--arterio-text-60: rgba(0, 0, 0, 0.6);
	--arterio-text-40: rgba(0, 0, 0, 0.4);
	--arterio-text-20: rgba(0, 0, 0, 0.2);
	--arterio-text-10: rgba(0, 0, 0, 0.1);

	/* Nome antigo mantido como apelido: está espalhado pelos outros arquivos e o
	valor certo agora é o mesmo /60 do original. */
	--arterio-text-muted: var(--arterio-text-60);

	/* `bg-neutral-100` — fundo das molduras de imagem de produto. */
	--arterio-surface-image: #f5f5f5;
	--arterio-surface-muted: #ececf0;
	--arterio-accent: #e9ebef;
	--arterio-destructive: #d4183d;

	--arterio-border: rgba(0, 0, 0, 0.1);
	--arterio-border-soft: rgba(0, 0, 0, 0.05);
	--arterio-border-strong: rgba(0, 0, 0, 0.2);

	--arterio-weight-normal: 400;
	--arterio-weight-medium: 500;

	--arterio-space-1: 0.5rem;
	--arterio-space-2: 1rem;
	--arterio-space-3: 1.5rem;
	--arterio-space-4: 2rem;
	--arterio-space-5: 3rem;
	--arterio-space-6: 4rem;
}

body {
	background-color: var(--arterio-bg);
	color: var(--arterio-text);
	font-weight: var(--arterio-weight-normal);
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--arterio-weight-medium);
	line-height: 1.5;
	color: var(--arterio-text);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

body, p, li, input, textarea, select {
	font-size: 1rem;
}

.entry-meta, .ast-comment-meta, small, .woocommerce-breadcrumb {
	color: var(--arterio-text-muted);
}

/* O Astra sublinha todo link de conteúdo (`.ast-single-post .entry-content a` e
`.ast-comment-content a`). A referência da marca não usa sublinhado em lugar nenhum,
então desligamos na mesma especificidade — sem !important, só ordem de carregamento. */
.ast-single-post .entry-content a,
.ast-comment-content a,
.ast-single-post .entry-content a:hover,
.ast-comment-content a:hover {
	text-decoration: none;
}

*,
*::before,
*::after {
	border-color: var(--arterio-border);
}

.ast-header-break-point .site-header,
.site-footer {
	background-color: var(--arterio-bg);
}

.woocommerce-message,
.woocommerce-info {
	background-color: var(--arterio-surface-muted);
}

.woocommerce-error {
	background-color: var(--arterio-destructive);
	color: #ffffff;
}

/*
Nada de hover global aqui, de propósito.

Havia um `transform: scale(1.05)` + `opacity: .8` em todo `a`, `button` e `.button`.
Isso não vem do original: no arterio-next inteiro há `hover:scale-105` em dois
lugares (a imagem do card de produto) e `hover:opacity-60` em um (o logo). Aplicar
em tudo fazia cada link do site pular ao passar o mouse — parte do que se via como
acabamento cru.

O padrão do original é transição de COR, não de tamanho: `transition-colors` do
texto /60 para preto cheio. Está declarado em cada componente do tema.
*/
a,
button,
.ast-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button {
	transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.arterio-header-logo:hover img {
	opacity: 0.6;
}

/* Cor de link.

O Astra pinta todo `a` com o azul do tema-pai (#046bd2). No arterio-next não existe
link azul em lugar nenhum: o link É a cor do texto, e o hover clareia para /60. Sem
esta regra o azul reaparecia em qualquer link que não tivesse tratamento próprio —
título de produto, logo, botões de opção do card. */
a {
	color: var(--arterio-text);
}

a:hover {
	color: var(--arterio-text-60);
}

/* Ícones do cabeçalho (conta, sacola): o Astra os entrega num cinza-azulado
(#1e293b). No original são `text-black/60`, como os links do menu. */
.ast-icon,
.ahfb-svg-iconset,
.ast-header-account-wrap,
.ast-cart-menu-wrap,
/* O botão sobreposto ao card tem regra própria no Astra (`.ast-on-card-button
.ahfb-svg-iconset`), com duas classes — precisa ser repetida para empatar. */
.ast-on-card-button .ahfb-svg-iconset {
	color: var(--arterio-text-60);
}

.ast-icon svg,
.ahfb-svg-iconset svg {
	fill: currentColor;
}