/* ═══════════════════════════════════════
   DESIGN TOKENS — Isaac Amaral / Grupo Insight
   Paleta da marca: Roxo #4924F5 · Preto · Branco · Cinza
   Fontes: Buenos Aires (títulos) · Montserrat (corpo)
═══════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --void:           #070710;
  --surface-1:      #0d0d1a;
  --surface-2:      #13131f;
  --surface-3:      #1a1a2a;

  /* ── Primary — Purple (marca Isaac Amaral) ── */
  --purple:         #4924F5;
  --purple-deep:    #3B19CC;
  --purple-dark:    #2E13A3;
  --purple-light:   #6B4FFF;
  --purple-glow:    rgba(73, 36, 245, 0.40);
  --purple-soft:    rgba(73, 36, 245, 0.12);
  --purple-10:      rgba(73, 36, 245, 0.10);
  --purple-30:      rgba(73, 36, 245, 0.30);

  /* ── Semantic — Green (sucesso) / Red (erro) ── */
  --green:          #00D47E;
  --green-dark:     #00B368;
  --red:            #ff4444;

  /* ── Neutrals ── */
  --white:          #FFFFFF;
  --gray-100:       #F5F5F5;
  --gray-200:       #E0E0E0;
  --gray-light:     #B0B0B0;
  --gray:           #808080;
  --gray-dark:      #333333;
  --black:          #000000;

  /* ── Card / Panel system ── */
  --card-bg:        rgba(255, 255, 255, 0.03);
  --card-bg-hover:  rgba(255, 255, 255, 0.06);
  --card-border:    rgba(255, 255, 255, 0.08);
  --card-highlight: rgba(255, 255, 255, 0.10);

  /* ── Gradients (somente variações de roxo) ── */
  --gradient-purple: linear-gradient(135deg, #4924F5, #3B19CC);

  /* ── Typography ── */
  --font-display: 'Buenos Aires', 'Montserrat', sans-serif;
  --font-body:    'Montserrat', sans-serif;

  /* ── Type Scale ── */
  --text-hero:    clamp(2.5rem, 5vw, 4.5rem);
  --text-h2:      clamp(1.75rem, 3vw, 2.75rem);
  --text-h3:      clamp(1.2rem, 1.8vw, 1.5rem);
  --text-body:    clamp(0.9rem, 1vw, 1rem);
  --text-caption: 0.75rem;

  /* ── Tracking (letter-spacing) ── */
  --tracking-tight:   -0.03em;
  --tracking-display: -0.02em;
  --tracking-wide:     0.12em;

  /* ── Layout ── */
  --nav-h:        72px;
  --nav-h-mobile: 60px;
  --section-px:   clamp(20px, 5vw, 80px);
  --section-py:   clamp(56px, 7vh, 96px);
  --max-w:        1200px;
  --max-w-wide:   1600px;
  --max-w-narrow: 1000px;
  --radius:       12px;
  --radius-lg:    20px;
  --radius-sm:    8px;
  --radius-pill:  100px;

  /* ── Transitions ── */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration:       0.3s;
  --duration-slow:  0.6s;
  --duration-reveal:0.8s;

  /* ── Shadows ── */
  --shadow-sm:  0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.4);

  /* ── Borders ── */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-light:  rgba(255, 255, 255, 0.08);

  /* ── Z-index layers ── */
  --z-bg:       0;
  --z-content:  1;
  --z-overlay:  10;
  --z-nav:      100;
  --z-drawer:   200;
  --z-modal:    500;
  --z-cursor:   100000;
}

@media (max-width: 768px) {
  :root {
    --nav-h: var(--nav-h-mobile, 60px);
  }
}