/* ============================================================
   VARS.CSS — Paleta de cores, fontes e variáveis globais
   ============================================================
   ✏️  Este é o arquivo principal para personalização visual.
   Altere os valores aqui e o site inteiro se atualiza.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     🎨 CORES PRINCIPAIS
  ---------------------------------------------------------- */
  --purple:        #8B44F7;   /* Roxo principal — botões, destaques */
  --purple-dark:   #6B2FD9;   /* Roxo escuro — hover, gradiente */
  --purple-deep:   #4A1FA3;   /* Roxo profundo — sombras, gradiente fim */
  --purple-light:  #B878FF;   /* Roxo claro — textos de acento, tags */
  --purple-pale:   #EDE4FF;   /* Roxo muito claro — fundos claros */

  /* ----------------------------------------------------------
     🖼️  FUNDOS
  ---------------------------------------------------------- */
  --bg-dark:       #0D0A1A;   /* Fundo principal (escuro) */
  --bg-mid:        #130E24;   /* Fundo alternado entre seções */
  --bg-light:      #F8F5FF;   /* Fundo claro (não usado atualmente) */

  /* ----------------------------------------------------------
     🔤 TEXTOS
  ---------------------------------------------------------- */
  --white:         #FFFFFF;
  --text-dark:     #1A1025;
  --text-muted:    #6B5F80;   /* Texto discreto (rodapé, labels) */
  --text-light:    rgba(255, 255, 255, 0.72); /* Texto secundário sobre fundo escuro */

  /* ----------------------------------------------------------
     🌈 GRADIENTES
     Altere os valores de cor acima que estes se atualizam
     automaticamente via variáveis.
  ---------------------------------------------------------- */
  --gradient:      linear-gradient(135deg, #8B44F7 0%, #6B2FD9 60%, #4A1FA3 100%);
  --gradient-glow: linear-gradient(135deg, #B878FF 0%, #8B44F7 100%);

  /* ----------------------------------------------------------
     ✅ CORES DE FEEDBACK (formulário)
  ---------------------------------------------------------- */
  --error:         #FF6B6B;
  --success:       #4CFFA8;

  /* ----------------------------------------------------------
     📐 ESPAÇAMENTOS E ARREDONDAMENTOS
  ---------------------------------------------------------- */
  --radius-sm:     8px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --radius-xl:     50px;   /* Pílulas / botões arredondados */

  /* ----------------------------------------------------------
     🔠 TIPOGRAFIA
     Fontes carregadas via Google Fonts nos HTMLs.
     Para trocar a fonte de títulos, altere aqui E nos <link>
     do Google Fonts nos arquivos HTML.
  ---------------------------------------------------------- */
  --font-heading:  'Playfair Display', 'Georgia', serif;
  --font-body:     'DM Sans', 'Arial', sans-serif;

}