/**
 * Design tokens — Compracon
 *
 * Origem dos valores: docs/conventions/design-system.md §1, extraído do mockup
 * que o cliente entregou (D-33).
 *
 * Este arquivo NÃO estiliza nada. Só declara variáveis. Nenhum seletor além do
 * :root — é o que garante que ele não altera nenhuma página já montada.
 *
 * Todo CSS novo referencia var(--cpc-*). Hexadecimal literal fora daqui é
 * defeito de revisão (design-system.md §3, regra 2).
 */

:root {

	/* ── Marca ─────────────────────────────────────────────── §1.2 ── */
	--cpc-azul: #299ee1;
	--cpc-azul-forte: #0e7fc2;
	--cpc-azul-claro: #eaf7ff;
	--cpc-azul-hover-link: #086fae;

	--cpc-grad-botao: linear-gradient(100deg, #0e7fc2, #299ee1);
	--cpc-grad-bloco: linear-gradient(135deg, #1179b6, #299ee1);

	/* Palavra destacada do título. As cinco paradas são o que dá o brilho que
	 * atravessa o texto no mockup — não simplificar para duas. */
	--cpc-grad-titulo: linear-gradient(100deg, #0e7fc2 0%, #29a8e8 34%, #72d5ff 50%, #299ee1 66%, #0e7fc2 100%);

	/* ── Texto ─────────────────────────────────────────────── §1.2 ── */
	--cpc-texto: #263d4b;
	--cpc-texto-2: #637985;
	--cpc-texto-3: #8a9aa3;
	--cpc-texto-rotulo: #6e828d;

	/* ── Superfície ────────────────────────────────────────── §1.2 ── */
	--cpc-branco: #ffffff;
	--cpc-fundo: #f7fbfd;
	--cpc-fundo-campo: #f9fcfd;
	--cpc-fundo-tabela-cabecalho: #f3faff;
	--cpc-escuro: #173643;

	/* ── Linha ─────────────────────────────────────────────── §1.2 ── */
	--cpc-linha: #dce9f0;
	--cpc-linha-clara: #edf2f5;

	/* ── Semântico ─────────────────────────────────────────── §1.2 ── */
	--cpc-ok-fundo: #e6f7ef;
	--cpc-ok-texto: #23825c;
	--cpc-neutro-fundo: #f0f3f5;
	--cpc-neutro-texto: #687c87;
	--cpc-alerta-fundo: #fff8f8;
	--cpc-alerta-linha: #f5d7d7;
	--cpc-alerta-texto: #c34848;
	--cpc-estrela: #f7b500;

	/* ── Marca de terceiro ───────────────────────────────── 03007 ── */
	/*
	 * Os dois verdes oficiais da marca do WhatsApp, e é por serem oficiais que
	 * entram: cor de marca de terceiro não se escolhe, se copia. Fora daqui,
	 * nenhum CSS escreve o hexadecimal (regra 2 do design system).
	 *
	 * ATENCAO: branco sobre o verde claro nao alcanca 4,5:1. E o mesmo caso ja
	 * decidido pelo operador em 2026-08-21 para o azul da marca, onde a cor
	 * ficou; o hover usa o verde escuro, que alcanca.
	 */
	--cpc-whatsapp: #25d366;
	--cpc-whatsapp-forte: #128c7e;

	/* ── Forma ─────────────────────────────────────────────── §1.5 ── */
	--cpc-raio-xs: 8px;
	--cpc-raio-sm: 10px;
	--cpc-raio-md: 14px;
	--cpc-raio-lg: 18px;
	--cpc-raio-xl: 22px;
	--cpc-raio-pilula: 999px;

	/* ── Elevação ──────────────────────────────────────────── §1.6 ──
	 * A sombra neutra é sempre o próprio --cpc-texto em baixa opacidade.
	 * Sombra azul é exclusiva de elemento azul; nunca sob elemento branco.
	 */
	--cpc-sombra-1: 0 12px 34px rgba(38, 61, 75, .06);
	--cpc-sombra-2: 0 18px 42px rgba(38, 61, 75, .10);
	--cpc-sombra-3: 0 16px 44px rgba(38, 61, 75, .07);
	--cpc-sombra-4: 0 22px 55px rgba(38, 61, 75, .09);
	--cpc-sombra-5: 0 28px 80px rgba(10, 38, 53, .28);
	--cpc-sombra-azul: 0 10px 22px rgba(41, 158, 225, .20);
	--cpc-sombra-azul-hover: 0 13px 28px rgba(19, 137, 203, .30);

	/* O par verde das duas de cima, para o botao de WhatsApp (03008). Mesma
	 * geometria — o que muda e a cor, porque sombra de botao de destaque e a
	 * propria cor dele em baixa opacidade. Sem isto o botao verde seria o unico
	 * botao principal da interface sem elevacao. */
	--cpc-sombra-whatsapp: 0 10px 22px rgba(18, 140, 126, .20);
	--cpc-sombra-whatsapp-hover: 0 13px 28px rgba(18, 140, 126, .30);

	/* ── Tipografia ────────────────────────────────────────── §1.3 ──
	 * Onde o §1.3 registra dois tamanhos para o mesmo papel ("14px / 15px"),
	 * o token fica com o valor mais frequente no CSS do mockup. A contagem está
	 * registrada na validação da fase 03001, em _planning/ — não é dedução.
	 */
	/* A lista de reserva é a do mockup, letra por letra, e não é detalhe: o
	 * subconjunto latino da Geist do Google não traz o visto (U+2713) nem a
	 * seta (U+2192), e todo símbolo do hero cai para a PRIMEIRA fonte da
	 * reserva. Com fonte de sistema na frente, o visto do chapéu saía maior e
	 * mais pesado que o da referência. */
	--cpc-fonte: "Geist", Arial, Helvetica, sans-serif;

	--cpc-t-titulo-pagina: clamp(42px, 4.35vw, 58px);
	--cpc-t-titulo-secao: clamp(32px, 4vw, 44px);
	--cpc-t-titulo-bloco: clamp(25px, 4vw, 34px);
	--cpc-t-numero-grande: 30px;
	--cpc-t-numero: 25px;
	--cpc-t-card-grande: 21px;
	--cpc-t-card: 17px;
	--cpc-t-corpo-grande: 16px;
	--cpc-t-corpo: 14px;
	--cpc-t-corpo-pequeno: 13px;
	--cpc-t-rotulo: 12px;
	--cpc-t-micro-grande: 11px;
	--cpc-t-micro: 10px;
	--cpc-t-nano: 9px;

	/* Só múltiplo de 100: o carregador de fonte entrega pesos fechados, e peso
	 * não carregado cai no vizinho sem aviso (design-system.md §3, regra 4). */
	--cpc-peso-corpo: 400;
	--cpc-peso-medio: 600;
	--cpc-peso-dado: 700;
	--cpc-peso-forte: 800;
	--cpc-peso-max: 900;

	--cpc-el-titulo: 1.12;
	--cpc-el-corpo: 1.65;

	/* Título grande comprime, rótulo pequeno expande — §1.3 */
	--cpc-ee-titulo-pagina: -.045em;
	--cpc-ee-titulo-secao: -.04em;
	--cpc-ee-numero: -.035em;
	--cpc-ee-rotulo: .08em;

	/* ── Medida ────────────────────────────────────────────── §1.4 ──
	 * As três larguras do §1.4, como estão escritas lá. O respiro lateral é o
	 * que sobra da subtração — não existe token separado para ele, porque no
	 * mockup ele nunca é usado sozinho.
	 */
	--cpc-largura-conteudo: min(1140px, calc(100% - 48px));
	--cpc-largura-celular: calc(100% - 32px);
	--cpc-largura-estreita: calc(100% - 24px);
}