/* =============================================================================
   tokens.css
   ----------------------------------------------------------------------------
   Design tokens do site (cores, tipografia, espaçamentos, larguras, sombras).
   Centraliza valores em variáveis CSS para que qualquer ajuste de identidade
   visual seja feito em um único lugar.

   IMPORTANTE: as cores principais aqui são EXATAS da paleta da nova
   identidade visual (rebranding 2026) — não alterar os hexadecimais sem
   alinhamento com a Giulia / designer responsável.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Paleta de cores (nova identidade visual / rebranding 2026)
     Tons de azul definidos pela designer; neutros mantidos do briefing original.
     --------------------------------------------------------------------------- */
  --cor-azul-petroleo-principal: #195365;   /* Azul petróleo principal (CTA, links)   */
  --cor-azul-marinho:            #0a3549;   /* Azul marinho profundo (títulos, rodapé) */
  --cor-azul-turquesa:           #44989a;   /* Azul turquesa suave (apoio, hover)      */
  --cor-off-white:               #f8f7f4;   /* Base/background geral                   */
  --cor-bege-suave:              #E8E6DD;   /* Bege para seções alternadas, bordas    */
  --cor-marrom-claro:            #CFCDC5;   /* Marrom claro (detalhes, divisores)     */

  /* Aliases semânticos: usar estes nos componentes para facilitar trocas
     de paleta no futuro sem refatoração. */
  --bg-pagina:        var(--cor-off-white);
  --bg-secao-alt:     var(--cor-bege-suave);
  --cor-texto:        var(--cor-azul-marinho);
  --cor-texto-suave:  #4a4a44;
  --cor-titulo:       var(--cor-azul-marinho);
  --cor-link:         var(--cor-azul-petroleo-principal);
  --cor-link-hover:   var(--cor-azul-turquesa);
  --cor-borda:        var(--cor-marrom-claro);
  --cor-foco:         var(--cor-azul-turquesa);

  /* ---------------------------------------------------------------------------
     Tipografia
     -----------------------------------------------------------------------------
     Como NÃO temos build/npm, usamos a stack de fontes nativa do sistema.
     - Títulos: serif clássica (Georgia → Cambria → Times New Roman)
     - Corpo:   sans-serif moderna do próprio SO (Segoe UI no Windows,
                San Francisco no macOS, etc.)
     Isso evita carregar fontes do Google (privacidade/LGPD) e é instantâneo.
     Se a Giulia quiser uma fonte específica depois, substituímos pelas
     declarações @font-face com arquivo .woff2 hospedado no próprio site.
     --------------------------------------------------------------------------- */
  --fonte-titulo: Georgia, Cambria, "Times New Roman", Times, serif;
  --fonte-corpo:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                   Arial, sans-serif;

  /* Escala tipográfica fluida com clamp(min, ideal, max). Cresce sozinha
     entre mobile e desktop sem precisar de várias media queries. */
  --fs-xs:   0.8125rem;                                  /* 13px fixo (legendas)  */
  --fs-sm:   0.9375rem;                                  /* 15px fixo             */
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);    /* 16px → 18px           */
  --fs-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);    /* 18px → 22px           */
  --fs-xl:   clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);   /* 22px → 28px           */
  --fs-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);     /* 28px → 40px           */
  --fs-3xl:  clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem);     /* 36px → 56px           */

  --lh-titulo: 1.15;
  --lh-corpo:  1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* ---------------------------------------------------------------------------
     Espaçamentos (escala 4/8)
     --------------------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* ---------------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------------- */
  --largura-max:        72rem;       /* 1152px */
  --largura-texto:      40rem;       /* 640px  — largura ideal de leitura */
  --padding-lateral:    clamp(1rem, 4vw, 2rem);
  --altura-header:      4.5rem;

  /* ---------------------------------------------------------------------------
     Detalhes visuais
     --------------------------------------------------------------------------- */
  --raio-pequeno: 0.25rem;
  --raio-medio:   0.5rem;
  --raio-grande:  1rem;

  --sombra-suave:  0 1px 3px rgba(10, 53, 73, 0.06), 0 1px 2px rgba(10, 53, 73, 0.04);
  --sombra-media:  0 4px 12px rgba(10, 53, 73, 0.08);

  --transicao-rapida: 150ms ease-out;
  --transicao-media:  250ms ease-out;
}