/* ============================================
   PIXELCLUB — Design Tokens / Variables
   ============================================ */

:root {
  /* ── Colors ── */
  --bg-primary: #0a0a0f;
  --bg-secondary: #1a1a2e;
  --bg-card: #16213e;
  --bg-card-hover: #1f2b47;
  --bg-input: #0f0f1a;
  --bg-overlay: rgba(10, 10, 15, 0.6);
  --bg-navbar: rgba(10, 10, 15, 0.75);

  /* Accent colors */
  --accent-games: #00f5d4;
  --accent-movies: #f72585;
  --accent-series: #ffd60a;

  /* Variantes seguras para TEXTO PEQUEÑO sobre fondos teñidos.
     El magenta de marca (#f72585) se queda en 4,4:1 cuando se usa como texto de
     7 px sobre una tarjeta con su propio tinte, por debajo del 4,5:1 que exige
     la WCAG AA. La marca no se toca: se usa esta variante solo donde el acento
     hace de letra. Para bordes, rellenos y titulares sigue mandando el de arriba. */
  --accent-movies-texto: #ff4d9d;
  --accent-hover: #7b2ff7;
  /* Misma jugada que con el magenta, ahora con el morado: como letra pequeña
     sobre una tarjeta oscura (#16213e) se queda en 2,9:1. Esta variante da
     4,8:1 ahí y 5,2:1 sobre el decorado translúcido. Solo donde el morado
     hace de TEXTO; para bordes, franjas y hovers sigue mandando el de arriba. */
  --accent-hover-texto: #a570ff;
  --pixel-green: #39ff14;
  --accent-danger: #ff3333;
  --accent-info: #00b4d8;

  /* Text colors */
  --text-primary: #e0e0e0;
  --text-secondary: #8892b0;
  --text-muted: #838ba5; /* bumped from #555a6e for WCAG AA contrast (~4.6:1 on --bg-primary) */
  --text-inverse: #0a0a0f;

  /* Color de los bordes tenues.
     Se usaba 15 veces como `--color-border` y `--borde` sin estar definido en
     ningún sitio: funcionaba de milagro, por el valor de reserva que llevaba
     detrás cada uso. Ahora existe, y cambiarlo aquí cambia los 15. */
  --border-color: #2a2a45;

  /* ── Spacing ── */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ── Typography ── */
  --font-pixel: 'Press Start 2P', 'Courier New', ui-monospace, monospace;
  --font-body: 'VT323', 'Courier New', ui-monospace, monospace;

  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 20px;
  --text-lg: 24px;
  --text-xl: 28px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 48px;

  --pixel-xs: 8px;
  --pixel-sm: 10px;
  --pixel-base: 12px;
  --pixel-lg: 14px;
  --pixel-xl: 18px;
  --pixel-2xl: 22px;
  --pixel-3xl: 28px;
  --pixel-4xl: 36px;

  /* ── Los dos escalones que faltaban ────────────────────────────────────
     Mirando las referencias que trajo Rubén —Cosmochain, Milady, PX-NFTs—
     todas hacen lo mismo y PixelClub no lo hacía ninguna: **el titular es
     enorme**. Ahí ocupa media pantalla y funciona como una ilustración; aquí
     el título de página iba a 22 px, apenas el doble que el cuerpo.

     En pixel art eso importa más que en cualquier otro estilo, porque una
     tipografía de píxeles pequeña se lee peor que una normal —no tiene
     suavizado— y grande se lee mejor **y además se ve el dibujo de cada
     letra**, que es de lo que va todo esto.

     Múltiplos de 8 para que cada letra caiga entera en la rejilla. */
  --pixel-5xl: 48px;
  --pixel-6xl: 64px;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.8;

  /* ── Borders & Radius ── */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --border-width: 2px;
  --border-pixel: 3px;

  /* ── Shadows (8-bit pixel style) ── */
  --shadow-pixel:
    3px 3px 0px rgba(0, 0, 0, 0.8),
    -1px -1px 0px rgba(255, 255, 255, 0.05);
  --shadow-pixel-sm:
    2px 2px 0px rgba(0, 0, 0, 0.8);
  --shadow-pixel-lg:
    4px 4px 0px rgba(0, 0, 0, 0.8),
    6px 6px 0px rgba(0, 0, 0, 0.4);
  --shadow-glow-cyan:
    0 0 5px rgba(0, 245, 212, 0.3),
    0 0 15px rgba(0, 245, 212, 0.15),
    0 0 30px rgba(0, 245, 212, 0.08);
  --shadow-glow-magenta:
    0 0 5px rgba(247, 37, 133, 0.3),
    0 0 15px rgba(247, 37, 133, 0.15),
    0 0 30px rgba(247, 37, 133, 0.08);
  --shadow-glow-yellow:
    0 0 5px rgba(255, 214, 10, 0.3),
    0 0 15px rgba(255, 214, 10, 0.15),
    0 0 30px rgba(255, 214, 10, 0.08);
  --shadow-glow-green:
    0 0 5px rgba(57, 255, 20, 0.3),
    0 0 15px rgba(57, 255, 20, 0.15);
  --shadow-glow-purple:
    0 0 5px rgba(123, 47, 247, 0.3),
    0 0 15px rgba(123, 47, 247, 0.15);
  --shadow-card:
    0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-card-hover:
    0 8px 30px rgba(0, 0, 0, 0.6);

  /* ── Transitions ── */
  /* ── El movimiento, y por qué va a saltos ──────────────────────────────
     En pixel art nada se desvanece: un sprite cambia de fotograma. Una
     transición suave (`ease`) es de web moderna y delata el estilo aunque
     todo lo demás esté bien hecho.

     `steps(n)` hace que el cambio avance en n saltos, como los fotogramas de
     un juego de 16 bits. A estas duraciones no se percibe como «a trompicones»
     sino como más seco y más digital, que es justo lo que se busca.

     Están aquí y no en cada regla a propósito: cambiar estas tres líneas
     cambia el tacto de la web entera. Para eso existe un sistema de diseño. */
  --transition-fast: 0.12s steps(3);
  --transition-normal: 0.24s steps(4);
  --transition-slow: 0.4s steps(6);
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── Z-Index ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 500;
  --z-modal-overlay: 900;
  --z-modal: 1000;
  --z-tooltip: 1100;
  --z-loader: 2000;

  /* ── Container Widths ── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* ── Misc ── */
  --navbar-height: 70px;
  --card-aspect-ratio: 2 / 3;
  --carousel-gap: 16px;

  /* Ocultar/mostrar la Navbar al hacer scroll: se esconde más despacio de lo
     que aparece a propósito (ver `polish.css`, sección de la Navbar) —
     desaparecer puede tomarse su tiempo, pero cuando el usuario quiere volver
     a navegar, la barra debe estar ahí ya.
     La misma curva para las dos direcciones: acelera y desacelera de forma
     natural, sin el tramo final más "seco" de un `ease-out` normal. */
  --navbar-hide-duration: 280ms;
  --navbar-show-duration: 210ms;
  --navbar-ease: cubic-bezier(0.4, 0, 0.2, 1);
}