/* ═══════════════════════════════════════════════════════════════
   LIQUIDITY OS — tema
   ═══════════════════════════════════════════════════════════════

   ESTE ES EL ÚNICO FICHERO DE COLOR DEL WHITELABEL.

   Cada marca sustituye este fichero entero y no toca nada más. Si algún
   día hace falta cambiar un color desde otro sitio, es que falta un token
   aquí: el arreglo es añadirlo en `app.css` y usarlo, no escribir el color
   suelto en la regla.

   La paleta sale de descodificar el PNG del logotipo y agrupar sus píxeles
   opacos. Los colores que lo componen, por peso:

     #04fafd  cian, el 30% del símbolo
     #02c7fd  cian medio
     #0187fc  azul
     #0278fb  azul intenso
     #0128b9  azul profundo, la sombra del lazo
     #c7d9e8  plateado, la tipografía de «LIQUIDITY»

   Sobre eso se construye el negro azulado: fondos casi negros con una
   punta de azul, para que el cian del símbolo caiga encima como luz y no
   como una mancha de color sobre gris. */

:root {
  /* Negro azulado. Un gris neutro apagaría el cian; este lo enciende. */
  --void: #04070f;
  --void-2: #070c1a;
  --void-3: #0b1226;

  /* Los velos llevan tinte frío, no blanco puro: sobre un fondo azulado el
     blanco puro tira a amarillo y rompe la temperatura de la página. */
  --surface: rgba(170, 210, 255, 0.05);
  --surface-2: rgba(170, 210, 255, 0.09);
  --surface-3: rgba(170, 210, 255, 0.14);

  --line: rgba(1, 135, 252, 0.2);
  --line-2: rgba(1, 135, 252, 0.38);
  --line-3: rgba(4, 250, 253, 0.55);

  /* Los nombres son los de la marca base y se quedan a propósito: están
     usados en cientos de sitios y renombrarlos convertiría cada whitelabel
     en un cambio de mil líneas. Lo que manda es el valor. Aquí `violet` es
     el azul, `fuchsia` el cian y `cyan` el plateado. */
  --violet: #0187fc;
  --fuchsia: #04fafd;
  --cyan: #c7d9e8;

  --brand-rgb: 4, 250, 253;
  --brand-2-rgb: 1, 135, 252;
  --accent-rgb: 199, 217, 232;

  /* Del azul profundo al cian, como el degradado del propio lazo. */
  --grad: linear-gradient(100deg, #0128b9, #0187fc 45%, #04fafd);
  --grad-soft: linear-gradient(100deg, rgba(1, 40, 185, 0.2), rgba(4, 250, 253, 0.14));

  --text: #e9f2fc;
  --muted: #93a8c2;
  --dim: #6d829d;

  /* El verde se desplaza al esmeralda y el rojo al coral. Con la página en
     azules, el rojo puro vibra desagradablemente contra el cian y el verde
     azulado se confundiría con la propia marca. */
  --good: #34d399;
  --warn: #fbbf4c;
  --bad: #ff6b81;
}

/* El halo del fondo. Hereda los tripletes de arriba; el tercero se recoloca
   porque el plateado a baja opacidad se ve como niebla gris. Se cambia por el
   azul profundo, que es lo que da la sensación de fondo submarino. */
.ambient {
  background:
    radial-gradient(60vw 55vh at 82% -10%, rgba(var(--brand-rgb), 0.13), transparent 62%),
    radial-gradient(55vw 50vh at 5% 6%, rgba(var(--brand-2-rgb), 0.18), transparent 60%),
    radial-gradient(70vw 60vh at 50% 112%, rgba(1, 40, 185, 0.18), transparent 65%);
}

/* ── el logotipo en la barra ─────────────────────────────────── */

/* El ISOTIPO, no el logotipo completo: ese lleva «LIQUIDITY OS» y el lema
   dentro de la imagen, así que al lado del texto de la barra la marca saldría
   dos veces. Comprobado descodificando el PNG: fondo transparente de verdad.

   Es apaisado (352x170) y no cuadrado como el de otras marcas, así que se le
   da ancho y se deja que la altura la ponga `contain`. */
.brand-mark {
  width: 62px;
  height: 34px;
  border-radius: 0;
  background: url("../img/isotipo.png") center / contain no-repeat;
  box-shadow: none;
}

@media (max-width: 560px) {
  .brand-mark { width: 46px; height: 26px; }
}

.brand em {
  /* «LIQUIDITY» y «OS» son dos palabras en el logotipo, así que necesitan el
     hueco. Va en margen y no en un espacio del texto porque el HTML colapsa
     los espacios al final de un nodo y el hueco desaparecía. */
  margin-left: 0.3em;
  background: linear-gradient(100deg, #0187fc, #04fafd 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}