/* QuestKeep · fundamentos visuales
   Estetica neon oscura: fondo casi negro, acentos cian y magenta con brillo,
   cristal esmerilado sutil. Todo el color pasa por estas variables. */

:root {
  /* --- Fondos, del mas profundo al mas cercano --- */
  --bg-void: #030603;
  --bg-deep: #060b06;
  --bg-base: #091009;
  --bg-raised: #0f180e;
  --bg-glass: rgba(255, 255, 255, 0.045);
  --bg-glass-strong: rgba(255, 255, 255, 0.075);

  /* --- Acentos --- */
  --accent: #7be827;
  --accent-hot: #ff3d3d;
  --accent-deep: #2e8b2e;
  --accent-bright: #d9ff4a;
  --accent-warn: #e8b33a;

  --accent-dim: rgba(123, 232, 39, 0.16);
  --accent-hot-dim: rgba(255, 61, 61, 0.16);
  --accent-bright-dim: rgba(217, 255, 74, 0.16);

  /* --- Notas de las reseñas ---
     Los tres tramos de Metacritic para videojuegos, que no son los mismos que
     usa para cine: verde a partir de 75, amarillo de 50 a 74 y rojo por debajo
     de 50. Los tonos son los suyos, que ya estan pensados para leerse de un
     vistazo sin depender del numero. */
  --nota-alta: #00ce7a;
  --nota-media: #ffbd3f;
  --nota-baja: #ff6874;

  /* --- Colores por estado del backlog ---
     Van de apagado a encendido para que el avance se lea de un vistazo. El
     primero es un verde ceniza, casi gris: dos verdes vivos seguidos no se
     distinguen en un punto de 8 px. */
  --status-backlog: #8d9a86;
  --status-playing: var(--accent);
  --status-completed: #e8ff3a;

  /* --- Texto --- */
  --text-bright: #edf6e6;
  --text: #c7d6bf;
  --text-muted: #8a9384;
  --text-faint: #5c6459;

  /* --- Bordes --- */
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* --- Resplandores --- */
  --glow: 0 0 18px rgba(123, 232, 39, 0.45), 0 0 46px rgba(123, 232, 39, 0.18);
  --glow-hot: 0 0 18px rgba(255, 61, 61, 0.45), 0 0 46px rgba(255, 61, 61, 0.18);
  --glow-bright: 0 0 18px rgba(217, 255, 74, 0.42), 0 0 44px rgba(217, 255, 74, 0.16);

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-float: 0 26px 70px rgba(0, 0, 0, 0.7);

  /* --- Tipografia --- */
  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* La de titulos y logo. Se probo Syne y se descarto: daba caracter, pero
     desentonaba con el resto. El token se queda porque separa "tipografia de
     titulo" de "tipografia de texto", y cambiar de idea es tocar esta linea. */
  --font-display: var(--font);

  /* --- Ritmo espacial --- */
  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap: 16px;
  --gap-md: 24px;
  --gap-lg: 40px;
  --gap-xl: 64px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* --- Curvas de aceleracion ---
     `spring` y `pop` son las que dan el caracter: rebasan el destino y vuelven,
     que es lo que hace que un movimiento se sienta fisico y no lineal. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-pop: cubic-bezier(0.16, 1.36, 0.3, 1);

  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 460ms;
  --dur-flight: 620ms;

  --nav-h: 68px;
  --content-max: 1560px;
}

/* Quien pide menos movimiento recibe fundidos en lugar de desplazamientos.
   No se desactiva todo: la interfaz seguiria necesitando indicar los cambios. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 90ms;
    --dur-slow: 110ms;
    --dur-flight: 120ms;
    --ease-spring: ease-out;
    --ease-pop: ease-out;
  }
}