/**
 * Design tokens.
 *
 * Dirección visual (PLAN.md §50-51): minimalismo tecnológico con cyberpunk
 * sutil. Fondo oscuro, superficies translúcidas, bordes finos, un único acento
 * con brillo contenido. Nada de neón saturado ni estética de videojuego.
 *
 * Cualquier color, espacio o radio nuevo se define aquí, nunca suelto en un
 * componente.
 */

:root {
  /* --- Fondo y superficies ------------------------------------------------ */
  --bg: #07090f;
  --bg-elevated: #0b0e17;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-strong: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* --- Texto -------------------------------------------------------------- */
  --text: #e8ecf5;
  --text-muted: #8d97ad;
  --text-faint: #5d6679;

  /* --- Acento ------------------------------------------------------------- */
  --accent: #3ddbc0;
  --accent-strong: #5ef0d6;
  --accent-dim: rgba(61, 219, 192, 0.14);
  --accent-glow: rgba(61, 219, 192, 0.22);
  --accent-secondary: #7c6cff;

  /* --- Semánticos --------------------------------------------------------- */
  --positive: #3ddbc0;
  --negative: #ff6b7d;
  --warning: #f5c04e;

  /* --- Tipografía --------------------------------------------------------- */
  /* Sin fuentes externas: no se permiten CDN y la app debe funcionar offline.
     La pila del sistema además evita el parpadeo de carga. */
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-numeric: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  /* --- Espaciado ---------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* --- Formas ------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 24px var(--accent-glow);

  /* --- Movimiento --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 180ms;

  /* --- Disposición -------------------------------------------------------- */
  --tabbar-height: 68px;
  --content-max: 34rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* La aplicación es de tema oscuro por diseño. Se declara para que los
   controles nativos (scrollbars, selección) se pinten en consecuencia. */
:root {
  color-scheme: dark;
}