/* =============================================================
   Sesión Cero — Design tokens
   Fuente de verdad: marca/Manual_Marca_Sesion_Cero.md (§19)
   Solo variables (colores, tipografías, radios, espaciado,
   sombras). El CSS de layout/componentes se construye en F1.

   Identidad: gamer neón, dark-first, retro pop.
   Modo oscuro por defecto; modo claro secundario ([data-theme]).
   ============================================================= */

:root {
  /* --- Brand colors --- */
  --color-cyan:    #00F2FF; /* primario: acciones, activos, enlaces, info */
  --color-magenta: #FF24B5; /* secundario: notificaciones, social, badges */
  --color-violet:  #7A3CFF; /* acento: profundidad, hover, portales */
  --color-yellow:  #FFE600; /* acento especial: XP, recompensas, logros */
  --color-white:   #FFFFFF;
  --color-night:   #0B0F29; /* base del sitio */

  /* --- Backgrounds / surfaces --- */
  --color-bg:            #0B0F29; /* fondo principal (azul noche) */
  --color-bg-soft:       #12183A; /* fondo secundario (void blue) */
  --color-surface:       #171D45; /* card (arcane navy) */
  --color-surface-hover: #20275C; /* superficie elevada (mystic indigo) */

  /* --- Text --- */
  --color-text:       #FFFFFF; /* texto principal */
  --color-text-soft:  #C8C8E8; /* texto secundario */
  --color-text-muted: #777DAA; /* texto desactivado */
  --color-text-dark:  #0B0F29; /* texto sobre fondos claros */

  /* --- Borders --- */
  --color-border:        #2E3470; /* borde violeta oscuro */
  --color-border-active: #00F2FF; /* borde activo/enfocado */

  /* --- System states --- */
  --color-success: #46FF88; /* verde XP */
  --color-error:   #FF3B5C; /* rojo crítico */
  --color-warning: #FFE600; /* amarillo quest */
  --color-info:    #00F2FF; /* cyan eléctrico */
  --color-pending: #7A3CFF; /* violeta energético */

  /* --- Gamification (§9.3) --- */
  --color-xp:            #FFE600;
  --color-level:         #00F2FF;
  --color-social:        #FF24B5;
  --color-reward:        #7A3CFF;
  --color-verification:  #46FF88;

  /* --- Fonts --- */
  --font-display: 'Bungee', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-glitch:  'Rubik Glitch', system-ui, sans-serif;

  /* --- Radius --- */
  --radius-sm:   10px; /* */
  --radius-md:   16px; /* inputs, botones */
  --radius-lg:   24px; /* cards */
  --radius-xl:   32px; /* modales */
  --radius-pill: 999px;

  /* --- Spacing (base 8px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* --- Effects (shadows / glow) --- */
  --shadow-cyan:    0 0 24px rgba(0, 242, 255, 0.35);
  --shadow-magenta: 0 0 24px rgba(255, 36, 181, 0.28);
  --shadow-violet:  0 0 32px rgba(122, 60, 255, 0.32);
  --shadow-card:    0 18px 60px rgba(0, 0, 0, 0.25);
}

/* =============================================================
   Modo claro (secundario, §15)
   Uso: documentos, áreas administrativas o lectura larga.
   Se mantienen los acentos cyan/magenta/violeta.
   ============================================================= */
:root[data-theme='light'] {
  --color-bg:            #FFFFFF;
  --color-bg-soft:       #F5F6FF;
  --color-surface:       #FFFFFF;
  --color-surface-hover: #F5F6FF;

  --color-text:       #0B0F29;
  --color-text-soft:  #565B7A;
  --color-text-muted: #777DAA;
  --color-text-dark:  #0B0F29;

  --color-border:        #D9DDF5;
  --color-border-active: #7A3CFF;
}