/* ============================================
   Atmic GamerZone - Design Tokens
   Colores, tipografías, espaciados y sombras
   ============================================ */

:root {
  /* ---- Colores de marca ---- */
  --color-morado:        #7B2CBF;
  --color-azul:          #3A86FF;
  --color-violeta:       #9D4EDD;
  --color-rosa:          #FF006E;
  --color-fondo-1:       #0D0221;
  --color-fondo-2:       #1A0B2E;
  --color-texto:         #F8F9FA;
  --color-texto-suave:   #B8B5C9;
  --color-borde:         rgba(157, 78, 221, 0.25);

  /* ---- Estados ---- */
  --color-exito:         #22C55E;
  --color-error:         #EF4444;
  --color-advertencia:   #F59E0B;

  /* ---- Gradientes ---- */
  --grad-principal:      linear-gradient(135deg, #7B2CBF 0%, #3A86FF 100%);
  --grad-neon:           linear-gradient(135deg, #9D4EDD 0%, #FF006E 100%);
  --grad-fondo:          linear-gradient(180deg, #0D0221 0%, #1A0B2E 100%);
  --grad-texto:          linear-gradient(90deg, #9D4EDD 0%, #3A86FF 50%, #FF006E 100%);

  /* ---- Tipografía ---- */
  --font-titulo:         'Orbitron', 'Rajdhani', sans-serif;
  --font-cuerpo:         'Inter', system-ui, -apple-system, sans-serif;

  --fs-xs:               0.75rem;   /* 12px */
  --fs-sm:               0.875rem;  /* 14px */
  --fs-base:             1rem;      /* 16px */
  --fs-lg:               1.125rem;  /* 18px */
  --fs-xl:               1.5rem;    /* 24px */
  --fs-2xl:              2rem;      /* 32px */
  --fs-3xl:              2.75rem;   /* 44px */
  --fs-4xl:              3.75rem;   /* 60px */

  /* ---- Espaciados ---- */
  --sp-1:                0.25rem;
  --sp-2:                0.5rem;
  --sp-3:                0.75rem;
  --sp-4:                1rem;
  --sp-5:                1.5rem;
  --sp-6:                2rem;
  --sp-7:                3rem;
  --sp-8:                4rem;

  /* ---- Radios ---- */
  --radius-sm:           6px;
  --radius-md:           12px;
  --radius-lg:           18px;
  --radius-full:         9999px;

  /* ---- Sombras y neón ---- */
  --shadow-card:         0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-hover:        0 12px 36px rgba(123, 44, 191, 0.35);
  --glow-morado:         0 0 18px rgba(123, 44, 191, 0.6);
  --glow-azul:           0 0 18px rgba(58, 134, 255, 0.6);
  --glow-rosa:           0 0 18px rgba(255, 0, 110, 0.6);

  /* ---- Layout ---- */
  --header-height:       72px;
  --container-max:       1280px;
  --transition:          0.25s cubic-bezier(0.4, 0, 0.2, 1);
}