/* Libros en redes · Sistema 02
   Fuente: las cinco imágenes de mockup_02 (paleta, menú de banderas, composición de tapas y marcapáginas, foto cenital).
   Muestreado de la paleta: greige #E8DED5, que acá se aclara hacia manteca blanquecino (#F3EDE3) · tinta #2F2D2E · lima #DDE494 · rosa #EDBCCF · cielo #9BBFE3. La salvia de la paleta se reemplazó por la menta de la tapa verde de la foto (#A5CF9D).
   Modelo: UNA tinta y CINCO papeles. El texto es siempre tinta sobre un papel (o papel sobre tinta), así que todo se lee.
   Cada pieza (pared, hoja, bandera, marcapáginas, botón) elige un "tono" con data-tone y todo lo demás se deriva de dos roles:
   --c (el color de la pieza) y --on (el color de lo que va encima).
   Para iterar, tocá solo este archivo. */
:root{
  --paper:#F3EDE3;     /* papel manteca claro: casi blanco, apenas cálido (antes #EBE2D0, que en otras pantallas se veía amarillento); el greige de la referencia es #E8DED5. Pared de lectura y tapa de los libros */
  --ink:#2F2D2E;       /* tinta: texto, tapa oscura, pie */
  --mint:#A5CF9D;      /* menta   · marcador 1 (en lugar de la salvia) */
  --sky:#9BBFE3;       /* cielo   · marcador 2 (la pared de las composiciones) */
  --pink:#EDBCCF;      /* rosa    · marcador 3 */
  --lime:#DDE494;      /* lima    · marcador 4 (resaltador) */

  --paper-lite:color-mix(in srgb,var(--paper) 50%,#fff);   /* manteca claro: la pared de la foto cenital y los campos */

  --gutter:clamp(16px,4.5vw,56px);
  --maxw:1240px;

  /* pareja tipográfica A (por defecto): todo en monoespaciada, como las tapas de las referencias */
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --f-body:var(--f-mono);
  --f-mark:"Archivo","Archivo Narrow","Arial Narrow",Impact,sans-serif;   /* solo logotipo y firma: Archivo, variable en ancho */
  --w-mark:800;                 /* peso del logotipo */
  --mark-stretch:72%;           /* ancho del logotipo: 62% muy condensada, 100% normal */
  --t-body:.9375rem;
  --t-display:clamp(1.9rem,4.2vw,3.5rem);
  --t-title:clamp(1.35rem,2.6vw,2rem);
  --t-lead:clamp(1rem,1.7vw,1.15rem);

  /* papel: sombra de las hojas y textura de tela (se apagan desde el panel) */
  --lift:-5px 10px 22px -10px rgb(47 45 46 / .38),0 1px 2px rgb(47 45 46 / .16);
  --grain-op:1;
  color-scheme:light;
}
html[data-type="b"]{--f-body:"IBM Plex Sans",system-ui,"Segoe UI",sans-serif;--t-body:1.0625rem}
html[data-type="c"]{--f-mono:"DM Mono",ui-monospace,Consolas,monospace;--f-body:"DM Sans",system-ui,"Segoe UI",sans-serif;--t-body:1.0625rem}
html[data-grain="off"]{--grain-op:0}
/* íconos de tapa: cada glifo trae tres dibujos (sólido, contorno, fino) y esto elige cuál se ve. Se puede pisar en cualquier contenedor. */
:root{--gv-solid:none;--gv-outline:none;--gv-fine:inline}   /* por defecto: fino */
html[data-glyph="solid"]{--gv-solid:inline;--gv-outline:none;--gv-fine:none}
html[data-glyph="outline"]{--gv-solid:none;--gv-outline:inline;--gv-fine:none}
html[data-lift="off"]{--lift:none}

/* ---------- tonos ----------
   --c fondo de la pieza · --on lo que va encima · --mark resaltador en línea · --line filete suave.
   Los botones, etiquetas y filetes se derivan de --c y --on, así que funcionan sobre cualquier tono, también anidados. */
[data-tone="paper"]{--c:var(--paper);--on:var(--ink);--mark:var(--lime)}
[data-tone="ink"]{--c:var(--ink);--on:var(--paper);--mark:var(--lime)}
[data-tone="sky"]{--c:var(--sky);--on:var(--ink);--mark:var(--lime)}
[data-tone="pink"]{--c:var(--pink);--on:var(--ink);--mark:var(--lime)}
[data-tone="lime"]{--c:var(--lime);--on:var(--ink);--mark:var(--pink)}
[data-tone="mint"]{--c:var(--mint);--on:var(--ink);--mark:var(--pink)}
[data-tone="lite"]{--c:var(--paper-lite);--on:var(--ink);--mark:var(--lime)}   /* greige claro: la pared de la foto cenital */
[data-tone]{background:var(--c);color:var(--on);--line:color-mix(in srgb,var(--on) 30%,transparent)}