/* ---------------------------------------------------------------------------
   PALETA VIOLETA — negro con tirada a purpura. Es la que trae el sitio hoy.

   Este archivo es SOLO la paleta: trece colores y nada mas. Lo derivado —los
   baños translucidos de la cabecera y las tarjetas, la luz de la portada— y los
   colores de significado fijo —el dorado del aro, el azul de los enlaces, los
   colores de estado, el papel de las ayudas— viven en `theme.css`, se
   calculan a partir de `--brand` y valen igual para las tres paletas. Cambiar de
   paleta es cambiar UN <link> en `index.html` y en `app/index.html`.

   El morado de marca es pariente del que el reproductor le da al bajo (#7c5cff),
   subido de luz hasta que se pueda LEER: el de la pista es un punto de color en un
   circulo de 10 px y le basta con verse, pero este ademas escribe «EVOLUTION BAND»
   y los encabezados de la tabla.

   Los grises no son neutros: son una escalera de claridad girada al violeta
   (~270°). Un fondo azulado debajo de un morado los deja peleando y el sitio se ve
   sucio. Las tres paletas comparten esa escalera —los mismos valores de claridad—
   y solo giran el tono, asi que cambiar de paleta no cambia los contrastes de
   estructura, solo el color.
   --------------------------------------------------------------------------- */

:root {
  /* --- Superficies, de la mas hundida a la mas levantada --- */
  /* El fondo de la pagina. */
  --bg: #0d0a14;
  /* La lateral y las tarjetas de la bienvenida: un punto por encima del fondo,
     lo justo para que se separen sin una sombra. */
  --panel: #120e1b;
  /* Las tarjetas: el reproductor, la tabla de ensayos, los ejemplos de las
     ayuda. Las tres se ven de la misma familia porque comparten esto. */
  --surface: #15111f;
  /* Lo hundido DENTRO de una tarjeta: el selector, la barra de progreso, el
     fondo de los waveforms, el panel del tono. */
  --surface-2: #1e192c;
  /* La linea que separa. */
  --line: #302842;

  /* --- Tinta --- */
  --text: #eae7f2;
  /* Lo secundario: la segunda linea de cada dato, las etiquetas, los estados. */
  --muted: #968ead;
  /* El escalon de abajo, solo para la letra chica de la portada. */
  --faint: #847b9c;

  /* --- Marca --- */
  /* Con el que se escribe el nombre en la cabecera, se enciende la seccion
     abierta de la lateral y se encabezan las columnas de la tabla. */
  --brand: #a56bff;
  /* El hover del boton de entrar: el mismo morado un paso mas claro. */
  --brand-hover: #b98aff;
  /* Lo que se escribe ENCIMA del color de marca. Casi negro, y no el fondo de la
     pagina: sobre el morado da 5,8:1 y cumple AA de sobra. */
  --ink: #0b0910;

  /* --- La portada --- */
  /* El emblema viene sobre un cuadrado NEGRO PURO sin transparencia, asi que el
     centro del degradado tiene que ser ese mismo negro o se ve el recorte. */
  --cover-core: #000000;
  /* La parada intermedia entre ese negro y el fondo de la pagina. */
  --cover-mid: #08060d;
}