/* ============================================================
   VALÉRIA BOLSONARO — DESIGN TOKENS
   Decisões tomadas com a metodologia ui-ux-pro-max:
   - Direção: "editorial institucional de alto contraste" (referência
     estrutural: nikolasferreira.com.br) adaptado a cuidado/saúde/educação.
   - Anti-padrão evitado: rosa institucional raso. Base: quase-preto +
     papel quente + verde-floresta (bióloga, saúde, esperança) + âmbar
     (destaque, calor). Contraste AA verificado nos pares usados.
   ============================================================ */

:root {
  /* ---------- CORES ---------- */
  /* Neutros (apoiam o contraste alto editorial — não são cores de marca) */
  --ink:        #0B0F12;   /* fundo hero/footer — quase-preto azulado   */
  --ink-2:      #131A20;   /* superfície elevada escura                  */
  --ink-3:      #1C252D;   /* borda/superfície escura sutil              */
  --paper:      #F6F4EF;   /* fundo principal — off-white quente         */
  --paper-2:    #FFFFFF;   /* cartões sobre papel                        */
  --sand:       #E8E2D4;   /* bordas/divisores em fundo claro            */

  /* ---------- CORES OFICIAIS (marca) ----------
     Light Blue #2462ac · Dark Blue #1a4485 · Yellow #e4e432
     Green #1b8641 · White #ffffff
     Pares AA verificados: white/blue 6.1:1 · white/dark-blue 9.6:1
     yellow/dark-blue 7:1 · white/green 4.6:1 · blue/ink 3.1:1 (foco)     */
  --blue:        #2462ac;   /* primária — institucional                   */
  --blue-dark:   #1a4485;   /* hover/press + superfícies institucionais   */
  --yellow:      #e4e432;   /* destaque/CTA sobre fundo escuro            */
  --green:       #1b8641;   /* saúde/prevenção — acento semântico         */
  --rose:        #B4556D;   /* acento sóbrio (combate ao câncer)          */
  --on-blue:     #FFFFFF;   /* texto sobre --blue/--blue-dark             */

  /* Texto claro */
  --text:        #1C2126;
  --text-soft:   #5A636C;  /* 5.0:1 sobre --paper ✓ AA */
  --text-faint:  #8A929A;
  /* Texto escuro */
  --on-ink:      #F2F4F2;
  --on-ink-soft: rgba(242, 244, 242, 0.72);
  --on-ink-faint:rgba(242, 244, 242, 0.45);

  /* ---------- TIPOGRAFIA ---------- */
  /* Display: Archivo (geométrica, impacto — equivalente visual do Futura
     do site de referência). Texto: Hanken Grotesk (mesma família usada
     como texto no referência). Serifa: Instrument Serif itálica para
     momentos-manifesto (calor editorial). */
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;

  --fs-hero:      clamp(2.6rem, 7vw, 4rem);   /* hero headline        */
  --fs-display:   clamp(2rem, 4.6vw, 3.5rem);    /* título de seção      */
  --fs-title:     clamp(1.5rem, 3vw, 2.1rem);    /* sub-título/booster   */
  --fs-h3:        1.3rem;                        /* cartões              */
  --fs-body:      1.0625rem;                     /* 17px corpo           */
  --fs-small:     0.875rem;
  --fs-label:     0.78rem;                       /* eyebrow/labels       */
  --fs-stat:      clamp(3rem, 8vw, 5.75rem);     /* números grandes      */

  --lh-tight: 1.05;
  --lh-head:  1.12;
  --lh-body:  1.65;

  --track-wide: 0.14em;   /* labels uppercase */
  --track-tight: -0.02em; /* display          */

  /* ---------- ESPAÇAMENTO (ritmo 4/8px) ---------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  --section-pad: clamp(4.5rem, 9vw, 7.5rem);     /* respiro vertical     */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);         /* respiro lateral      */
  --container: 75rem;                            /* 1200px               */
  --container-wide: 90rem;

  /* ---------- FORMAS / ELEVAÇÃO ---------- */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 15, 18, 0.06);
  --shadow-md: 0 12px 32px rgba(11, 15, 18, 0.10);
  --shadow-lg: 0 24px 64px rgba(11, 15, 18, 0.18);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-swift: cubic-bezier(0.16, 1, 0.3, 1);  /* entrada com leve "spring" no fim */
  --dur-fast: 150ms;
  --dur-med:  280ms;
  --dur-slow: 500ms;

  /* ---------- Z-INDEX ---------- */
  --z-nav: 100;
  --z-drawer: 200;
  --z-overlay: 90;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s;
    --dur-med: 0s;
    --dur-slow: 0s;
  }
}