/* ==========================================================================
   tokens.css — design system
   Extraído do kit Elementor ID 6 (nexabrasil.org)
   Não alterar valores sem validar contra a identidade da marca.
   ========================================================================== */

:root {
  /* ---- Cores do sistema (kit Elementor) ---------------------------------- */
  --nexa-primario:        #00D0FF;  /* Primário — ciano da marca            */
  --nexa-secundario:      #90C138;  /* Secundário — verde da marca          */
  --nexa-texto:           #1D1D1B;  /* Texto — preto quase puro             */
  --nexa-realce:          #00FFFF;  /* Realce                               */

  /* ---- Cores customizadas do kit ---------------------------------------- */
  --nexa-azul-claro:      #00F2FF;
  --nexa-azul-pastel:     #00B6F5;
  --nexa-ciano-escuro:    #0099A6;
  --nexa-verde-escuro:    #1F360B;
  --nexa-amarelo-pastel:  #EBE065;

  /* ---- Destaques inline dentro de títulos (.azul / .verde) --------------- */
  --nexa-azul-destaque:   #0AB0E9;
  --nexa-verde-destaque:  #83B627;

  /* ---- Tons acessíveis (AA sobre branco) ---------------------------------
     Usados no conteúdo autoral (portal da transparência). O conteúdo migrado
     mantém as cores originais da marca, ainda que reprovem em contraste. */
  --nexa-link-aa:         #00757F;  /* 5,45:1 sobre branco */
  --nexa-ciano-aa:        #046A8C;  /* 6,09:1 sobre branco */
  --nexa-verde-aa:        #4F6B1C;  /* 5,55:1 sobre branco */

  /* ---- Selo de ano nos cards de projeto ---------------------------------- */
  --nexa-selo-fundo:      #BBF2FF;
  --nexa-selo-texto:      #08A8DF;

  /* ---- Ícones (icon-box) ------------------------------------------------- */
  --nexa-icone-fundo:     #EBFFC3;
  --nexa-icone-cor:       #729B29;

  /* ---- Neutros ----------------------------------------------------------- */
  --nexa-branco:          #FFFFFF;
  --nexa-preto:           #000000;
  --nexa-cinza-campo:     #F8F8F8;
  --nexa-cinza-linha:     rgba(29, 29, 27, 0.12);

  /* ---- Foco (acessibilidade) --------------------------------------------- */
  --nexa-foco:            #0099A6;

  /* ---- Tipografia -------------------------------------------------------- */
  --fonte-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                'Helvetica Neue', Arial, sans-serif;

  --peso-leve:     300;
  --peso-normal:   400;
  --peso-medio:    500;
  --peso-semi:     600;
  --peso-forte:    700;

  /* Escala tipográfica — valores literais do Elementor.
     São degraus, não interpolação: o site original troca de tamanho no
     breakpoint e a migração precisa reproduzir isso para manter paridade.
     Os overrides por breakpoint ficam no fim deste arquivo. */
  --texto-hero:      56px;
  --texto-secao:     44px;
  --texto-acolher:   47px;
  --texto-titulo:    34px;
  --texto-projeto:   26px;
  --texto-card:      22px;
  --texto-lead:      20px;
  --texto-corpo:     18px;
  --texto-botao:     24px;
  --texto-botao-sm:  18px;
  --texto-pequeno:   14px;

  --altura-linha-titulo: 1.2;
  --altura-linha-corpo:  1.6;

  /* ---- Layout ------------------------------------------------------------ */
  --largura-container: 1140px;
  --largura-leitura:   65ch;

  /* Espaçamento — escala de 4px */
  --esp-1:  0.25rem;  /*  4px */
  --esp-2:  0.5rem;   /*  8px */
  --esp-3:  0.75rem;  /* 12px */
  --esp-4:  1rem;     /* 16px */
  --esp-5:  1.375rem; /* 22px */
  --esp-6:  1.5rem;   /* 24px */
  --esp-8:  2rem;     /* 32px */
  --esp-9:  2.25rem;  /* 36px */
  --esp-10: 2.5rem;   /* 40px */
  --esp-12: 3rem;     /* 48px */
  --esp-16: 4rem;     /* 64px */
  --esp-20: 5rem;     /* 80px */

  /* ---- Formas ------------------------------------------------------------ */
  --raio-card:    20px;
  --raio-icone:   12px;
  --raio-campo:   20px;
  --raio-pilula:  99px;

  --sombra-card:   0 0 10px 0 rgba(0, 0, 0, 0.3);
  --sombra-botao:  0 0 10px 0 rgba(0, 0, 0, 0.1);
  --sombra-campo:  0 4px 4px 0 rgba(0, 0, 0, 0.25);

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

/* Breakpoints herdados do Elementor — referência para os @media:
     laptop  max-width: 1366px
     tablet  max-width: 1024px
     mobile  max-width:  767px                                              */


/* --------------------------------------------------------------------------
   Degraus de tipografia por breakpoint
   Espelham exatamente os valores por dispositivo do Elementor.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --texto-hero:      24px;
    --texto-secao:     36px;
    --texto-titulo:    24px;
    --texto-projeto:   20px;
    --texto-lead:      16px;
    --texto-corpo:     14px;
    --texto-botao:     18px;
    --texto-botao-sm:  16px;
  }
}