/*
 * tokens.css — Custom Properties do tema "O Mecânico 2026".
 *
 * Os valores foram levantados a partir da análise visual de
 * templates/assets/css/main.css e scheme.css (paleta, tipografia,
 * espaçamentos, raios e sombras) e dos estilos aplicados nos HTMLs de
 * referência. Nenhuma regra foi copiada literalmente do CSS original: aqui
 * só existem declarações de variáveis.
 *
 * Fontes: Poppins (texto) e Heebo (títulos) — auto-hospedadas nas tasks
 * 016 e 026.
 */

:root {
	color-scheme: light;

	/* ---------- Cores de marca ---------- */
	/*
	 * Azul da marca, tirado do logo. Como fundo com texto branco dá 9,60:1 e
	 * como texto sobre branco também 9,60:1 — bem acima do 4,5:1 do AA.
	 *
	 * Sobre fundo escuro ele desaparece (1,95:1 no rodapé), então o uso como
	 * TEXTO passa por --mec-color-accent-text, que clareia nesses contextos.
	 * Como fundo o azul continua valendo em qualquer lugar, porque o texto
	 * em cima é branco.
	 */
	--mec-color-accent: #004489;
	--mec-color-accent-contrast: #ffffff;
	--mec-color-accent-text: #004489;
	--mec-color-accent-on-dark: #3d8fdd; /* 5,50:1 sobre o rodapé */

	/*
	 * O azul claro da marca, que o item de menu ativo já usava, passa a valer
	 * para TODO hover que pinta superfície — botão, tag, badge, paginação.
	 *
	 * O rótulo por cima é escuro, e não claro: com texto claro este azul fica
	 * em 2,5:1 e reprova no AA; com `--mec-color-surface-dark` sobe para
	 * 5,85:1 no modo claro e 6,88:1 no escuro. O token de texto foi escolhido
	 * pelo PO e é o certo: ele continua escuro no modo escuro, enquanto
	 * `--mec-color-heading`, que tem o mesmo valor no claro, inverte para
	 * `#f5f5f5` e derrubaria o contraste.
	 *
	 * Hover que só troca a COR DO TEXTO não usa este token: como cor de letra
	 * sobre branco o azul claro dá os mesmos 2,75:1. Esses continuam em
	 * `--mec-color-accent-text` (9,60:1).
	 */
	--mec-color-accent-hover: #2ea3f2;
	--mec-color-menu-active: #2ea3f2;
	--mec-color-menu-active-text: var(--mec-color-surface-dark);

	/*
	 * Vermelho da REVISTA CARRO — site-irmão da Infini Editora, não a marca
	 * daqui. Vive num token, e não solto no CSS do bloco, pelo mesmo motivo de
	 * todo token deste arquivo: nomeado, documentado, achável — mas é
	 * deliberadamente um token À PARTE de `--mec-color-accent`, porque não é
	 * a cor de marca do Mecânico e não deve vazar pra nenhum outro componente
	 * que reaproveite `--mec-color-accent` sem querer.
	 *
	 * Usado só pelo bloco "Destaques Revista Carro" (título, selo, links,
	 * botão) — nunca como cor de marca do site.
	 */
	--mec-color-revistacarro: #e02b20;

	/*
	 * Mesmo raciocínio do token acima, agora para os blocos "Youtube" e
	 * "Instagram" da home: cor da PLATAFORMA, não da marca do Mecânico —
	 * token à parte de `--mec-color-accent` de propósito.
	 *
	 * O Instagram não tem uma cor de marca única — o logo real é um degradê
	 * (`#405de6 → #833ab4 → #e1306c → #fd1d1d → #fcaf45`). `#e1306c` é uma
	 * aproximação sólida, suficiente pro texto do subtítulo — nunca no
	 * título principal do bloco, que segue no branco fixo do tema.
	 */
	--mec-color-youtube: #ff0000;
	--mec-color-instagram: #e1306c;

	/* ---------- Texto ---------- */
	--mec-color-text: #595c5f;
	/*
	 * Corpo do artigo: mais escuro que o texto de interface, porque leitura
	 * longa pede mais contraste que rótulo de listagem. É token e não literal
	 * justamente para ter o par no escuro — como literal, o corpo do post ficava
	 * #333 sobre #17191c, razão de 1,39.
	 */
	--mec-color-text-strong: #333333;
	/*
	 * Texto da pílula de tag. Vale um token próprio porque o modelo usa aqui um
	 * cinza que não é o do corpo — #616161 contra #595c5f —, e trocar por
	 * "quase igual" derruba a auditoria de fidelidade, como derrubou.
	 */
	--mec-color-tag-text: #616161;
	--mec-color-heading: #1b2228;
	--mec-color-muted: #a0a0a0;
	--mec-color-meta: #a0a0a0;
	--mec-color-inverse: #ffffff;
	/*
	 * Pedido da cliente: rodapé em tom de cinza, não mais quase-preto. O texto
	 * muted assume o valor original do fundo (#0d1317), o que já garante
	 * contraste alto sem inventar cor nova.
	 *
	 * `--mec-color-footer-bg` é hex FIXO, e não `var(--mec-color-muted)` como
	 * na primeira versão: alguns tons acima do que esse token vale (pedido da
	 * cliente, ajustado depois de ver o resultado — #a0a0a0, depois #adadad,
	 * agora #dadada), e o rodapé já é a exceção que não acompanha o tema
	 * claro/escuro do site (ver `.socials_widget` em layout.css) — não faria
	 * sentido herdar o ajuste de modo escuro de um token que não é mais usado
	 * aqui.
	 */
	--mec-color-footer-bg: #dadada;
	--mec-color-footer-muted: #0d1317;

	/* ---------- Superfícies ---------- */
	--mec-color-bg: #ffffff;
	--mec-color-surface: #fafafa;
	--mec-color-surface-alt: #f5f5f5;
	--mec-color-surface-dark: #1b2228;
	--mec-color-overlay: rgb(0 0 0 / 45%);

	/* ---------- Bordas e divisores ---------- */
	--mec-color-border: #eeeeee;
	--mec-color-border-strong: #e0e0e0;
	--mec-color-border-dark: rgb(255 255 255 / 15%);

	/* ---------- Links ---------- */
	--mec-color-link: var(--mec-color-heading);
	--mec-color-link-hover: var(--mec-color-accent-text);

	/* ---------- Tipografia ---------- */
	--mec-font-body: "Heebo", Helvetica, Arial, sans-serif;
	--mec-font-heading: "Heebo", Helvetica, Arial, sans-serif;
	/* Títulos de post e menu principal são Poppins no template de referência. */
	--mec-font-title: "Poppins", Helvetica, Arial, sans-serif;
	--mec-font-mono: "Lucida Console", Monaco, monospace;

	--mec-font-size-xs: 0.6875rem;   /* 11px */
	--mec-font-size-sm: 0.75rem;     /* 12px */
	--mec-font-size-base: 0.875rem;  /* 14px — base do template */
	--mec-font-size-md: 1rem;        /* 16px */
	--mec-font-size-lg: 1.125rem;    /* 18px */
	--mec-font-size-xl: 1.375rem;    /* 22px */
	--mec-font-size-2xl: 1.625rem;   /* 26px — título do hero */
	--mec-font-size-3xl: 2rem;       /* 32px */
	--mec-font-size-4xl: 2.25rem;    /* 36px — h1 / título de arquivo */

	/*
	 * 300 não tem face auto-hospedada — Heebo vem em 400 e 700 —, então o
	 * navegador resolve com a 400. Existe porque é o peso que o modelo pede nos
	 * campos de formulário, e para o dia em que a face entrar.
	 */
	--mec-font-weight-light: 300;
	--mec-font-weight-regular: 400;
	--mec-font-weight-medium: 500;
	--mec-font-weight-semibold: 600;
	--mec-font-weight-bold: 700;

	--mec-line-height-tight: 1.2;
	--mec-line-height-heading: 1.4;
	/*
	 * Com unidade: o modelo usa 1.6em, que herda como comprimento fixo
	 * (22.4px) em vez de recalcular por font-size em cada descendente. É o
	 * que mantém meta, legenda e breadcrumb com a mesma entrelinha do corpo.
	 */
	--mec-line-height-base: 1.6em;

	--mec-letter-spacing-wide: 0.05em;

	/* ---------- Espaçamento ---------- */
	--mec-space-3xs: 0.25rem;  /* 4px */
	--mec-space-2xs: 0.3125rem;/* 5px */
	--mec-space-xs: 0.5rem;    /* 8px */
	--mec-space-sm: 0.625rem;  /* 10px */
	--mec-space-md: 0.9375rem; /* 15px */
	--mec-space-lg: 1.25rem;   /* 20px */
	--mec-space-xl: 1.875rem;  /* 30px */
	--mec-space-2xl: 2.5rem;   /* 40px */
	--mec-space-3xl: 3.75rem;  /* 60px */

	/* ---------- Grid ---------- */
	--mec-container-max: 1170px;
	/*
	 * Um degrau acima do contêiner, para o `alignwide` dos blocos ter para onde
	 * crescer. Sem ele, "largo" e "comum" dariam na mesma medida e o controle
	 * do editor não faria nada.
	 */
	--mec-container-wide: 1400px;
	--mec-gutter: 1.875rem;
	--mec-sidebar-width: 33.3333%;

	/*
	 * Recuo lateral do container — não confundir com --mec-gutter acima, que é
	 * o vão de 30px entre colunas. A `.row` cancela este recuo com margem
	 * negativa, então os dois precisam sair da mesma variável: se divergirem, a
	 * linha vaza da viewport. Em <= 480px o valor encolhe em responsive.css, e
	 * os dois lados encolhem juntos.
	 */
	--mec-container-pad: var(--mec-space-md);

	/*
	 * ---------- Formas ----------
	 *
	 * O template de referência é de canto reto: imagens, thumbs, cards, campos
	 * e botões não têm arredondamento. Por isso não existe token de raio
	 * retangular — se algum componente precisar de canto redondo, está fugindo
	 * do design.
	 *
	 * A exceção é o círculo completo, que o original aplica em avatares
	 * (.mec_author_image img, .mec_meta_author img, .mec_accountlink img) e em
	 * elementos redondos por natureza, como dots e botões circulares.
	 */
	--mec-radius-circle: 100%;

	/* ---------- Sombras ---------- */
	--mec-shadow-sm: 0 1px 3px rgb(0 0 0 / 8%);
	--mec-shadow-md: 0 2px 8px rgb(0 0 0 / 10%);
	--mec-shadow-lg: 0 10px 30px rgb(0 0 0 / 15%);

	/* ---------- Movimento ---------- */
	--mec-transition-fast: 150ms ease;
	--mec-transition-base: 250ms ease;

	/* ---------- Camadas ---------- */
	--mec-z-header: 100;
	--mec-z-sticky: 200;
	--mec-z-offcanvas: 300;
	--mec-z-overlay: 400;
}

