/* ==========================================================================
   TOKENS — Gelato Borelli Bauru
   Fonte única de verdade para cor, tipografia, espaço, raio e movimento.
   Nenhum valor "solto" deve aparecer nos outros arquivos CSS.

   Paleta OFICIAL, extraída do arquivo do logo. Os acentos vieram das fotos
   do produto, amostradas na região de cada sabor.
   ========================================================================== */

:root {
  /* ---------- Cor: institucional ----------
     Extraída pixel a pixel do logo oficial (logo-borelli-2.png):
       #2d4828  verde do oval        45.205 px
       #23312d  contorno escuro       8.627 px
       #d7d2c4  creme das letras      9.235 px
       #2b9c48  verde da bandeira       939 px
       #ef433e  vermelho da bandeira    985 px
     ------------------------------------------------------------------ */
  --verde-borelli:  #2d4828;   /* botão primário, links, ícones */
  --verde-profundo: #23312d;   /* rodapé, faixas cheias, títulos */
  --verde-claro:    #3d6136;   /* hover do primário */
  --verde-italia:   #2b9c48;   /* só no fio tricolor */
  --vermelho-italia:#ef433e;   /* só no fio tricolor */
  --creme:          #d7d2c4;   /* creme do logo */

  /* ---------- Cor: superfícies ---------- */
  --panna:       #f4f2ea;      /* fundo padrão — tom claro do creme do logo */
  --panna-pura:  #ffffff;
  --pistacchio:  #cfd6c3;
  --pistacchio-claro: #e8eae0;

  /* ---------- Cor: acentos ----------
     Amostrados das fotos do próprio produto, para a vitrine usar tons reais. */
  --fragola:        #df908b;   /* bola de morango */
  --fragola-escuro: #a8494a;   /* versão acessível para texto sobre claro */
  --nocciola:       #a75c28;   /* cascão */
  --cacao:          #4c2f1f;   /* café */
  --chocolate:      #893b1b;   /* creme de chocolate */
  --pistacchio-creme: #c19851; /* Pistacchio Perfetto */
  --creme-gelato:   #e6c89b;   /* bola de creme */
  --oro:            #b9b19d;   /* creme rebaixado, para hierarquia no escuro */

  /* ---------- Cor: texto ---------- */
  --tinta:        #241f1c;
  --tinta-suave:  #574f48;
  --tinta-clara:  #857d74;
  --sobre-escuro: #f4f2ea;

  /* ---------- Cor: estado ---------- */
  --aberto:  #2b7a44;
  --fechado: #a8494a;
  --erro:    #a8494a;

  /* ---------- Tipografia ---------- */
  /* Display: soft-serif com personalidade (Fraunces).
     Corpo:   sans humanista arredondada (Figtree).
     Arquivos .woff2 devem ser colocados em /assets/fonts/ — ver README. */
  --f-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-corpo:   "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Escala fluida — mobile first, sem media query */
  --t-eyebrow: 0.75rem;
  --t-micro:   0.8125rem;
  --t-p:       clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-p-lg:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-h4:      clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --t-h3:      clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --t-h2:      clamp(1.875rem, 1.45rem + 1.9vw, 3rem);
  --t-h1:      clamp(2.375rem, 1.6rem + 3.4vw, 4.25rem);

  --lh-titulo: 1.08;
  --lh-media:  1.32;
  --lh-corpo:  1.62;

  --tr-titulo: -0.022em;
  --tr-eyebrow: 0.16em;

  /* ---------- 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;

  /* Ritmo vertical entre seções (fluido) */
  --secao-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);

  /* ---------- Layout ---------- */
  --largura-max: 75rem;   /* 1200px */
  --largura-texto: 38rem; /* medida de leitura confortável */
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 2.5rem);
  --altura-header: 4rem;

  /* ---------- Raio ---------- */
  --r-sm:   0.75rem;
  --r-md:   1.25rem;
  --r-lg:   2rem;
  --r-xl:   3rem;
  --r-full: 62.5rem;

  /* ---------- Sombra (discreta, nunca cinza puro) ---------- */
  --sombra-1: 0 1px 2px rgba(35, 49, 45, 0.06), 0 2px 8px rgba(35, 49, 45, 0.05);
  --sombra-2: 0 4px 12px rgba(35, 49, 45, 0.07), 0 12px 32px rgba(35, 49, 45, 0.07);
  --sombra-3: 0 12px 28px rgba(35, 49, 45, 0.1), 0 28px 60px rgba(35, 49, 45, 0.1);

  /* ---------- Movimento ---------- */
  --ease-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --d-rapida:  180ms;
  --d-media:   320ms;
  --d-lenta:   560ms;

  /* ---------- Camadas ---------- */
  --z-header: 100;
  --z-flutuante: 200;
  --z-modal: 300;
}

/* Respeita quem pede menos movimento: zera durações globalmente. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-rapida: 0ms;
    --d-media: 0ms;
    --d-lenta: 0ms;
  }
}