/* =========================================
   DESIGN TOKENS — cor única: roxo
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* --- Cores base --- */
  --bg:          #020202;
  --surface:     #0a0a0a;
  --surface-2:   #111111;
  --border:      rgba(255, 255, 255, 0.07);
  --border-2:    rgba(124, 58, 237, 0.25);

  /* --- Texto --- */
  --text:        #f0f0f5;
  --text-muted:  #7070888;
  --text-subtle: #9090a8;

  /* --- Acento único: roxo --- */
  --purple:        #7c3aed;
  --purple-mid:    #6d28d9;
  --purple-light:  #a78bfa;
  --purple-pale:   #c4b5fd;
  --purple-dark:   #4c1d95;
  --purple-glow:   rgba(124, 58, 237, 0.18);

  /* mantém variáveis de outros nomes apontando pro roxo (compatibilidade) */
  --cyan:        #7c3aed;
  --amber:       #9d5ff5;
  --green:       #6d28d9;

  /* --- Gradientes — mono purple --- */
  --grad-brand:  linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  --grad-hero:   linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);
  --grad-card:   linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);

  /* --- Espaçamento --- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

  /* --- Raios --- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 100px;

  /* --- Sombras — todas roxas --- */
  --shadow-card:         0 4px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow-purple:  0 0 40px rgba(124, 58, 237, 0.3);
  --shadow-glow-cyan:    0 0 40px rgba(124, 58, 237, 0.3);
  --shadow-glow-amber:   0 0 40px rgba(124, 58, 237, 0.25);
  --shadow-glow-green:   0 0 40px rgba(109, 40, 217, 0.25);

  /* --- Transições --- */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.3s;
}