/*
 * Paleta escura. Aplicada por preferência do sistema e sobrescrita pelo
 * atributo data-mec-theme, que o toggle da task 020 grava no <html>.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-mec-theme="light"]) {
		color-scheme: dark;

		--mec-color-text: #b4b8bb;
		/* Entre o texto de interface e o título, como no claro — só que subindo. */
		--mec-color-text-strong: #d5d8da;
		--mec-color-tag-text: var(--mec-color-text);
		--mec-color-heading: #f5f5f5;
		/*
		 * #949494 e não #8a8a8a: sobre `surface-alt` (#26292e) o cinza antigo
		 * dava razão 4,23, abaixo do mínimo de 4,5 para corpo de texto — é o
		 * cinza da descrição do autor. Com este, 4,83.
		 */
		--mec-color-muted: #949494;
		--mec-color-meta: #9a9a9a;

		--mec-color-bg: #17191c;
		--mec-color-surface: #1f2226;
		--mec-color-surface-alt: #26292e;
		--mec-color-surface-dark: #0f1113;

		--mec-color-border: #2c2f34;
		--mec-color-border-strong: #3a3e44;

		--mec-color-link: var(--mec-color-heading);
		--mec-color-accent-text: var(--mec-color-accent-on-dark);
	}
}

:root[data-mec-theme="dark"] {
	color-scheme: dark;

	--mec-color-text: #b4b8bb;
	--mec-color-text-strong: #d5d8da;
	--mec-color-tag-text: var(--mec-color-text);
	--mec-color-heading: #f5f5f5;
	--mec-color-muted: #949494;
	--mec-color-meta: #9a9a9a;

	--mec-color-bg: #17191c;
	--mec-color-surface: #1f2226;
	--mec-color-surface-alt: #26292e;
	--mec-color-surface-dark: #0f1113;

	--mec-color-border: #2c2f34;
	--mec-color-border-strong: #3a3e44;

	--mec-color-link: var(--mec-color-heading);
	--mec-color-accent-text: var(--mec-color-accent-on-dark);
}