/* ==========================================================================
   AgroTerra — Design tokens
   Direção visual "Terra & Aço", derivada do logotipo AgroTerra
   (preto + vermelho tijolo) e da fotografia real enviada pela empresa
   (solo vermelho, palhada, céu profundo, maquinário industrial).
   ========================================================================== */

:root {
  /* ---- Cor: base ---- */
  --ink:        #14140f;   /* preto quente, do wordmark AGRO */
  --ink-2:      #1e1d17;
  --ink-3:      #2b2a22;
  --ink-soft:   #3d3b31;

  --bone:       #e9e9e6;   /* concreto claro, do pátio e da chaparia */
  --bone-2:     #dfdfdb;
  --bone-3:     #cbcbc6;

  /* ---- Cor: marca ---- */
  --terra:      #b4232a;   /* vermelho do wordmark TERRA */
  --terra-deep: #7e1a17;
  --terra-soft: #d8474a;
  --clay:       #c9622c;   /* laranja/terra, do solo e do maquinário */

  /* Verde do WhatsApp escurecido até atingir 5.1:1 com texto branco */
  --wa:         #0f7f42;
  --wa-dark:    #0b6535;

  /* ---- Cor: texto ---- */
  --tx-strong:  var(--ink);
  --tx:         #35342b;
  /* Contraste verificado sobre --bone (#e9e9e6):
     --tx-mute 7.1:1, --tx-faint 5.3:1, ambos acima do mínimo AA para texto pequeno. */
  --tx-mute:    #4e4c43;
  --tx-faint:   #605f55;

  --tx-on-dark:        #f3f0e8;
  --tx-on-dark-mute:   rgba(243, 240, 232, .70);
  --tx-on-dark-faint:  rgba(243, 240, 232, .48);

  /* ---- Cor: superfícies e linhas ---- */
  --surface:      #ffffff;
  --surface-2:    var(--bone);
  --surface-dark: var(--ink);

  --line:        rgba(20, 20, 15, .12);
  --line-strong: rgba(20, 20, 15, .22);
  --line-dark:   rgba(243, 240, 232, .14);

  /* ---- Sombra ---- */
  --sh-xs: 0 1px 2px rgba(20, 20, 15, .05);
  --sh-sm: 0 2px 6px rgba(20, 20, 15, .06), 0 1px 2px rgba(20, 20, 15, .04);
  --sh-md: 0 10px 28px -12px rgba(20, 20, 15, .18), 0 2px 8px rgba(20, 20, 15, .05);
  --sh-lg: 0 30px 60px -24px rgba(20, 20, 15, .28), 0 6px 18px rgba(20, 20, 15, .07);
  --sh-xl: 0 50px 90px -30px rgba(20, 20, 15, .38);

  /* ---- Tipografia ---- */
  --ff-display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
  --ff-text:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala fluida (clamp) — 320px a 1600px */
  --fs-display: clamp(2.3rem, 1.15rem + 5.1vw, 5.25rem);
  --fs-h1:      clamp(2rem, 1.25rem + 3.4vw, 3.9rem);
  --fs-h2:      clamp(1.7rem, 1.22rem + 2.4vw, 3.1rem);
  --fs-h3:      clamp(1.35rem, 1.08rem + 1.35vw, 2.1rem);
  --fs-h4:      clamp(1.1rem, 1.00rem + 0.5vw, 1.4rem);
  --fs-lead:    clamp(1.02rem, 0.95rem + 0.42vw, 1.32rem);
  --fs-body:    clamp(0.96rem, 0.93rem + 0.16vw, 1.05rem);
  --fs-sm:      clamp(0.86rem, 0.84rem + 0.10vw, 0.92rem);
  --fs-xs:      0.78rem;
  --fs-label:   0.75rem;

  --lh-tight: 0.94;
  --lh-snug:  1.08;
  --lh-head:  1.16;
  --lh-body:  1.62;

  --tr-tight: -0.035em;
  --tr-head:  -0.022em;
  --tr-label: 0.16em;

  /* ---- Espaçamento ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.75rem;  --sp-8: 3.5rem;
  --sp-9: 4.5rem;   --sp-10: 6rem;    --sp-11: 8rem;

  --section-y:  clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter:     clamp(1.15rem, 0.6rem + 2.6vw, 3.5rem);
  --maxw:       1360px;
  --maxw-narrow: 780px;

  /* ---- Raio ---- */
  --r-xs: 3px;  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Movimento ---- */
  --e-out:  cubic-bezier(.22, .61, .36, 1);
  --e-soft: cubic-bezier(.33, 1, .68, 1);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);

  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 620ms;
  --d-rev:  900ms;

  /* Multiplicador global de movimento: vai a 0 em prefers-reduced-motion */
  --motion: 1;

  /* ---- Camadas ---- */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-drawer: 80;
  --z-float: 70;
  --z-lightbox: 100;

  /* ---- Safe areas (iOS) ---- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --header-h: 72px;
}

@media (min-width: 900px) {
  :root { --header-h: 88px; }
}

/* Redução de movimento: neutraliza deslocamentos, parallax e animações longas.
   Os componentes leem var(--motion) para escalar amplitudes. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0;
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
    --d-rev: 1ms;
  }
}