/* Iconos NGI del sistema (ver scripts/build-icons.py) */
@import url('icons-v2.css');

/* ════════════════════════════════════════════════════════════════════════
   NexoGamer — Design System v2 «SEÑAL» (rediseño 2026)
   ------------------------------------------------------------------------
   FUENTE ÚNICA del lenguaje visual v2. Sustituye a tokens.css página a página
   (misma interfaz de variables + los tokens nuevos del concepto SEÑAL: negro
   más profundo, violeta de marca conservado, acento ácido racionado al 1%,
   display Clash Display self-hosted, glows en vez de sombras).
   Mantiene ÍNTEGRAS las primitivas de accesibilidad de la v1.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Display: Clash Display (Fontshare, ITF Free Font License, self-host) ── */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ── Color · marca (violeta CONSERVADO de v1 + gradiente refinado) ── */
  --ng-violet:        #9D4EDD;
  --ng-violet-strong: #7C3AED;
  --ng-violet-light:  #C084FC;
  --ng-cyan:          #00D9FF;
  --ng-green:         #00DCA0;
  --ng-gold:          #FFB800;
  --ng-red:           #FF6060;

  /* ── Acento ácido: EL diferenciador v2. Regla 90/9/1: úsalo poco. ── */
  --ng-acid:          #D8FF3E;
  --ng-acid-dim:      rgba(216, 255, 62, .14);

  /* Acentos por categoría (heredados de v1) */
  --ng-acc-eco:  var(--ng-cyan);
  --ng-acc-com:  var(--ng-violet);
  --ng-acc-pre:  var(--ng-gold);
  --ng-acc-ps5:  #2E8AE6;
  --ng-acc-xbox: #16A34A;
  --ng-acc-nin:  #F43F5E;
  --ng-acc-str:  #FF6B35;
  --ng-acc-zur:  #C855E0;

  /* ── Color · superficies (más profundas que v1: #0F0F1E → #05060A) ── */
  --ng-bg:        #05060A;
  --ng-bg-2:      #0B0D14;
  --ng-surface:   #12141E;
  --ng-card:      #161826;
  --ng-border:    rgba(157, 78, 221, .16);
  --ng-border-2:  rgba(255, 255, 255, .07);

  /* ── Color · texto (AA sobre las superficies de arriba) ── */
  --ng-text:        #F2F2F7;
  --ng-text-2:      #C3C6D4;
  --ng-text-muted:  #9FA3B5;
  /* Texto de contenido desplegado en cards (legibilidad, pulido 2026-07-08):
     contraste ALTO porque se lee sobre superficie oscura en hover. */
  --ng-text-hi:     #E7E9F2;   /* descripciones desplegadas (13,7:1 s/ card-hover) */
  --ng-text-data:   #DFE2ED;   /* verdicts + rating (12,8:1) */
  --ng-text-label:  #A8ACBE;   /* etiquetas mono de categoría en cards (8,1:1) */
  --ng-card-hover:  #1B1E2C;   /* la card sube un paso al desplegarse */

  /* ── Tipografía ── */
  --ng-font-display: 'Clash Display', 'Inter', system-ui, sans-serif;
  --ng-font:  'Inter', system-ui, -apple-system, sans-serif;
  --ng-mono:  'JetBrains Mono', ui-monospace, monospace;
  /* Escala display v2: valiente. El héroe llega a 168px en pantallas grandes. */
  --ng-fs-hero:    clamp(56px, 11vw, 168px);
  --ng-fs-display: clamp(44px, 8vw, 120px);
  --ng-fs-h1:      clamp(34px, 5.5vw, 64px);
  --ng-fs-h2:      clamp(28px, 4vw, 48px);
  --ng-fs-h3:      20px;
  --ng-fs-body:    16px;
  --ng-fs-sm:      14px;
  --ng-fs-xs:      12px;
  --ng-track-display: -0.03em;

  /* ── Espaciado (escala 4px, heredada) ── */
  --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;
  --ng-section: clamp(96px, 14vh, 160px);   /* respiración entre secciones v2 */

  /* ── Radios (v2 es más anguloso que v1) ── */
  --ng-r-sm: 6px; --ng-r-md: 10px; --ng-r-lg: 14px; --ng-r-xl: 20px; --ng-r-pill: 999px;

  /* ── Luz: glows en vez de sombras (la luz EMERGE del negro) ── */
  --ng-shadow-1: 0 2px 10px rgba(0, 0, 0, .45);
  --ng-shadow-2: 0 12px 32px rgba(0, 0, 0, .55);
  --ng-glow:      0 0 24px rgba(157, 78, 221, .28);
  --ng-glow-acid: 0 0 20px rgba(216, 255, 62, .22);
  /* Profundidad de fondo: capas radiales fijas (estáticas, coste cero) */
  --ng-depth-1: radial-gradient(ellipse 90% 55% at 50% -12%, rgba(124, 58, 237, .16) 0%, transparent 65%);
  --ng-depth-2: radial-gradient(ellipse 60% 45% at 85% 110%, rgba(0, 217, 255, .05) 0%, transparent 60%);

  /* ── Imagen de producto flotante (cutouts img/v2/, pulido 2026-07-08) ──
     Estándar de componente: caja 200px, producto dibujado ≤168px de alto y
     ≤268px de ancho (misma escala en home y categorías), glow violeta detrás
     y sombra de apoyo. Variantes -lg para la ficha de producto. */
  --ng-img-h:         200px;
  --ng-img-max-w:     268px;
  --ng-img-glow:      radial-gradient(ellipse 62% 55% at 50% 58%, rgba(124, 58, 237, .16) 0%, transparent 72%);
  --ng-img-glow-lg:   radial-gradient(ellipse 60% 55% at 50% 58%, rgba(124, 58, 237, .18) 0%, transparent 72%);
  --ng-img-shadow:    drop-shadow(0 14px 22px rgba(0, 0, 0, .45));
  --ng-img-shadow-lg: drop-shadow(0 18px 30px rgba(0, 0, 0, .5));

  /* ── Motion ── */
  --ng-ease: cubic-bezier(.4, 0, .2, 1);
  --ng-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ng-dur-fast: .15s; --ng-dur: .25s; --ng-dur-slow: .5s;
  --ng-marquee-duration: 36s;

  /* ── 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 ── */
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 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Las marquesinas v2 quedan estáticas y con overflow oculto (legibles). */
  .marquee-track { animation: none !important; transform: none !important; }
}

/* ── Contraste accesible heredado (páginas aún en v1 que carguen esto) ── */
:root { --text-muted: #9FA3B5; }

/* ── Estado activo del nav (marcado por js/nav.js) ── */
.nav-products-btn.active { color: var(--ng-violet-light); }
.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-light); }

/* ── Selección y scrollbar de marca (v2) ── */
::selection { background: var(--ng-violet); color: #fff; }