/* ============================================================
   base.css — Tokens, reset, tipografia base
   ============================================================ */

:root{
  /* Paleta */
  --bg-deep: #0D1F18;        /* verde-protocolo */
  --bg-elev: #132A22;        /* card */
  --bg-elev-2: #18352B;      /* hover / selecionado */
  --sand: #F5F2E8;           /* texto principal */
  --warm: #A8B5AE;           /* texto secundário */
  --gold: #C69C6D;           /* ouro Primal */
  --gold-rgb: 198, 156, 109; /* RGB do --gold pra rgba() em shadows/glows */
  --gold-deep: #A8834A;

  /* Gradientes */
  --grad-gold: linear-gradient(135deg, #d4af37 0%, #C69C6D 50%, #a8834a 100%);
  --grad-foil: linear-gradient(120deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);

  /* Linhas / bordas */
  --line: rgba(198,156,109,.18);
  --line-soft: rgba(245,242,232,.08);

  /* Sombras */
  --shadow-gold: 0 12px 32px -8px rgba(198,156,109,.32);
  --shadow-card: 0 30px 60px -30px rgba(0,0,0,.6);

  /* Radius */
  --radius-card: 12px;
  --radius-btn: 8px;

  /* Tipo */
  --font-h: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-b: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Easing */
  --ease: cubic-bezier(.16,1,.3,1); /* ease-out-expo */

  /* WhatsApp clássico (referência da marca) */
  --wa-green: #25D366;

  /* Verde do CTA WhatsApp na VSL — tom do botão de play do Panda Video.
     Verde-floresta escuro (#2D6028) — harmoniza com --bg-deep #0D1F18
     e contrasta por complementaridade quente/fria com --gold #C69C6D.
     Contraste com branco: 8.4:1 (AAA). Mantém RGB sincronizado pro rgba() do glow. */
  --btn-cta-green: #2D6028;
  --btn-cta-green-rgb: 45, 96, 40;
}

/* Reset enxuto */
*, *::before, *::after{
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body{
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
}

body{
  font-family: var(--font-b);
  color: var(--sand);
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top, rgba(198,156,109,.06), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(198,156,109,.04), transparent 60%),
    var(--bg-deep);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

button{
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
  padding: 0;
}

input, textarea, select{
  font-family: inherit;
  color: inherit;
}

a{
  color: var(--gold);
  text-decoration: none;
}

img{ max-width: 100%; display: block; }

/* Foil shimmer animation (reusada por título, progress, slider, etc) */
@keyframes shimmer{
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Tipografia foil */
.foil{
  background: var(--grad-foil);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  filter: drop-shadow(0 0 14px rgba(198,156,109,.35));
  animation: shimmer 6s linear infinite;
}

/* Reduced motion: desliga shimmer e transições longas */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visível pra teclado */
:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Utilitários */
.gold{ color: var(--gold); }
[hidden]{ display: none !important; }