/* ==========================================================================
   Variáveis — paleta, tipografia, espaçamento e movimento
   --------------------------------------------------------------------------
   Paleta extraída da logo oficial do Proctec (img/logo/proctec.png):
   verde #40d400 e cinzas #3d3d3d / #5d5d5d.

   Nota de contraste: o verde da marca é muito claro (1.98:1 contra branco).
   Ele NUNCA carrega texto branco. Em botão, o texto é quase preto (9.6:1);
   como texto sobre fundo claro, usa-se --verde-escuro (5.45:1).
   ========================================================================== */

:root {
  /* ---- Marca ---- */
  --verde: #40d400;
  --verde-brilho: #5ce619;
  --verde-escuro: #237a00;
  --verde-mais-escuro: #1b5c00;
  --verde-suave: #eafbe3;
  --verde-vidro: rgb(64 212 0 / 0.12);

  /* ---- Neutros ---- */
  --tinta: #14201a;
  --tinta-media: #56635c;
  --tinta-fraca: #8b958f;
  --linha: #e3e9e5;
  --linha-forte: #cdd6d0;
  --fundo: #ffffff;
  --fundo-suave: #f6f9f7;
  --escuro: #0f1511;
  --escuro-suave: #1a231d;

  /* ---- Semânticos ---- */
  --erro: #c62828;
  --erro-suave: #fdecec;
  --sucesso: #237a00;

  /* ---- Tipografia ---- */
  --fonte: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --fonte-serifada: Georgia, 'Times New Roman', serif;

  --fs-display: clamp(2rem, 3.2vw + 1rem, 3.375rem);
  --fs-h1: clamp(2rem, 3.5vw + 1rem, 3.25rem);
  --fs-h2: clamp(1.625rem, 2.5vw + 0.75rem, 2.5rem);
  --fs-h3: clamp(1.125rem, 1vw + 0.85rem, 1.375rem);
  --fs-body: clamp(1rem, 0.35vw + 0.92rem, 1.0625rem);
  --fs-grande: clamp(1.0625rem, 0.6vw + 0.95rem, 1.25rem);
  --fs-pequeno: 0.875rem;
  --fs-mini: 0.78125rem;

  /* ---- Espaçamento ---- */
  --espaco-secao: clamp(3.5rem, 8vw, 7rem);
  --espaco-bloco: clamp(1.5rem, 4vw, 3rem);
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-7: 3rem;
  --container: min(100% - 2.5rem, 1180px);
  --container-estreito: min(100% - 2.5rem, 780px);

  /* ---- Forma ---- */
  --raio: 10px;
  --raio-grande: 16px;
  --raio-pilula: 999px;

  --sombra-sutil: 0 1px 2px rgb(15 21 17 / 0.06);
  --sombra-card: 0 1px 3px rgb(15 21 17 / 0.08), 0 1px 2px rgb(15 21 17 / 0.04);
  --sombra-card-hover: 0 12px 28px rgb(15 21 17 / 0.12), 0 4px 8px rgb(15 21 17 / 0.06);
  --sombra-header: 0 1px 0 var(--linha), 0 4px 16px rgb(15 21 17 / 0.06);
  --sombra-flutuante: 0 8px 24px rgb(15 21 17 / 0.18);

  /* ---- Movimento ----
     Entrada desacelera (ease-out); saída acelera (ease-in). */
  --easing-entrada: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-saida: cubic-bezier(0.4, 0, 1, 1);
  --easing-elastico: cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-rapida: 150ms;
  --t-media: 250ms;
  --t-lenta: 400ms;
  --t-reveal: 600ms;

  /* ---- Camadas ----
     O header fica ACIMA do painel do menu de propósito: é lá que mora o botão
     hambúrguer que vira X. Se o painel cobrisse o header, o usuário perderia o
     único controle visível para fechar o menu. */
  --z-flutuante: 90;
  --z-menu: 160;
  --z-header: 200;

  --altura-header: 4.5rem;
  --altura-header-compacto: 3.75rem;
}