/* ============================================================
   Amazon Laje — Foundations (color + type tokens)
   Direção (A): modernizar mantendo o popular.
   Verde Amazon âncora + concreto + amarelo-obra. Mascote mantido.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700;1,800&family=Barlow:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand palette ---- */
  --verde-amazon:   #09964F;  /* primária — cor-âncora */
  --verde-vibrante: #0AAE5A;  /* hover claro / brilho */
  --verde-escuro:   #066B37;  /* headers, contornos, hover */
  --verde-profundo: #044D27;  /* fundos escuros de seção */
  --verde-claro:    #E6F4EC;  /* fundos suaves */
  --verde-claro-2:  #F2F9F5;  /* fundo de seção alternado */

  --amarelo-obra:   #FFC400;  /* acento / selo / capacete */
  --amarelo-escuro: #E0A800;

  --whatsapp:       #25D366;
  --whatsapp-dark:  #1EBE5A;

  --grafite:        #1C2329;  /* texto principal */
  --concreto:       #5B6670;  /* texto secundário, cinza concreto */
  --concreto-claro: #8A929B;  /* texto terciário */
  --linha:          #E3E7EA;  /* bordas */
  --concreto-bg:    #2A3036;  /* footer / faixas escuras */

  --branco:         #FFFFFF;
  --off-white:      #F7F8F9;

  /* ---- Semantic surface/text ---- */
  --bg:        var(--branco);
  --bg-alt:    var(--verde-claro-2);
  --fg1:       var(--grafite);
  --fg2:       var(--concreto);
  --fg3:       var(--concreto-claro);
  --on-dark:   var(--branco);
  --on-dark-2: rgba(255,255,255,.72);

  /* ---- Type families ---- */
  --font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --font-head:    'Barlow', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --sh-sm: 0 2px 8px rgba(28,35,41,.08);
  --sh-md: 0 10px 30px rgba(28,35,41,.10);
  --sh-lg: 0 24px 60px rgba(28,35,41,.16);
  --sh-green: 0 14px 34px rgba(9,150,79,.30);
  --sh-zap: 0 14px 30px rgba(37,211,102,.36);

  /* ---- Spacing rhythm ---- */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ============================================================
   Base type rules
   ============================================================ */
.t-eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.t-h1 { font-family: var(--font-display); font-weight: 800; line-height: .98; letter-spacing: -.005em; text-transform: uppercase; font-size: clamp(2.6rem, 6vw, 5rem); }
.t-h2 { font-family: var(--font-display); font-weight: 800; line-height: 1.0;  letter-spacing: -.005em; text-transform: uppercase; font-size: clamp(2rem, 4.2vw, 3.4rem); }
.t-h3 { font-family: var(--font-head); font-weight: 800; line-height: 1.1; font-size: clamp(1.3rem, 2vw, 1.7rem); }
.t-h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; font-size: 1.15rem; }

.t-lead { font-family: var(--font-body); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; }
.t-body { font-family: var(--font-body); font-weight: 500; font-size: 1.02rem; line-height: 1.6; }
.t-small { font-family: var(--font-body); font-weight: 500; font-size: .9rem; line-height: 1.5; }