/* ============================================================
   CASA DO AGRO — Design Tokens (variables.css)
   Paleta extraída do Mídia Kit oficial.
   Sistema de design centralizado: cores, tipografia, espaçamento,
   raios, sombras, blur e timings. Alterar aqui reflete em todo o site.
   ============================================================ */

:root {
  /* ---------- CORES DE MARCA ---------- */
  --brand-orange:      #F58220;   /* laranja principal (fogo/agro) */
  --brand-orange-deep: #E1650A;   /* laranja profundo */
  --brand-amber:       #FFB300;   /* âmbar do logo */
  --brand-yellow:      #FFD21E;   /* amarelo contorno do logo */
  --brand-green:       #4CAF2E;   /* verde AGRO */
  --brand-green-light: #7ED957;   /* verde claro */
  --brand-red:         #B71C1C;   /* vermelho profundo do logo */

  /* ---------- NEUTROS / FUNDOS ---------- */
  --bg-black:    #0A0705;   /* preto quente base */
  --bg-dark:     #140D08;   /* marrom quase preto */
  --bg-dark-2:   #1E140C;   /* superfície escura elevada */
  --bg-cream:    #FBF3DE;   /* creme (seção história) */
  --bg-cream-2:  #F5E9C8;   /* creme mais quente */
  --surface-glass: rgba(255, 255, 255, 0.06);
  --surface-card:  rgba(20, 13, 8, 0.72);

  /* ---------- TEXTO ---------- */
  --text-on-dark:      #FBF6EC;
  --text-on-dark-soft: rgba(251, 246, 236, 0.72);
  --text-on-dark-mute: rgba(251, 246, 236, 0.52);
  --text-on-light:     #2B1D10;
  --text-on-light-soft:#5A4632;
  --text-on-orange:    #FFFFFF;

  /* ---------- GRADIENTES ---------- */
  --grad-fire:   linear-gradient(135deg, #FFB300 0%, #F58220 45%, #E1650A 100%);
  --grad-agro:   linear-gradient(135deg, #FFD21E 0%, #7ED957 40%, #2E9E1F 100%);
  --grad-orange-bg: linear-gradient(160deg, #FF9A2E 0%, #F57C1A 55%, #E1650A 100%);
  --grad-dark-bg:   radial-gradient(120% 90% at 50% -10%, #2A1A0D 0%, #140D08 45%, #0A0705 100%);
  --grad-hero-glow: radial-gradient(60% 55% at 50% 42%, rgba(245,130,32,0.42) 0%, rgba(245,130,32,0.10) 45%, transparent 72%);

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: "Anton", "Archivo Black", system-ui, sans-serif; /* títulos impactantes */
  --font-sans:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script:  "Caveat", "Segoe Script", cursive; /* toques manuscritos */

  /* escala fluida (clamp) */
  --fs-hero:    clamp(2.75rem, 8vw, 6.5rem);
  --fs-h1:      clamp(2.25rem, 5.2vw, 4rem);
  --fs-h2:      clamp(1.85rem, 4vw, 3rem);
  --fs-h3:      clamp(1.3rem, 2.2vw, 1.75rem);
  --fs-lead:    clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body:    clamp(1rem, 1.15vw, 1.125rem);
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.8rem;
  --fs-stat:    clamp(2.5rem, 5.5vw, 4.5rem);

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.7;

  /* ---------- ESPAÇAMENTO (escala 8pt) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(4.5rem, 9vw, 9rem);
  --container:  1240px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- RAIOS ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* ---------- SOMBRAS ---------- */
  --sh-sm:  0 2px 8px rgba(0,0,0,0.18);
  --sh-md:  0 12px 30px rgba(0,0,0,0.28);
  --sh-lg:  0 26px 60px rgba(0,0,0,0.38);
  --sh-glow-orange: 0 18px 50px rgba(245,130,32,0.35);
  --sh-glow-green:  0 18px 50px rgba(76,175,46,0.30);
  --sh-inset-top:   inset 0 1px 0 rgba(255,255,255,0.08);

  /* ---------- BLUR / GLASS ---------- */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;

  /* ---------- MOVIMENTO ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:   180ms;
  --t-med:    320ms;
  --t-slow:   600ms;

  /* ---------- LAYOUT UTILS ---------- */
  --header-h: 76px;
  --z-header: 100;
  --z-fab: 90;
  --z-cursor: 9999;
}