/**
 * Design tokens.
 *
 * Colores: el azul primario/oscuro es el azul de marca de PlayStation
 * (#0070CC / #003791, el mismo del logo y la barra de luz del mando),
 * combinado con el patrón de fondo "dark tech" (slate muy oscuro con
 * paneles ligeramente más claros) recomendado por la skill ui-ux-pro-max
 * para catálogos gaming en modo oscuro. El acento cian (#00D2FF) referencia
 * el brillo de la luz del PS5. El verde de WhatsApp es el oficial de la
 * marca (se usa solo ahí, por reconocimiento inmediato del botón).
 *
 * Tipografía: pairing "Russo One / Chakra Petch" sugerido por la misma
 * skill para productos gaming/esports — Russo One para títulos con
 * carácter, Chakra Petch (más neutra) para texto de lectura.
 */
:root {
  /* Azul PS5 */
  --color-primary: #0072ce;
  --color-primary-dark: #003791;
  --color-accent: #00d2ff;

  /* Superficies oscuras */
  --color-bg: #0a0e1a;
  --color-surface: #121a2b;
  --color-surface-alt: #1b2540;
  --color-border: #26314f;

  /* Texto */
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;

  /* Acciones */
  --color-whatsapp: #25d366;
  --color-price-secondary: #ffb020;

  /* Tipografía */
  --font-heading: "Russo One", "Chakra Petch", sans-serif;
  --font-body: "Chakra Petch", system-ui, sans-serif;

  /* Espaciado */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;

  /* Bordes y sombras */
  --radius-sm: 8px;
  --radius-md: 14px;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 2px var(--color-accent), 0 8px 24px rgba(0, 114, 206, 0.35);

  --transition-fast: 180ms ease;
}