/* ==========================================================================
   ZARZA · fichas de color, tipografía y medida
   Generado el 20-ago-2026 desde el lab (_lab-zarza). Pegar tal cual.
   Todo lo demás del sistema se construye SOLO con estas variables.
   ========================================================================== */

:root{
  /* ---- color ---- */
  --zz-rojo:        #B30000;  /* el fondo de la casa · el rojo del logotipo de siempre */
  --zz-rojo-alto:   #C10604;  /* arriba del degradado de fondo */
  --zz-rojo-hondo:  #8A0000;  /* abajo del degradado, sombras y franjas */
  --zz-rojo-vivo:   #D81E06;  /* enlaces y acentos DENTRO de fichas claras */

  --zz-crema:       #FAF6EF;  /* las fichas · blanco roto de carcasa de casete */
  --zz-crema-2:     #F1E9DD;  /* ventana del casete, fondos secundarios */
  --zz-crema-3:     #E7DCCC;  /* dientes del carrete, detalles */

  --zz-tinta:       #241A15;  /* texto sobre crema · cinta magnética · nunca negro puro */
  --zz-tinta-2:     #6E5C52;  /* texto secundario sobre crema */
  --zz-tinta-3:     #9C8A7E;  /* rótulos y datos menores sobre crema */

  --zz-linea:       #E2D6C6;  /* bordes y separadores */
  --zz-linea-2:     #CFC0AC;  /* tornillos, bordes marcados */

  /* rotulacion pequena: tinta-3 da 3,07:1 y NO llega a AA. Estos dos tonos son
     los unicos que valen para texto de 9-11px. Anadidos el 20-ago-2026 tras
     medir las 21 vistas del tema de WordPress. */
  --zz-rotulo-txt:  #7D6E65;  /* 4,53:1 sobre crema. TODO rotulo que sea texto */

  --zz-aire:        #2F7D32;  /* AL AIRE · sano · sonando. Un solo significado */
  --zz-aire-claro:  #4E9A51;  /* el mismo verde sobre fondos oscuros */
  --zz-ambar:       #F0B429;  /* pico del vúmetro y avisos. Escaso */
  --zz-ambar-txt:   #8A6A10;  /* el ámbar como TEXTO sobre crema (el otro no contrasta) */
  --zz-vinilo:      #1C1614;  /* el disco */

  /* texto sobre el rojo (crema con alfa, no gris) */
  --zz-sobre-rojo:      #FFF6EE;
  --zz-sobre-rojo-2:    rgba(255,246,238,.87);
  --zz-sobre-rojo-3:    rgba(255,240,230,.78);  /* 4,26:1 - NO llega a AA: solo bordes y adornos */
  --zz-sobre-rojo-rot:  rgba(255,240,230,.84);  /* 4,80:1 - los rotulos sobre el rojo van aqui */
  --zz-borde-sobre-rojo: rgba(255,240,230,.30);

  /* ---- tipografía ---- */
  --zz-display: "Poppins", system-ui, -apple-system, sans-serif;   /* 800, SIEMPRE en minúsculas */
  --zz-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --zz-serif:   "Cormorant Garamond", Georgia, serif;              /* cursiva, sólo citas */

  --zz-tracking-titular: -.035em;  /* los titulares van apretados */
  --zz-tracking-rotulo:  .20em;    /* los rótulos en versalita, muy abiertos */

  /* ---- forma ---- */
  --zz-radio:       7px;   /* fichas */
  --zz-radio-chico: 4px;   /* etiquetas, botones pequeños */
  --zz-radio-app:   22px;  /* icono de app (sobre 100) */

  --zz-sombra-ficha: 0 1px 0 #fff inset, 0 20px 44px -24px rgba(30,0,0,.8), 0 2px 0 rgba(120,0,0,.22);
  --zz-sombra-disco: 0 12px 30px -14px rgba(20,0,0,.9);

  /* ---- medida ---- */
  --zz-ancho: 1180px;
}