/* Tokens de color y tipografía. Tema oscuro por defecto (más cercano a la referencia moure.dev/8-bit),
   tema claro como alternativa legible sin perder el espíritu retro. */

:root {
  --font-display: 'Press Start 2P', monospace;
  --font-body: 'Inconsolata', monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  --radius: 0; /* estética pixel: sin bordes redondeados */
  --pixel-unit: 4px; /* unidad base de los bordes/sombras "escalonados" */

  --header-height: 64px;
}

/* ---------- Tema oscuro (por defecto) ---------- */
:root,
:root[data-theme='dark'] {
  --color-bg: #0d0d14;
  --color-bg-alt: #14141e;
  --color-bg-elevated: #1a1a28;
  --color-grid-line: rgba(72, 202, 228, 0.10);
  --color-grid-line-strong: rgba(72, 202, 228, 0.18);

  --color-text: #eef6fa;
  --color-text-muted: #93a2b3;

  --color-primary: #48cae4;
  --color-primary-dark: #0097a7;
  --color-primary-light: #90e0ef;
  --color-on-primary: #0d0d14;

  --color-accent-pink: #f72585;
  --color-accent-yellow: #ffc107;
  --color-accent-green: #06d6a0;

  --color-border: #2a2a3a;
  --color-danger: #ff4365;
  --color-success: #06d6a0;

  --scanline-opacity: 0.05;
  color-scheme: dark;
}

/* ---------- Tema claro ---------- */
:root[data-theme='light'] {
  --color-bg: #f4f8fa;
  --color-bg-alt: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-grid-line: rgba(0, 151, 167, 0.10);
  --color-grid-line-strong: rgba(0, 151, 167, 0.18);

  --color-text: #13202a;
  --color-text-muted: #4d5c66;

  --color-primary: #00707d;
  --color-primary-dark: #005a63;
  --color-primary-light: #48cae4;
  --color-on-primary: #ffffff;

  --color-accent-pink: #c2255c;
  --color-accent-yellow: #8a6400;
  --color-accent-green: #037a5c;

  --color-border: #d7e3e8;
  --color-danger: #c2255c;
  --color-success: #037a5c;

  --scanline-opacity: 0.03;
  color-scheme: light;
}