/* ============================================================
   TOKENS — Modesto Distribuidora
   Trocar este arquivo reskinna o tema inteiro (caminho Figma -> WP).
   ============================================================ */
:root{
  /* Cor */
  --c-marca:#A11200;      --c-marca-hover:#8A0F00;   --c-marca-escuro:#4F0A02;
  --c-marca-tint:#FAEEEC;
  --c-ink:#1A1A1A;        --c-text:#515151;          --c-muted:#999999;
  --c-line:#F2F2F2;       --c-line-2:#E0E0E5;        --c-line-3:#E5E7EB;
  --c-border:#CCCCCC;     --c-surface:#F2F2F2;       --c-white:#FFFFFF;
  --c-page:#FBFBFC;

  /* Tipografia — escala fluida com teto no desktop.
     Letter-spacing em em (escala com a fonte, não "endurece" nos tamanhos grandes). */
  --f-sans:"Fira Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --fs-display:clamp(32px,4.6vw,52px);  /* hero */
  --fs-h1:clamp(28px,3.6vw,42px);
  --fs-h2:clamp(25px,3vw,33px);
  --fs-h3:clamp(21px,2.2vw,25px);
  --fs-xl:clamp(17px,1.6vw,19px);       /* lead / subtítulos */
  --fs-lg:16px; --fs-md:14px; --fs-sm:13px; --fs-xs:12px;
  --lh-tight:1.12;   /* títulos grandes */
  --lh-snug:1.22;    /* títulos médios */
  --lh-body:1.6;
  --ls-tight:-.02em; /* títulos de display/h1 */
  --ls-snug:-.01em;  /* h2/h3 */

  /* Espaço / raio / sombra */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-8:48px; --sp-10:80px;
  --section:clamp(56px,7vw,96px);       /* padding vertical padrão de seção */
  --gap:clamp(24px,3vw,40px);           /* gap padrão de grid/colunas */
  --stack:clamp(16px,1.6vw,24px);       /* espaçamento entre título e texto */
  --r-sm:6px; --r-md:10px; --r-lg:12px;
  --shadow-pop:0 14px 22px -9px rgba(16,25,40,.14), 0 0 3px -1px rgba(16,25,40,.06);
  --shadow-mega:0 2px 2px rgba(0,0,0,.03), 0 8px 12px rgba(0,0,0,.07);

  /* Layout */
  --maxw:1440px;                        /* base: notebooks */
  --gutter:clamp(20px,5vw,80px);
  --t:200ms cubic-bezier(.4,0,.2,1);
}

/* Desktop grande: container um pouco mais largo (menos margem lateral) */
@media (min-width:1600px){
  :root{ --maxw:1520px; }
}