/*
 * Design tokens — identidade visual
 *
 * Extraída de https://www.rnp.br/ (estilos computados da home):
 *   - azul-marinho  #0A0A85  blocos de destaque, faixas e rodapé
 *   - ciano         #00AAE6  grade de pontos, faixas, datas e links
 *   - cinza claro   #E6E6E6  seções alternadas
 *   - pontos cinza  #BDC8D5  grade de pontos sobre fundo branco
 *   - texto         #000000 / #323232
 *   - tipografia    Barlow (400 no texto e títulos grandes, 600 nos subtítulos, 700 em ênfases)
 *   - estilo        plano: sem degradês nem sombras, cards de canto reto,
 *                   botões em pílula (raio 100px)
 *
 * Toda a página consome apenas estas variáveis.
 */
:root {
  /* Marca (rnp.br) */
  --navy: #0a0a85;
  --navy-dark: #06065c;
  --navy-light: #2020a0;
  --cyan: #00aae6;
  --cyan-dark: #0089bb;
  --cyan-light: #7fd4f2;

  /* Neutros (rnp.br) */
  --white: #ffffff;
  --gray-100: #e6e6e6;
  --gray-200: #dcdcdc;
  --gray-dots: #bdc8d5;
  --gray-700: #323232;
  --black: #000000;

  /* Semânticos */
  --bg: var(--white);
  --bg-alt: var(--gray-100);
  --bg-dark: var(--navy);
  --text: var(--black);
  --text-muted: var(--gray-700);
  --text-on-dark: var(--white);
  --text-on-dark-muted: #c9c9ee;
  --primary: var(--navy);
  --accent: var(--cyan);
  --border: var(--gray-200);

  /* Padrão de grade de pontos (assinatura visual da RNP) */
  --dots-cyan: radial-gradient(circle, var(--cyan) 2.5px, transparent 3px) 0 0 / 30px 30px;
  --dots-gray: radial-gradient(circle, var(--gray-dots) 2px, transparent 2.5px) 0 0 / 30px 30px;

  /* Tipografia */
  --font-heading: 'Barlow', Helvetica, Arial, sans-serif;
  --font-body: 'Barlow', Helvetica, Arial, sans-serif;
  --fs-hero: clamp(2.4rem, 5.2vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(1.06rem, 1.3vw, 1.2rem);

  /* Forma e espaço */
  --radius-card: 0;
  --radius-pill: 100px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 130px);
  --header-h: 84px;
}