/* GITEC — design tokens
   Paleta: azul marinho suave (fundo) + caramelo claro e branco (texto).
   Contraste verificado: caramelo/marinho 6,35:1 (AA) · branco/marinho 11,6:1 (AAA)
   · marinho/caramelo 8,07:1 (AAA). */

:root {
  /* ---- Azuis: fundos e superfícies ---- */
  --marinho-profundo: #16293f; /* topo, rodapé, faixas de contraste */
  --marinho-base: #1e3a5a;     /* fundo principal das seções */
  --marinho-suave: #27486b;    /* cards e superfícies elevadas */
  --marinho-linha: #365a80;    /* bordas e divisores */

  /* ---- Caramelo: destaque e ação ---- */
  --caramelo: #e8b77a;
  --caramelo-forte: #d9a05b;   /* hover, estados ativos */

  /* ---- Brancos: leitura ---- */
  --branco: #ffffff;
  --branco-quente: #f2eee8;    /* parágrafos — evita o "vibrar" do branco puro */

  /* ---- Papéis semânticos ---- */
  --bg: var(--marinho-base);
  --bg-alt: var(--marinho-profundo);
  --superficie: var(--marinho-suave);
  --borda: var(--marinho-linha);
  --titulo: var(--branco);
  --destaque: var(--caramelo);
  --texto: var(--branco-quente);
  --texto-suave: rgb(242 238 232 / 0.72);

  /* ---- Tipografia ---- */
  --fonte: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --t-xs: 0.78rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.25rem, 0.9rem + 1.1vw, 1.5rem);
  --t-xl: clamp(1.6rem, 1.1rem + 2vw, 2.25rem);
  --t-2xl: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 700;
  --peso-extra: 800;

  --entrelinha-apertada: 1.18;
  --entrelinha: 1.65;
  --espacamento-titulo: -0.015em;
  --espacamento-rotulo: 0.12em;

  /* ---- Espaçamento ---- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --secao-y: clamp(3.5rem, 2rem + 6vw, 6rem);

  /* ---- Formas ---- */
  --raio-sm: 6px;
  --raio: 10px;
  --raio-lg: 16px;
  --raio-pill: 999px;

  --sombra: 0 4px 20px rgb(8 18 30 / 0.28);
  --sombra-alta: 0 12px 40px rgb(8 18 30 / 0.4);

  /* ---- Layout ---- */
  --largura-max: 1180px;
  --largura-texto: 68ch;
  --respiro-lateral: clamp(1.25rem, 5vw, 3rem);

  /* ---- Movimento ---- */
  --transicao: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

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