/* ==========================================================================
   PJSF · Design tokens
   Cores derivadas do logótipo (proposta de redesign 2026).
   Nada de amarelo Xapa — o âmbar é reservado ao CTA "Doar".
   ========================================================================== */

:root {
  /* --- Cores da marca --------------------------------------------------- */
  --azul:            #1E5A8A;   /* primária · cabeçalho, títulos           */
  --azul-escuro:     #12405F;   /* rodapé, hovers                          */
  --verde:           #2E8B57;   /* educação · agricultura                  */
  --ambar:           #E0A93B;   /* botão "Doar" · destaques (só CTA)       */

  --azul-claro:      #E7F0F7;   /* fundos de secção                        */
  --verde-claro:     #E8F3EC;   /* fundos alternados                       */

  --grafite:         #1F2A33;   /* texto corrente                          */
  --cinza:           #74858F;   /* texto secundário                        */

  --branco:          #FFFFFF;
  --linha:           #E4E9ED;   /* bordas suaves                           */
  --fundo:           #FBFCFD;   /* fundo geral da página                   */

  /* Estados derivados */
  --ambar-hover:     #C9922E;
  --azul-hover:      var(--azul-escuro);
  --verde-hover:     #26744786;

  /* --- Tipografia ------------------------------------------------------- */
  --fonte-titulo: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-corpo:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semi:   600;
  --peso-bold:   700;

  /* Escala de texto (mobile-first; sobe em desktop mais abaixo) */
  --t-xs:   0.75rem;   /* 12 */
  --t-sm:   0.875rem;  /* 14 */
  --t-base: 1rem;      /* 16 */
  --t-md:   1.125rem;  /* 18 */
  --t-lg:   1.375rem;  /* 22 */
  --t-xl:   1.75rem;   /* 28 */
  --t-2xl:  2.25rem;   /* 36 */
  --t-3xl:  2.75rem;   /* 44 */

  /* --- 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;
  --e-9: 6rem;

  /* --- Raio e sombra ---------------------------------------------------- */
  --raio-sm: 8px;
  --raio:    14px;
  --raio-lg: 22px;
  --raio-pill: 999px;

  --sombra-sm: 0 1px 2px rgba(18, 64, 95, .06);
  --sombra:    0 4px 16px rgba(18, 64, 95, .08);
  --sombra-lg: 0 12px 32px rgba(18, 64, 95, .12);

  /* --- Layout ----------------------------------------------------------- */
  --largura-max: 1280px;   /* proposta: max-width 1280px                   */
  --nav-altura:  72px;

  /* --- Foco visível (acessibilidade AA) -------------------------------- */
  --foco: 0 0 0 3px rgba(30, 90, 138, .35);
}

/* Escala tipográfica maior a partir de tablet */
@media (min-width: 768px) {
  :root {
    --t-lg:  1.5rem;
    --t-xl:  2rem;
    --t-2xl: 2.75rem;
    --t-3xl: 3.25rem;
  }
}