/* ============================================================
   variables.css — Tokens de diseño (colores, fuentes, radios)
   Modifica aquí para cambiar el tema completo de la app.
   ============================================================ */

:root {
  /* Colores base */
  --bg:        #0d0b14;
  --surface:   #13102a;
  --card:      #1a1535;
  --border:    #2e2060;

  /* Acentos */
  --accent:       #9b5cff;
  --accent-dim:   rgba(155, 92, 255, 0.12);
  --accent-glow:  rgba(155, 92, 255, 0.25);
  --danger:       #ff5a5a;
  --danger-dim:   rgba(255, 90, 90, 0.12);
  --success:      #4aefb0;
  --info:         #a87dff;

  /* Texto */
  --text:      #eee8ff;
  --muted:     #7a6aa0;
  --text-dim:  #c4b8e8;

  /* Tipografía */
  --font-display: 'Syne', sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* Radios */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-pill: 99px;

  /* Sombras */
  --shadow-accent: 0 12px 40px var(--accent-glow);
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.4);

  /* Transición global */
  --transition: 0.2s ease;
}