/* ============================================================
   TOKENS.CSS — Design tokens & CSS custom properties
   Fuente única de verdad para colores, espacios, tipografía.
   ============================================================ */

:root {
  /* ── Colores principales ── */
  --color-primary:        #1A8FFF;
  --color-primary-dark:   #0050AA;
  --color-primary-glow:   rgba(26, 143, 255, 0.25);

  /* ── Acentos ── */
  --color-accent-teal:    #00C8FF;
  --color-accent-magenta: #FF2D78;
  --color-accent-gold:    #FF2D78;

  /* ── Fondos (de más oscuro a más claro) ── */
  --color-dark:           #020409;
  --color-dark-2:         #07090F;
  --color-dark-3:         #0D1117;
  --color-dark-card:      #0B0E15;
  --color-dark-card-2:    #101520;

  /* ── Texto ── */
  --color-white:          #F0F6FF;
  --color-gray-light:     #C8D8EE;
  --color-gray-mid:       #7A90B0;
  --color-gray-dark:      #3A4560;

  /* ── Bordes ── */
  --color-border:         rgba(26, 143, 255, 0.08);
  --color-border-light:   rgba(26, 143, 255, 0.18);
  --color-border-mid:     rgba(26, 143, 255, 0.35);

  /* ── Tipografía ── */
  --font-display:  'Orbitron', sans-serif;
  --font-body:     'Rajdhani', sans-serif;

  /* ── Espaciado ── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  8rem;

  /* ── Layout ── */
  --container:  1200px;

  /* ── Radios ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* ── Transiciones ── */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Sombras / Glows ── */
  --glow-primary: 0 0 30px rgba(26, 143, 255, 0.4), 0 0 60px rgba(26, 143, 255, 0.15);
  --glow-teal:    0 0 30px rgba(0, 200, 255, 0.4),  0 0 60px rgba(0, 200, 255, 0.15);
  --glow-magenta: 0 0 30px rgba(255, 45, 120, 0.4), 0 0 60px rgba(255, 45, 120, 0.15);
}