/* ==========================================================================
   VARIÁVEIS DO DESIGN — o "painel de controle" visual do tema
   ==========================================================================

   O QUE ESTE ARQUIVO FAZ
   Guarda, em um só lugar, as decisões visuais do site: cores, fontes,
   tamanhos de texto, larguras, espaçamentos, cantos arredondados e sombras.
   Todos os outros arquivos CSS usam estes valores pelo nome
   (ex.: var(--cor-primaria)). Mudou aqui, muda no site inteiro.

   COMO ALTERAR (exemplo)
   Para trocar a cor principal, mude o valor de --cor-verde abaixo:
       --cor-verde: #163B32;   →   --cor-verde: #1B4A3F;
   Salve, envie o arquivo e recarregue o site (Ctrl + F5 no computador).

   CUIDADOS
   - Não apague nenhuma variável: outros arquivos dependem delas.
   - Ao trocar cores de texto ou de fundo, confira o contraste
     (mínimo recomendado 4,5:1 para textos). Veja docs/GUIA-DE-MANUTENCAO.md.
   - Os pontos de quebra (larguras de tela) não podem ser variáveis em CSS;
     eles estão listados no fim deste arquivo, como referência.

   Carregado em todas as páginas (inc/configuracao/estilos-e-scripts.php)
   e também dentro do editor de blocos.
   ========================================================================== */

