/* ════════════════════════════════════════════════════════
   DESIGN TOKENS — SuaWebPage
   Todas as cores, fontes, espaçamentos e tamanhos do site.
   Edite aqui para mudar o visual globalmente.
════════════════════════════════════════════════════════ */

:root {

  /* ── Paleta principal ── */
  --color-bg:            #060810;
  --color-bg-alt:        #0a0c1a;
  --color-bg-dark:       #06080f;
  --color-surface:       rgba(255,255,255,0.04);
  --color-surface-hover: rgba(79,142,247,0.05);
  --color-border:        rgba(255,255,255,0.08);
  --color-border-accent: rgba(79,142,247,0.4);

  --color-white:         #ffffff;
  --color-text:          #ffffff;
  --color-text-muted:    rgba(255,255,255,0.5);
  --color-text-faint:    rgba(255,255,255,0.3);

  --color-accent:        #4f8ef7;
  --color-accent2:       #7c5cfc;
  --color-accent3:       #a78bfa;
  --color-accent4:       #f472b6;
  --color-whatsapp:      #25D366;

  /* gradientes reutilizáveis */
  --grad-accent:         linear-gradient(135deg, #4f8ef7, #7c5cfc);
  --grad-text:           linear-gradient(135deg, #4f8ef7 0%, #a78bfa 50%, #f472b6 100%);
  --grad-cta-text:       linear-gradient(135deg, #4f8ef7, #a78bfa);

  /* ── Seção branca (benefícios) ── */
  --color-light-bg:      #ffffff;
  --color-light-surface: #f7f8fc;
  --color-light-border:  #e8eaf2;
  --color-light-text:    #0f1225;
  --color-light-muted:   #5a5f7a;
  --color-light-accent:  var(--color-accent);

  /* ── Grid de fundo do hero ── */
  --color-grid:          rgba(255,255,255,0.06);

  /* ── Orbs do hero ── */
  --color-orb1:          #4f8ef7;
  --color-orb2:          #7c5cfc;

  /* ── Notebook ── */
  --nb-largura:          340px;
  --nb-altura-trapezio:  52px;
  --nb-cor-corpo:        #2a3160;
  --nb-cor-base:         #1e2550;
  --nb-cor-teclado-grid: #1a2245;
  --nb-cor-touchpad:     #3d4a80;
  --nb-cor-tela:         #1e2550;
  --nb-cor-grid-linha:   rgba(79,142,247,0.45);
  --nb-borda-tela:       rgba(79,142,247,0.7);
  --nb-glow-tela:        rgba(79,142,247,0.35);
  --nb-halo:             rgba(30,37,80,0.85);

  /* ── Tipografia ── */
  --font-display:        'Syne', sans-serif;
  --font-body:           'DM Sans', sans-serif;

  --text-:    0.7rem;
  --text-sm:    0.85rem;
  --text-base:  0.95rem;
  --text-md:    1.05rem;
  --text-lg:    1.2rem;
  --text-xl:    1.6rem;
  --text-2xl:   2.4rem;
  --text-hero:  clamp(2.4rem, 6vw, 5rem);
  --text-h2:    clamp(1.6rem, 3.5vw, 2.4rem);
  --text-cta-h: clamp(1.7rem, 4vw, 2.6rem);

  /* ── Espaçamentos ── */
  --space-xs:   0.35rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  5rem;
  --space-4xl:  6rem;

  /* ── Bordas ── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 100px;

  /* ── Sombras ── */
  --shadow-btn:         0 0 24px rgba(79,142,247,0.35);
  --shadow-btn-hover:   0 4px 32px rgba(79,142,247,0.55);
  --shadow-card-hover:  0 12px 40px rgba(79,142,247,0.12);
  --shadow-popup:       0 8px 32px rgba(0,0,0,0.5);
  --shadow-nb-base:     0 8px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(79,142,247,0.3);

  /* ── Transições ── */
  --transition-fast:    0.2s ease;
  --transition-mid:     0.25s ease;
  --transition-slow:    0.65s ease;

  /* ── Layout ── */
  --max-width-text:   480px;
  --max-width-steps:  680px;
  --max-width-cards:  960px;

  /* ── z-indexes ── */
  --z-hero:    1;
  --z-content: 10;
  --z-header:  100;
}