/* ════════════════════════════════════════════════════════════════════════
   NexoGamer — Design System (tokens + primitivas globales)
   ------------------------------------------------------------------------
   FUENTE ÚNICA del lenguaje visual. Cárgalo en <head> DESPUÉS del <style>
   inline de cada página para que las primitivas de accesibilidad ganen.

   Es ADITIVO y seguro: define tokens (para migrar componentes poco a poco)
   y dos mejoras globales sin riesgo de regresión —foco visible y respeto a
   prefers-reduced-motion—. No reestiliza componentes existentes.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Color · marca ── */
  --ng-violet:        #9D4EDD;
  --ng-violet-strong: #7B2FBE;
  --ng-violet-light:  #B571F5;
  --ng-cyan:          #00D9FF;
  --ng-green:         #00DCA0;
  --ng-gold:          #FFB800;
  --ng-red:           #FF6060;

  /* Acentos por categoría (consolidados; antes derivaban por página) */
  --ng-acc-eco:  var(--ng-cyan);
  --ng-acc-com:  var(--ng-violet);
  --ng-acc-pre:  var(--ng-gold);
  --ng-acc-ps5:  #0070D1;
  --ng-acc-xbox: #107C10;
  --ng-acc-nin:  #E4000F;
  --ng-acc-str:  #FF6B35;
  --ng-acc-zur:  #C855E0;

  /* ── Color · superficies (dark) ── */
  --ng-bg:        #0F0F1E;
  --ng-bg-2:      #13131F;
  --ng-surface:   #1E1E30;
  --ng-card:      #252538;
  --ng-border:    rgba(157,78,221,.15);
  --ng-border-2:  rgba(255,255,255,.08);

  /* ── Color · texto ── */
  --ng-text:        #E8E8F0;
  --ng-text-2:      #BFBFCE;
  --ng-text-muted:  #9898AE;   /* +contraste vs el #8888A0 previo */

  /* ── Tipografía ── */
  --ng-font:  'Inter', system-ui, -apple-system, sans-serif;
  --ng-mono:  'JetBrains Mono', ui-monospace, monospace;
  /* Escala display fluida */
  --ng-fs-display: clamp(40px, 8vw, 116px);
  --ng-fs-h1:      clamp(32px, 5vw, 56px);
  --ng-fs-h2:      clamp(24px, 3.5vw, 40px);
  --ng-fs-h3:      20px;
  --ng-fs-body:    16px;
  --ng-fs-sm:      14px;
  --ng-fs-xs:      12px;

  /* ── Espaciado (escala 4px) ── */
  --ng-1: 4px;  --ng-2: 8px;  --ng-3: 12px; --ng-4: 16px;
  --ng-5: 24px; --ng-6: 32px; --ng-7: 48px; --ng-8: 64px; --ng-9: 96px;

  /* ── Radios ── */
  --ng-r-sm: 8px; --ng-r-md: 12px; --ng-r-lg: 16px; --ng-r-xl: 24px; --ng-r-pill: 999px;

  /* ── Sombras (en dark, sutiles + glow de marca) ── */
  --ng-shadow-1: 0 2px 8px rgba(0,0,0,.25);
  --ng-shadow-2: 0 8px 24px rgba(0,0,0,.35);
  --ng-glow:     0 8px 32px rgba(157,78,221,.25);

  /* ── Motion ── */
  --ng-ease: cubic-bezier(.4,0,.2,1);
  --ng-dur-fast: .15s; --ng-dur: .25s; --ng-dur-slow: .4s;

  /* ── Foco accesible ── */
  --ng-focus: #5CC6FF;

  --ng-z-nav: 1000; --ng-z-modal: 2000;
}

/* ── Foco visible accesible (solo teclado, no rompe el click de ratón) ── */
:where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--ng-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Cursor nativo en todo el sitio (anula cualquier cursor custom heredado) ── */
html, body { cursor: auto; }
a[href], button, [role="button"], summary, label[for],
input[type="submit"], input[type="button"], .product-card[data-href] { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
#cursor, #cursor-ring { display: none !important; }

/* ── Respeto a usuarios que reducen movimiento (accesibilidad + percepción) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Contraste accesible: el texto "muted" (#8888A0) fallaba WCAG AA sobre las
   superficies --card (~3.9:1). Se sube a #9A9AB2 (~4.8:1) en todo el sitio.
   tokens.css carga después del <style> inline, así que este valor gana. ── */
:root { --text-muted: #9A9AB2; }

/* ── Estado activo del nav (lo marca js/nav.js según la URL, unificado) ── */
.nav-products-btn.active { color: var(--ng-violet); }
.nav-products-btn.active::after { transform: scaleX(1) !important; transform-origin: left !important; }
.nav-dropdown .dd-item.active { background: rgba(157,78,221,.12); }
.nav-dropdown .dd-item.active .dd-label { color: var(--ng-violet-light); font-weight: 600; }
.nav-links a.active { color: var(--ng-violet); }
