/* ═══════════════════════════════════════════════════════════════════
   Los tokens de VOLUMA, solos.

   Están aparte de `voluma.css` a propósito. La hoja completa trae
   además reglas de `html`, `body` y tipografía, y eso le pisaba el
   modo oscuro a home c y el lienzo fijo a los carruseles. Así, una
   pieza puede tomar la paleta del sistema sin heredar su maquetado:

       <link rel="stylesheet" href="/estilo/tokens.css">   ← solo color
       <link rel="stylesheet" href="/estilo/voluma.css">   ← todo

   `voluma.css` importa esta hoja, así que quien ya la enlazaba no
   tiene que cambiar nada.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* superficie */
  --papel:#FFFFFF;
  --sup:#F5F4F2;              /* tarjetas y bloques, opaco a propósito */
  --sup-2:#F1EFEA;            /* la franja de ruta del sistema */
  /* tinta */
  --tinta:#141416;
  --sub:rgba(20,20,22,.72);
  --soft:rgba(20,20,22,.54);
  --note:rgba(20,20,22,.34);
  --apagado:rgba(20,20,22,.22);
  /* líneas */
  --linea:rgba(20,20,22,.10);
  --linea-fuerte:rgba(20,20,22,.18);
  /* acento */
  --brasa:#FF5A1F;            /* el vivo: fondos, no texto chico */
  --sordo:#B03D0C;            /* el legible: rótulos y texto sobre papel */
  --brasa-alta:#FF6E38;       /* la brasa un grado arriba, solo para hover */
  --brasa-piel:rgba(255,90,31,.07);
  --franja-tinta:#140A06;     /* lo que va ENCIMA de la brasa */
  --alerta:#9A2515;
  --bien:#1A5C2E;
  /* letra */
  --sans:'Geist',system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* radios */
  --r1:6px; --r2:10px; --r3:14px; --r4:99rem;
  /* aire */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:72px;
  /* --sombra quedó sin usuarios el 26 de agosto, cuando el relieve
     sustituyó a la capa única. Se conserva un ciclo por si alguna pieza
     externa la enlazaba; si al revisar sigue sin usarse, se borra. */
  --sombra:var(--relieve);

  /* ── relieve ──────────────────────────────────────────────────────
     Una sombra sola y difusa deja la tarjeta flotando sin peso: se ve
     igual arriba que abajo, así que no la ilumina nada. Este relieve
     apila cuatro capas que hacen trabajos distintos -el aro que la
     recorta, el contacto pegado al canto, el ambiente cercano y la
     caída larga- más un filo de luz en el borde de arriba, que es lo
     que da la sensación de material y no de rectángulo pintado.

     El aro va en la sombra y NO como `border`: un borde ocupa espacio,
     recorta el fondo y se ve duro en pantallas normales. */
  --relieve:
    0 0 0 1px rgba(20,20,22,.035),
    0 1px 2px rgba(20,20,22,.055),
    0 4px 10px -2px rgba(20,20,22,.05),
    0 14px 30px -10px rgba(20,20,22,.07),
    inset 0 1px 0 rgba(255,255,255,.9);
  --relieve-alto:
    0 0 0 1px rgba(20,20,22,.05),
    0 2px 4px rgba(20,20,22,.055),
    0 10px 20px -4px rgba(20,20,22,.07),
    0 26px 50px -14px rgba(20,20,22,.11),
    inset 0 1px 0 #FFF;
  /* hundido: lo contrario, para lo que va DENTRO de una tarjeta */
  --relieve-hondo:
    inset 0 1px 2px rgba(20,20,22,.07),
    inset 0 0 0 1px rgba(20,20,22,.03);
  --paso:.19s cubic-bezier(.32,.72,0,1);

  /* ── vidrio ───────────────────────────────────────────────────────
     El relieve y el vidrio NO son dos gustos: son dos sitios.

       relieve → lo que se apoya EN la página: tarjetas, botones, chips.
       vidrio  → lo que flota SOBRE contenido que se mueve debajo.

     El criterio es funcional. Difuminar sobre un fondo quieto no
     difumina nada: queda una caja gris que cuesta GPU y se ve igual
     que un `--sup` opaco. Por eso hoy el vidrio vive en la barra de
     navegación, que pasa por encima del tetra y de las fotos, y no en
     las tarjetas, que están apoyadas sobre papel blanco.

     Si mañana hay una barra de reproducción fija, un visor de fotos o
     un panel encima del mapa, ahí sí. En una tarjeta, no. */
  --vidrio:rgba(255,255,255,.72);
  --vidrio-borroso:blur(24px) saturate(1.4);
  --vidrio-aro:
    0 0 0 1px rgba(20,20,22,.05),
    0 1px 2px rgba(20,20,22,.04),
    0 18px 40px -14px rgba(20,20,22,.13),
    inset 0 1px 0 rgba(255,255,255,.6);
  /* ── la noche ─────────────────────────────────────────────────────
     La misma rampa, invertida. Vive aquí y no en cada pieza porque
     home c, los carruseles y el reel la estaban reinventando cada uno
     con un negro distinto: #111111, #0D0D0D y #F2F2F2 para el texto. */
  /* ── la rampa de brasa ────────────────────────────────────────────
     El fuego, de la ceniza al blanco. Salió del degradado del reel,
     donde vivía como una lista suelta dentro del script; es lo que da
     el naranja que respira en vez del naranja plano. Se usa para
     degradados y para el halo del tetra, nunca para texto.

     `--sordo` NO es parte de esta rampa: es el naranja legible sobre
     papel, elegido por contraste, no por temperatura. */
  --brasa-carbon:#050505;
  --brasa-rescoldo:#3A1206;
  --brasa-ascua:#7A2A0C;
  --brasa-baja:#D4501A;
  --brasa-blanca:#FFEADC;

  --noche:#0D0D0D;
  --noche-sup:#1A1A1A;
  --noche-tinta:#F2F2F2;
  --noche-sub:rgba(255,255,255,.70);
  --noche-soft:rgba(255,255,255,.50);
  --noche-note:rgba(255,255,255,.30);
  --noche-apagado:rgba(255,255,255,.20);
  --noche-linea:rgba(255,255,255,.10);
  --noche-linea-fuerte:rgba(255,255,255,.20);
}