/* Cópia do canon para os capítulos 4, 5 e 11 (tamanho, pensar, novo) do site IA explicada: idêntica a site/comum-agentes/farol.css em 28/10/2026, para os três não dependerem do módulo de outra sessão. Não acrescente cor aqui. */
/* ==========================================================================
farol.css — o canon CIn-UFPE como código
Fonte da verdade: farol-materiais/diagnosticos/software/02-fase-1-discovery/DESIGN-cinufpe-canon.md
Decisões: FAROL-0287 (o design system do FAROL é o canon), FAROL-0299 (gráfico: rampa de um
vermelho, identidade por posição), AX-0012 (sem modo escuro).
Exemplo aplicado: farol-ia-site/db1/devolutiva/ — os nomes de classe seguem os de lá.
Quatro cores, sem escala tonal. Superfície chapada: profundidade vem de TROCAR O FUNDO
(branco ↔ vermelho ↔ preto), nunca de sombra ou gradiente. Não acrescente cor aqui.
A fonte vem de fora: do Google Fonts para Hanken Grotesk (ver inicio.html).
========================================================================== */
:root {
/* --- as quatro cores do canon, e o branco implícito --- */
--farol-vermelho: #DB1E2F; /* PANTONE 1795 C */
--farol-vermelho-escuro: #AF0421; /* PANTONE 200 C — hover/ativo; nunca figura sobre o vermelho */
--farol-preto: #231F20; /* PANTONE 419 C — não é #000 */
--farol-cinza: #E0E1E0; /* PANTONE 664 C — o único cinza */
--farol-branco: #FFFFFF;
/* --- papéis (use estes nos componentes) --- */
--fundo: var(--farol-branco);
--tinta: var(--farol-preto);
--acento: var(--farol-vermelho);
--acento-ativo: var(--farol-vermelho-escuro);
--linha: var(--farol-cinza);
--foco: var(--farol-vermelho);
/* aliases com os nomes da devolutiva DB1, para páginas que já existem */
--red: var(--farol-vermelho);
--red-dark: var(--farol-vermelho-escuro);
--black: var(--farol-preto);
--gray: var(--farol-cinza);
--white: var(--farol-branco);
/* --- rampa SÓ para dado (FAROL-0299): um matiz, claro → escuro, monotônica --- */
--dado-1: #FDE7E9;
--dado-2: #F6AEB5;
--dado-3: #EC6B77;
--dado-4: #DB1E2F;
--dado-5: #AF0421;
/* --- tipografia: Proxima Nova é a oficial (licenciada, Adobe); Hanken Grotesk na web --- */
--fonte: 'Proxima Nova', 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font: var(--fonte);
/* --- forma: quase retangular. Nada acima de 8px --- */
--raio-xs: 2px; /* botão, etiqueta */
--raio-sm: 4px; /* cartão */
--raio-md: 6px; /* cartão de destaque — teto prático */
/* --- espaço: base 8px --- */
--e-xs: 4px; --e-sm: 8px; --e-md: 16px; --e-lg: 32px; --e-xl: 80px;
--maxw: 1180px;
--gut: clamp(20px, 5vw, 80px);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--fonte);
color: var(--tinta);
background: var(--fundo);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* --- rótulo: sempre Bold/Black, caixa alta, espaçado --- */
.label { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; line-height: 1.15; }
.label--red { color: var(--acento); }
.label--white { color: var(--farol-branco); }
.label--black { color: var(--tinta); }
/* --- a régua: `rótulo ————— assunto`, no alto de TODA página ---