/* OtherVision app — la paleta de la landing, para la app.

   tokens.css sigue siendo la base: tipografías, radios, espaciados y la paleta gris con el
   acento violeta, que es la que siguen usando /splother/ y las páginas legales. Este archivo
   lo carga **solo la app**, justo después, y pisa los colores con los de la landing
   (los `--l-*` de /css/landing.css): azul noche de fondo, la cabeza y los diálogos más
   oscuros, el celeste para lo que se destaca y el azul para lo que se elige.

   Los componentes siguen usando los mismos nombres de variable (`--fondo`, `--panel`,
   `--acento`…): cambiar un color de la app es cambiarlo acá. Si la landing cambia su paleta,
   este es el único archivo de la app que hay que acompañar. */

:root {
  /* La app es oscura: que las barras de scroll y los controles del navegador también. */
  color-scheme: dark;

  /* Capas: el fondo azul noche de la portada, y arriba de él la cabeza y los diálogos. */
  --noche: #0a1522;
  --noche-2: #13233a;
  --fondo: #0e2343;
  --fondo-alto: #14315c;
  /* A dónde llega el fondo de la página al bajar: el azul de arriba se funde a casi negro. */
  --fondo-bajo: #04070d;
  --punto: rgba(255, 255, 255, 0.09);
  --panel: rgba(255, 255, 255, 0.06);
  --panel-solido: #13233a;
  --panel-activo: #1d3554;
  --borde: rgba(255, 255, 255, 0.12);
  --borde-fuerte: rgba(255, 255, 255, 0.24);

  /* Texto */
  --texto: #ffffff;
  --texto-2: #b3c4d8;
  --texto-3: #7f92a8;
  --texto-sobre-claro: #0a1522;

  /* El azul es lo que se elige (foco, selección, avance); el celeste, lo que se destaca. */
  --acento: #1e6fe0;
  --acento-fuerte: #1557b8;
  --acento-suave: rgba(30, 111, 224, 0.2);
  --celeste: #a9d2ff;
  --celeste-suave: rgba(169, 210, 255, 0.22);

  /* Las carpetas de la galería: el amarillo de una carpeta de papel, para que no se confundan
     con las tarjetas de los splats. `--carpeta-rgb` es el mismo color, para sus transparencias. */
  --carpeta: #f4c24d;
  --carpeta-rgb: 244, 194, 77;

  /* Lo que se apoya sobre un splat (botones del visor, carteles): la escena puede ser clara
     u oscura, así que el velo es casi opaco. */
  --velo: rgba(10, 21, 34, 0.72);
  --velo-fuerte: rgba(10, 21, 34, 0.9);

  /* Los títulos, en la misma grotesca condensada de la landing. */
  --fuente-titulo: "Roboto Condensed", "Arial Narrow", var(--fuente);

  --r-card: 22px;
  --r-boton: 12px;
  --sombra-boton: 0 10px 26px rgba(4, 12, 24, 0.28);
  --sombra-flotante: 0 24px 40px rgba(4, 12, 24, 0.36);

  /* El marco: la cabeza de la landing y, debajo, la barra de herramientas. */
  --alto-cabeza: 68px;
  --alto-barra: 60px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --ancho-pagina: 1440px;
}