/* ============================================================
   MapeaMente — Variáveis de Design (tokens)
   Tema escuro azul/preto, moderno (estilo painel/dashboard).
   ============================================================ */

:root {
  /* Base escura */
  --preto:           #0A0A14;
  --preto-card:      #14141F;
  --preto-elevado:   #1C1C2B;
  --preto-radar:     #080812;

  /* Azuis (identidade) */
  --azul:            #2D6BFF;
  --azul-claro:      #4C9AFF;
  --azul-eletrico:   #00D4FF;
  --azul-profundo:   #1A3A8F;

  /* Destaques */
  --ciano:           #4CC9F0;
  --dourado:         #FFD700;
  --magenta:         #E03E8C;

  /* Texto */
  --texto:           #EAEAF2;
  --texto-suave:     #9A9AB0;
  --texto-escuro:    #0A0A14;

  /* Feedback */
  --sucesso:         #2FE08C;
  --atencao:         #FFB020;
  --erro:            #FF5470;

  /* Bordas e divisores */
  --borda:           #26263A;

  /* Tipografia */
  --fonte-titulo: 'Sora', system-ui, sans-serif;
  --fonte-corpo:  'Manrope', system-ui, sans-serif;

  /* Espaçamento (múltiplos de 4) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Raios */
  --r-sm: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Sombras / brilho */
  --glow-azul: 0 0 24px rgba(45, 107, 255, 0.25);
  --glow-ciano: 0 0 28px rgba(0, 212, 255, 0.30);
  --glow-dourado: 0 0 22px rgba(255, 215, 0, 0.30);
  --sombra-card: 0 8px 30px rgba(0, 0, 0, 0.45);

  /* Larguras */
  --largura-conteudo: 960px;

  /* Tempo de transição base */
  --t-tela: 350ms;
}