/* =========================================================
   DESIGN TOKENS — ViralizeBR
   Valores amostrados diretamente dos pixels das referências.
   Tudo aqui é sobrescrito pelo Personalizador do WordPress.
   ========================================================= */

:root {
  /* --- Superfícies --- */
  --vz-bg:              #09090B;
  --vz-bg-elevated:     #101013;
  --vz-card-bg:         #0D0D0F;
  --vz-card-tint:       rgba(255, 52, 130, .05);
  --vz-card-border:     #B45309;
  --vz-card-border-hover: #FE5762;

  /* --- Texto --- */
  --vz-text:            #FFFFFF;
  --vz-text-muted:      #A1A1AA;
  --vz-text-dim:        #71717A;

  /* --- Marca --- */
  --vz-pink:            #FF3482;
  --vz-orange:          #FC7519;
  --vz-grad-brand:      linear-gradient(90deg, var(--vz-pink) 0%, var(--vz-orange) 100%);

  --vz-price-start:     #FF5170;
  --vz-price-end:       #FD6649;
  --vz-grad-price:      linear-gradient(90deg, var(--vz-price-start) 0%, var(--vz-price-end) 100%);

  /* --- Semânticas --- */
  --vz-success:         #2FA758;
  --vz-warning:         #F59E0B;
  --vz-warning-bg:      rgba(245, 158, 11, .08);
  --vz-warning-border:  #291A10;
  --vz-green-bar:       #21C35D;
  --vz-red-section:     #F13C3C;
  --vz-grad-help:       linear-gradient(90deg, #FF8714 0%, #FFA427 100%);
  --vz-whatsapp:        #25D366;

  /* --- Tipografia --- */
  --vz-font-heading:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vz-font-body:       'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --vz-fs-hero:         clamp(2rem, 6vw, 3.25rem);
  --vz-fs-section:      clamp(1.5rem, 4vw, 2rem);
  --vz-fs-card-title:   1.375rem;
  --vz-fs-price:        2.5rem;
  --vz-fs-body:         1rem;
  --vz-fs-small:        .8125rem;
  --vz-fs-tiny:         .6875rem;

  --vz-fw-normal:       400;
  --vz-fw-medium:       500;
  --vz-fw-bold:         700;
  --vz-fw-black:        800;

  /* --- Geometria --- */
  --vz-radius-card:     20px;
  --vz-radius-button:   14px;
  --vz-radius-input:    12px;
  --vz-radius-pill:     999px;

  /* --- Espaçamento --- */
  --vz-space-1:         .25rem;
  --vz-space-2:         .5rem;
  --vz-space-3:         .75rem;
  --vz-space-4:         1rem;
  --vz-space-6:         1.5rem;
  --vz-space-8:         2rem;
  --vz-space-12:        3rem;
  --vz-space-16:        4rem;

  --vz-grid-gap:        1.25rem;
  --vz-container:       1160px;
  --vz-section-py:      clamp(2.5rem, 6vw, 4.5rem);

  /* --- Efeitos --- */
  --vz-glow-pink:       0 0 24px rgba(255, 52, 130, .45);
  --vz-glow-pink-strong:0 0 38px rgba(255, 52, 130, .65);
  --vz-glow-card:       0 0 30px rgba(255, 52, 130, .18);
  --vz-shadow-card:     0 8px 32px rgba(0, 0, 0, .5);

  --vz-transition:      200ms cubic-bezier(.4, 0, .2, 1);
  --vz-transition-slow: 380ms cubic-bezier(.4, 0, .2, 1);
}

/* Overrides responsivos — o Personalizador escreve aqui */
@media (max-width: 1024px) {
  :root {
    --vz-grid-gap:      1rem;
    --vz-fs-price:      2.25rem;
    --vz-fs-card-title: 1.25rem;
  }
}

@media (max-width: 640px) {
  :root {
    --vz-fs-price:      2rem;
    --vz-fs-card-title: 1.125rem;
    --vz-radius-card:   16px;
    --vz-section-py:    2.5rem;
    --vz-grid-gap:      .875rem;
  }
}