/* ============================================================
   Tokens — Grupo Calhas Santos
   Paleta extraída dos logos das duas marcas.
   ============================================================ */

:root {
	/* Base — aço e navy */
	--navy-900: #05101f;
	--navy-850: #071527;
	--navy-800: #0a1730;
	--navy-700: #10203d;
	--navy-600: #1a2d4e;
	--navy-500: #27395a;
	--navy-400: #3c4b61;

	--aco-100: #f6f7f7;
	--aco-200: #e7eaee;
	--aco-300: #cfd5dc;
	--aco-400: #c9d1da;
	--aco-500: #a9adb4;
	--aco-600: #727f90;
	--aco-700: #4d5a6b;

	--vermelho-500: #c81e24;
	--vermelho-400: #d82e2e;
	--vermelho-300: #e8474a;

	/* Papéis semânticos — tema escuro por padrão */
	--fundo: var(--navy-900);
	--fundo-alt: var(--navy-850);
	--fundo-claro: var(--aco-100);
	--superficie: rgba(255, 255, 255, 0.04);
	/* Mesma cor de --superficie sobre --fundo-alt, porém opaca: usada onde uma
	   fresta de subpixel deixaria o branco translúcido aparecer. */
	--superficie-solida: #111e30;
	--superficie-forte: rgba(255, 255, 255, 0.07);
	--borda: rgba(201, 209, 218, 0.16);
	--borda-forte: rgba(201, 209, 218, 0.28);

	--texto: #eef1f4;
	--texto-suave: #b6c0cc;
	--texto-fraco: #8d99a8;
	--texto-escuro: var(--navy-900);
	--texto-escuro-suave: #4a5768;

	/* Acento — trocado por marca via [data-brand] */
	--acento: var(--vermelho-500);
	--acento-claro: var(--vermelho-300);
	--acento-rgb: 200, 30, 36;

	/* Metal */
	--metal: linear-gradient(135deg, #ffffff 0%, #dfe5eb 18%, #9aa6b4 42%, #ffffff 55%, #b4bec9 72%, #7d8a99 100%);
	--metal-suave: linear-gradient(135deg, #f4f7fa 0%, #cdd6e0 40%, #ffffff 55%, #b9c3cf 100%);
	--metal-escuro: linear-gradient(135deg, #2a3a52 0%, #16223a 40%, #4a5a72 55%, #0d1626 100%);

	/* Tipografia */
	--fonte-titulo: "Archivo", "Segoe UI", system-ui, sans-serif;
	--fonte-texto: "Inter", "Segoe UI", system-ui, sans-serif;

	--t-hero: clamp(2.6rem, 6.2vw, 5.4rem);
	--t-h1: clamp(2.2rem, 4.6vw, 3.9rem);
	--t-h2: clamp(1.85rem, 3.4vw, 2.9rem);
	--t-h3: clamp(1.25rem, 1.9vw, 1.6rem);
	--t-h4: clamp(1.05rem, 1.4vw, 1.22rem);
	--t-corpo: clamp(1rem, 1.05vw, 1.09rem);
	--t-pequeno: 0.875rem;
	--t-micro: 0.75rem;

	/* Ritmo */
	--gap: clamp(1rem, 2vw, 1.75rem);
	--secao-y: clamp(4.5rem, 9vw, 9rem);
	--largura: 1280px;
	--largura-estreita: 900px;
	--pad-x: clamp(1.25rem, 4vw, 3.5rem);

	--raio: 4px;
	--raio-g: 10px;

	/* Sombras e brilhos */
	--sombra-1: 0 2px 8px rgba(0, 0, 0, 0.18);
	--sombra-2: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
	--sombra-3: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
	--sombra-clara: 0 24px 50px -24px rgba(10, 23, 48, 0.35);
	--brilho-acento: 0 0 0 1px rgba(var(--acento-rgb), 0.4), 0 12px 32px -12px rgba(var(--acento-rgb), 0.55);

	--transicao: 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--transicao-lenta: 700ms cubic-bezier(0.22, 0.61, 0.36, 1);

	--header-h: 78px;

	/* Borda esquerda/direita da coluna de conteúdo, para ancorar elementos
	   absolutos do hero na mesma margem do container. */
	--margem-conteudo: max(var(--pad-x), calc((100% - var(--largura)) / 2 + var(--pad-x)));
}

/* Acento e textura por marca */
[data-brand="cs"] {
	--acento: var(--vermelho-500);
	--acento-claro: var(--vermelho-300);
	--acento-rgb: 200, 30, 36;
	--marca-forma: 999px; /* curvas: vocabulário do monograma CS */
}

[data-brand="pap"] {
	--acento: var(--vermelho-400);
	--acento-claro: #ff5a5a;
	--acento-rgb: 216, 46, 46;
	--marca-forma: 0px; /* cortes retos: vocabulário estrutural */
}

[data-brand="grupo"] {
	--marca-forma: 2px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--transicao: 1ms;
		--transicao-lenta: 1ms;
	}
}