/* Lenguaje visual compartido: la tipografía y las piezas del cristal.
 *
 * Son sólo variables. Vive aparte porque lo usan cuatro hojas de estilo (la
 * página pública, el panel, el soporte y las legales) y antes cada una
 * repetía los mismos valores a mano; así, cambiar el grosor del desenfoque
 * o la fuente es tocar una línea y no buscar veinte.
 *
 * Se carga ANTES que la hoja de cada página, para que sus reglas puedan
 * pisar cualquier cosa de aquí.
 *
 * Los colores NO están aquí: cada página tiene su paleta y el cristal no la
 * toca. Lo que hace es dejar pasar lo que haya detrás, sin teñirlo.
 */

:root {
  /* Tipografía de código. El respaldo es la monoespaciada del sistema, que
     en Mac, Windows y Linux ya es parecida, así que si la fuente web tarda
     o no llega no se descoloca nada. */
  --font-ui: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Las dos caras de la pagina publica: la del nombre y los titulares, y la
     del texto corrido. Por defecto las dos son la monoespaciada de arriba,
     y el fondo elegido las cambia desde JavaScript escribiendo estas dos
     variables. Ninguna hoja de estilos nombra una fuente concreta: la lista
     de familias vive solo en public/js/estilos.js, que es lo que impide que
     se separen dos listas. */
  --font-titulo: var(--font-ui);
  --font-cuerpo: var(--font-ui);

  /* El cristal, en cuatro piezas:
       brillo      la línea clara del filo de arriba, donde pega la luz —
                   es lo que hace que se lea como vidrio y no como un
                   rectángulo medio transparente
       superficie  el propio vidrio, casi transparente
       borde       el canto
       sombra      lo que lo despega del fondo  */
  --glass-shine: rgba(255, 255, 255, 0.22);
  --glass-surface: rgba(255, 255, 255, 0.055);
  --glass-border: rgba(255, 255, 255, 0.13);
  --glass-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);

  /* Tres grosores de desenfoque. Cuanto mayor es la superficie, más
     desenfoca: un botón con el mismo desenfoque que una tarjeta grande
     parece sucio, no de cristal.

     Ninguno pasa de 20px a propósito: el desenfoque de fondo lo recalcula la
     tarjeta gráfica en cada fotograma, y por encima de ahí se nota en un
     móvil de gama media. */
  --glass-blur-sm: blur(6px) saturate(150%);
  --glass-blur-md: blur(12px) saturate(160%);
  --glass-blur-lg: blur(20px) saturate(170%);

  /* ---- Movimiento ----
   *
   * Duraciones y curvas con nombre, en vez de un número distinto en cada
   * regla. Lo que hace que una interfaz se sienta cara no es la animación
   * suelta: es que TODAS duren lo mismo y se curven igual. Eso no sale de
   * elegir bien cuarenta veces, sale de elegir una vez.
   *
   * Reglas que van con esto:
   *   - Nada de `linear` salvo lo que de verdad avanza a ritmo constante:
   *     una barra de progreso, una marquesina. Lo demás, curvado.
   *   - Lo que entra, con ease-out; lo que se mueve estando ya ahí, con
   *     ease-in-out; ease-in casi nunca.
   *   - Salir más rápido que entrar: esperar a que algo desaparezca molesta
   *     mucho más que esperar a que aparezca.
   *   - Animar `transform` y `opacity`, que van en el compositor. Animar
   *     `width`, `top` o `height` obliga al navegador a recalcular la página
   *     en cada fotograma. */
  --dur-1: 120ms;   /* respuesta de un botón, un parpadeo */
  --dur-2: 180ms;   /* desplegables, cosas pequeñas */
  --dur-3: 240ms;   /* ventanas, paneles */
  --dur-4: 300ms;   /* el techo normal */
  --dur-5: 500ms;   /* superficies grandes */
  --dur-escena: 900ms; /* lo narrativo: una entrada, un titular */

  --ease-salida: cubic-bezier(.165, .84, .44, 1);      /* quart: lo que entra */
  --ease-salida-fuerte: cubic-bezier(.19, 1, .22, 1);  /* expo: entradas con presencia */
  --ease-suave: cubic-bezier(.645, .045, .355, 1);     /* in-out cubic: lo que se recoloca */
  --ease-entrada: cubic-bezier(.55, .055, .675, .19);  /* lo que se va para no volver */
}