/* ============================================================
   MaterialNexus · Tokens de diseño (tema AZUL + NEGRO)
   Cambia aquí los colores y se reflejan en todo el sitio.
   ============================================================ */
:root {
  /* --- Negros / superficies --- */
  --bg:           #06080d;   /* fondo general (casi negro) */
  --bg-2:         #0a0e16;   /* fondo de secciones */
  --surface:      #0f1521;   /* tarjetas */
  --surface-2:    #151d2c;   /* tarjetas hover / inputs */
  --border:       #1e2940;   /* bordes sutiles */
  --border-2:     #2b3a5c;   /* bordes resaltados */

  /* --- Azules (color principal) --- */
  --blue:         #2f6bff;   /* azul principal */
  --blue-600:     #1d54e0;
  --blue-400:     #5b8bff;
  --blue-300:     #8fb0ff;
  --blue-glow:    rgba(47, 107, 255, 0.45);
  --blue-soft:    rgba(47, 107, 255, 0.12);

  /* --- Texto --- */
  --text:         #e8eef9;
  --text-muted:   #93a1bd;
  --text-dim:     #5e6c87;

  /* --- Estados --- */
  --green:        #34d399;
  --amber:        #fbbf24;

  /* --- Tipografía --- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* --- Radios --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* --- Sombras --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-blue: 0 8px 30px -6px var(--blue-glow);

  /* --- Layout --- */
  --container: 1240px;
  --header-h: 68px;

  /* --- Transición --- */
  --ease: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}