/* ==========================================================================
   TOKENS — Stacoes dfe
   Fonte de verdade visual. Nenhum valor de cor, medida ou fonte
   entra em outro arquivo sem estar declarado aqui.
   ========================================================================== */

:root {

  /* --- COR ---------------------------------------------------------------
     Paleta estrita: preto, branco/off-white e vinho.
     O vinho é EXCLUSIVO de CTA, hover e detalhe de destaque.
     Nenhuma outra matiz entra no projeto — nem azul, nem cinza colorido.
     Os cinzas abaixo são neutros puros (R=G=B).
     ---------------------------------------------------------------------- */
  --preto:        #111111;   /* texto, botão primário, traço             */
  --preto-puro:   #000000;   /* reservado a fundo pleno e overlay         */
  --branco:       #FFFFFF;   /* fundo base                                */
  --off:          #F9F9F9;   /* fundo de vitrine, campo de imagem, rodapé */
  --vinho:        #72062A;   /* CTA, hover, detalhe. Nada além disso.
                                Valor exato amostrado da logo (D21).
                                Saturado: nunca em preço nem em texto corrido,
                                sob risco de ler como vermelho promocional.  */

  --cinza-texto:  #6E6E6E;   /* texto secundário — 5.1:1 no branco, 4.8:1 no off */
  --linha:        #E5E5E5;   /* filete de 1px                             */
  --linha-forte:  #D4D4D4;   /* filete sobre off-white                    */

  --overlay:      rgba(0,0,0,.38);  /* véu sobre fotografia               */

  /* --- TIPOGRAFIA --------------------------------------------------------
     Duas famílias, quatro pesos no total. Teto fechado.
     ---------------------------------------------------------------------- */
  --ff-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --ff-texto:   "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:    clamp(2.5rem, 5.4vw, 4.5rem);
  --fs-h1:      clamp(2rem, 4vw, 3rem);
  --fs-h2:      clamp(1.375rem, 2.4vw, 1.875rem);
  --fs-h3:      1.0625rem;
  --fs-corpo-g: 1.0625rem;
  --fs-corpo:   1rem;
  --fs-peq:     .8125rem;
  --fs-rotulo:  .6875rem;

  --ls-rotulo:  .2em;    /* caixa alta pequena — a assinatura do projeto */
  --ls-titulo:  .06em;   /* título de seção em caixa alta                */
  --ls-botao:   .16em;

  /* --- ESPAÇO ------------------------------------------------------------
     Escala de base 4px. Nenhum valor fora dela.
     ---------------------------------------------------------------------- */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 24px;  --e6: 32px;  --e7: 48px;  --e8: 64px;
  --e9: 96px;  --e10: 128px; --e11: 160px; --e12: 200px;

  /* O respiro é o produto. Não comprimir para caber mais conteúdo. */
  --secao:     clamp(5rem, 10vw, 11rem);
  --secao-mini: clamp(3rem, 6vw, 6rem);

  --container:      1360px;
  --container-txt:  680px;   /* leitura confortável, ~65 caracteres */
  --gutter:         clamp(1.25rem, 4vw, 4rem);

  /* --- FORMA -------------------------------------------------------------
     Canto reto em tudo. Nenhuma sombra difusa em elemento de conteúdo.
     Separação se faz com filete de 1px, contraste de fundo ou espaço.
     ---------------------------------------------------------------------- */
  --raio: 0;
  --altura-botao: 52px;

  /* --- MOVIMENTO ---------------------------------------------------------
     Contido e lento. Sublinha a hierarquia, nunca chama atenção para si.
     ---------------------------------------------------------------------- */
  --t-rapida: 200ms;
  --t-media:  320ms;
  --t-lenta:  700ms;
  --curva:    cubic-bezier(.22, 1, .36, 1);

  --topo-altura:        112px;  /* header em repouso  */
  --topo-altura-rolado:  68px;  /* header comprimido  */
}