:root {
	/* ------------------------------------------------------------------
	   1. PALETA DA MARCA (as cores oficiais da VEC Mídia)
	   ------------------------------------------------------------------ */
	--cor-verde: #163B32;        /* Verde profundo: confiança, carreira, marca. */
	--cor-dourado: #D8A64E;      /* Dourado: detalhes de destaque. Nunca como texto sobre fundo claro. */
	--cor-marfim: #F5F3ED;       /* Marfim: fundos acolhedores (seções, caixas). */
	--cor-marinho: #25344A;      /* Azul-marinho: seriedade e análise (seção Finanças). */
	--cor-branco: #FFFFFF;       /* Branco: fundo principal. */
	--cor-grafite: #252A28;      /* Grafite: textos e títulos. */
	--cor-cinza: #6B7280;        /* Cinza: datas e metadados (contraste 4,8:1 sobre branco). */
	--cor-cinza-sobre-marfim: #5A606B; /* Cinza um pouco mais escuro, usado sobre fundo marfim (mantém contraste acima de 4,5:1). */

	/* Variações derivadas da paleta (usadas em detalhes). */
	--cor-verde-escuro: #0F2B24;     /* Verde ao passar o mouse em botões. */
	--cor-verde-claro: #E6EFEB;      /* Fundo verde bem suave (caixa de dica, situação "aberto"). */
	--cor-dourado-escuro: #7A5414;   /* Dourado legível sobre fundo claro (contraste 6,8:1). */
	--cor-dourado-claro: #FAF1E1;    /* Fundo dourado bem suave (caixa de atenção). */
	--cor-marfim-escuro: #EAE6DB;    /* Marfim um pouco mais escuro (hover, divisórias sobre marfim). */
	--cor-linha: #E3E0D8;            /* Linhas finas que separam itens. */
	--cor-texto-secundario: #4A514E; /* Resumos e linhas finas (mais suave que o grafite). */

	/* ------------------------------------------------------------------
	   2. CORES POR FUNÇÃO (use estas nos componentes)
	   Para mudar o papel de uma cor no site todo, mude aqui.
	   ------------------------------------------------------------------ */
	--cor-primaria: var(--cor-verde);          /* Links, botões, elementos de marca. */
	--cor-primaria-hover: var(--cor-verde-escuro);
	--cor-sobre-primaria: var(--cor-branco);   /* Texto sobre fundo da cor primária (botões). */
	--cor-destaque: var(--cor-dourado);        /* Fio dourado, sublinhados, marcadores. */
	--cor-fundo: var(--cor-branco);            /* Fundo das páginas. */
	--cor-superficie: var(--cor-marfim);       /* Fundo de seções e caixas. */
	--cor-texto: var(--cor-grafite);           /* Texto principal. */
	--cor-texto-suave: var(--cor-cinza);       /* Datas, legendas, metadados. */
	--cor-fundo-escuro: var(--cor-marinho);    /* Seções escuras (Finanças). */
	--cor-rodape: var(--cor-verde);            /* Fundo do rodapé. */
	--cor-foco: var(--cor-verde);              /* Contorno de foco (navegação pelo teclado). */
	--cor-foco-escuro: var(--cor-dourado);     /* Contorno de foco sobre fundos escuros. */

	/* ------------------------------------------------------------------
	   3. FONTES
	   Arquivos em assets/fonts/ (carregados em base/fontes.css).
	   As fontes depois da vírgula são reservas, caso a principal falhe.
	   ------------------------------------------------------------------ */
	--fonte-corpo: "Inter", "Inter Reserva", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--fonte-titulos: "Manrope", "Manrope Reserva", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	/* Pesos de fonte. */
	--peso-normal: 400;
	--peso-medio: 500;
	--peso-semi: 600;
	--peso-negrito: 700;
	--peso-extra: 800;

	/* ------------------------------------------------------------------
	   4. TAMANHOS DE TEXTO
	   "clamp(mínimo, ideal, máximo)": o tamanho cresce suavemente do
	   celular (mínimo) ao computador (máximo). 1rem = 16 px.
	   ------------------------------------------------------------------ */
	--texto-pequeno: 0.8125rem;                                   /* 13 px: etiquetas de editoria. */
	--texto-meta: 0.875rem;                                       /* 14 px: datas, legendas, trilha. */
	--texto-base: 1rem;                                           /* 16 px: menus, botões, interface. */
	--texto-artigo: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);   /* 17 a 19 px: texto do artigo. */
	--texto-grande: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);     /* 17 a 20 px: linha fina do artigo. */

	--titulo-card: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);               /* 17 a 20 px */
	--titulo-card-destaque: clamp(1.5rem, 1.15rem + 1.5vw, 2.375rem);     /* 24 a 38 px */
	--titulo-secao: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);            /* 22 a 30 px */
	--titulo-pagina: clamp(1.875rem, 1.45rem + 1.9vw, 2.875rem);          /* 30 a 46 px */
	--titulo-artigo: clamp(1.75rem, 1.3rem + 2.1vw, 3rem);                /* 28 a 48 px */
	--intertitulo-h2: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);          /* 22 a 28 px */
	--intertitulo-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);         /* 19 a 22 px */
	--intertitulo-h4: 1.0625rem;                                          /* 17 px */

	/* Altura das linhas (espaço entre linhas). */
	--altura-linha-texto: 1.72;
	--altura-linha-interface: 1.5;
	--altura-linha-titulo: 1.2;

	/* Espaçamento entre letras dos títulos (negativo = mais justo). */
	--espacamento-titulo: -0.02em;

	/* ------------------------------------------------------------------
	   5. LARGURAS
	   ------------------------------------------------------------------ */
	--largura-container: 1240px;   /* Largura máxima do conteúdo do site. */
	--largura-larga: 1040px;       /* Imagem do artigo e blocos "largos". */
	--largura-leitura: 700px;      /* Coluna de texto do artigo (cerca de 70 caracteres por linha). */
	--largura-indice: 220px;       /* Coluna do índice "Neste artigo" no computador. */
	--margem-lateral: clamp(1rem, 4vw, 2.5rem); /* Distância entre o conteúdo e a borda da tela. */

	/* ------------------------------------------------------------------
	   6. ESPAÇAMENTOS (do menor para o maior)
	   ------------------------------------------------------------------ */
	--espaco-1: 0.25rem;   /*  4 px */
	--espaco-2: 0.5rem;    /*  8 px */
	--espaco-3: 0.75rem;   /* 12 px */
	--espaco-4: 1rem;      /* 16 px */
	--espaco-5: 1.5rem;    /* 24 px */
	--espaco-6: 2rem;      /* 32 px */
	--espaco-7: 3rem;      /* 48 px */
	--espaco-8: 4rem;      /* 64 px */
	--espaco-secao: clamp(2.75rem, 2rem + 3vw, 5rem);   /* Distância entre seções da home. */
	--espaco-grade: clamp(1.25rem, 1rem + 1.2vw, 2rem); /* Distância entre cards nas grades. */

	/* ------------------------------------------------------------------
	   7. CANTOS ARREDONDADOS, SOMBRAS E LINHAS
	   ------------------------------------------------------------------ */
	--raio-pequeno: 4px;
	--raio-medio: 8px;
	--raio-grande: 14px;
	--raio-pilula: 999px;

	--sombra-painel: 0 18px 48px rgba(15, 43, 36, 0.18);   /* Menus suspensos e painel do celular. */
	--sombra-suave: 0 1px 2px rgba(15, 43, 36, 0.06);

	--fio-dourado-largura: 32px;   /* O "fio dourado", marca visual acima dos títulos de seção. */
	--fio-dourado-altura: 3px;

	/* ------------------------------------------------------------------
	   8. CABEÇALHO
	   ------------------------------------------------------------------ */
	--altura-cabecalho: 60px;   /* Altura da barra do topo no celular. */
	--altura-logo: 30px;        /* Altura máxima do logo (imagem) no celular. */

	/* ------------------------------------------------------------------
	   9. MOVIMENTO E CAMADAS
	   ------------------------------------------------------------------ */
	--transicao: 180ms ease;
	--camada-cabecalho: 100;
	--camada-menu: 1000;
}

/* Sobre fundos marfim, o cinza dos metadados fica um pouco mais escuro,
   para manter a leitura confortável (contraste mínimo 4,5:1). */
.secao--concursos,
.guias,
.ficha-concurso,
.relacionados,
.busca-cabecalho,
.is-style-caixa-resumo,
.caixa-resumo {
	--cor-texto-suave: var(--cor-cinza-sobre-marfim);
}

/* No computador (a partir de 1024 px): topo e logo um pouco maiores. */
@media (min-width: 1024px) {
	:root {
		--altura-cabecalho: 72px;
		--altura-logo: 38px;
	}
}

/* Quem pediu ao sistema "reduzir movimento" não vê animações. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--transicao: 0ms;
	}
}

/* ==========================================================================
   REFERÊNCIA: PONTOS DE QUEBRA (larguras de tela) usados nos arquivos CSS
   --------------------------------------------------------------------------
   Os estilos são escritos primeiro para o celular. As regras dentro de
   "@media (min-width: ...)" valem a partir daquela largura:

     600px   celulares grandes deitados e tablets pequenos
     768px   tablets
     1024px  computadores e tablets grandes deitados (menu completo no topo)
     1100px  índice do artigo em coluna lateral
     1280px  telas largas
   ========================================================================== */