/* =========================================================================
   variables.css — Design tokens do Blog Educação Financeira Banestes
   Conceito: editorial fintech (institucional + jovem). Dominância azul,
   cortes de verde-limão, grafismos de cifrão como assinatura visual.
   ========================================================================= */

:root {
  /* ---- Cores de marca ---------------------------------------------------- */
  --azul: #2c2ce0;          /* azul royal Banestes — cor dominante */
  --azul-escuro: #1a1aa8;   /* hover / profundidade */
  --azul-tinta: #0b0b2b;    /* texto sobre claro, fundos profundos */
  --verde: #8cc63f;         /* verde-limão — accent / ação */
  --verde-escuro: #74ab2e;  /* hover do verde */

  /* ---- Neutros ----------------------------------------------------------- */
  --off-white: #f2f2f0;     /* fundo de seções claras */
  --branco: #ffffff;
  --cinza-100: #e9e9ef;
  --cinza-300: #c7c7d2;
  --cinza-500: #8a8a9b;
  --cinza-700: #4a4a5c;

  /* ---- Papéis semânticos ------------------------------------------------- */
  --bg: var(--off-white);
  --texto: var(--azul-tinta);
  --texto-suave: var(--cinza-700);
  --link: var(--azul);

  /* ---- Cores de categoria (fallback; o JSON define as oficiais) ---------- */

  /* ---- Tipografia -------------------------------------------------------- */
  --fonte-display: "Poppins", system-ui, sans-serif;
  --fonte-corpo: "Poppins", system-ui, -apple-system, sans-serif;

  /* Escala tipográfica fluida (clamp: min, preferido vw, max) */
  --fs-display: clamp(3rem, 9vw, 7rem);     /* hero "financeira" */
  --fs-h1: clamp(2.2rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.8rem, 4vw, 3rem);
  --fs-h3: clamp(1.3rem, 2.4vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.35rem); /* subtítulos, leads */
  --fs-body: 1.0625rem;                      /* 17px corpo */
  --fs-sm: 0.9375rem;                        /* 15px */
  --fs-xs: 0.8125rem;                        /* 13px badges/meta */

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-black: 700; /* Poppins entregue até 700 (Bold) — referência usa Poppins Bold nos títulos */

  /* ---- Espaçamento (escala base 4px) ------------------------------------ */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Ritmo vertical de seção (fluido) */
  --secao-y: clamp(3.5rem, 8vw, 7rem);

  /* ---- Layout ------------------------------------------------------------ */
  --container: 1200px;
  --container-estreito: 760px; /* leitura de artigo */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Raios ------------------------------------------------------------- */
  --raio-md: 16px;
  --raio-lg: 24px;
  --raio-xl: 32px;
  --raio-pill: 999px;

  /* ---- Sombras ----------------------------------------------------------- */
  --sombra-sm: 0 2px 8px rgba(11, 11, 43, 0.06);
  --sombra-md: 0 12px 30px rgba(11, 11, 43, 0.1);
  --sombra-lg: 0 24px 60px rgba(11, 11, 43, 0.16);
  --sombra-azul: 0 18px 40px rgba(44, 44, 224, 0.28);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutExpo-ish */
  --ease-padrao: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-rapido: 0.18s;
  --dur-medio: 0.35s;
  --dur-lento: 0.6s;

  /* ---- Camadas (z-index) ------------------------------------------------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-topo: 300;
}

/* Respeita quem pede menos movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}