:root {
  --bg-dark: #0a0c10;
  --bg-card: #12161f;
  --bg-secondary: #181d28;
  --accent-purple: #8b5cf6;
  --accent-cyan: #06b6d4;
  --accent-magenta: #ec4899;
  --whatsapp-green: #25d366;
  --text-primary: #f3f4f6;
  --text-muted: #9ca3af;
}

body {
  background-color: var(--bg-dark) !important;
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

/* Clases utilitarias personalizadas */
.bg-dark-card { background-color: var(--bg-card); }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.text-accent { color: var(--accent-purple); }
.text-cyan { color: var(--accent-cyan); }
.text-magenta { color: var(--accent-magenta); }
.text-muted-custom { color: var(--text-muted); }
.border-purple { border-color: rgba(139, 92, 246, 0.3) !important; }

/* Tipografía en degradado */
.text-gradient {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Foco visible claro para accesibilidad por teclado */
:focus-visible {
  outline: 3px solid var(--accent-cyan) !important;
  outline-offset: 2px;
}