/* ═══════════════════════════════════════════════════════════
   ENGLISH VIP COURSE v2 — Design Tokens
   Inspirado em GeraCloud: navy + mid blue + teal/cyan accent
═══════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --brand-deep:   #1a2545;     /* deep navy */
  --brand-mid:    #3d5fbf;     /* mid blue */
  --brand-cyan:   #6cb8e3;     /* sky cyan */
  --brand-teal:   #93c5fd;     /* azul-claro (substituiu mint teal) */
  --brand-accent: #bfdbfe;     /* azul-claro-claro */
  --accent:       #fbbf24;     /* CTA amarelo (telefone header) */
  --accent-hover: #f59e0b;

  /* WhatsApp */
  --whatsapp:        #25D366;
  --whatsapp-hover:  #1ebe5d;

  /* Neutros */
  --bg:          #FAFBFC;
  --surface:     #FFFFFF;
  --surface-2:   #F4F6FA;
  --border:      #E5EAF1;
  --border-soft: #EFF2F7;
  --text:        #1a2545;
  --text-soft:   #4a5876;
  --text-mute:   #8693ad;
  --red:         #e14c4c;

  /* Tipografia */
  --font-display: 'Poppins', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Espaçamento (escala 4px) */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:  128px;

  /* Sombras (GeraCloud-style: suaves, em camadas) */
  --shadow-1: 0 1px 2px rgba(20, 30, 60, 0.04);
  --shadow-2: 0 1px 2px rgba(20, 30, 60, 0.04), 0 8px 24px -12px rgba(20, 30, 60, 0.12);
  --shadow-3: 0 2px 4px rgba(20, 30, 60, 0.04), 0 20px 50px -20px rgba(20, 30, 60, 0.18);
  --shadow-glow: 0 20px 60px -20px rgba(61, 95, 191, 0.45);
  --shadow-glow-teal: 0 20px 60px -20px rgba(109, 214, 197, 0.55);
  --shadow-deep: 0 30px 80px rgba(20, 30, 60, 0.18);

  /* Gradientes */
  --gradient-hero:    linear-gradient(180deg, #3d5fbf 0%, #1a2545 100%);
  --gradient-accent:  linear-gradient(135deg, #6dd6c5 0%, #6cb8e3 100%);
  --gradient-deep:    linear-gradient(180deg, #1a2545 0%, #0f1730 100%);
  --gradient-soft:    linear-gradient(180deg, #FAFBFC 0%, #F4F6FA 100%);
  --gradient-card:    linear-gradient(135deg, #6dd6c5 0%, #6cb8e3 50%, #88e3d3 100%);

  /* Radius (GeraCloud: rounded-full nos botões, xl nos cards) */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* Easings */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: all 0.3s var(--ease-smooth);
}