/* ═══════════════════════════════════════════════════════════════
   HANS · Tokens
   Piel 3b «Taller tipográfico» + Noche «La lámpara».

   Este archivo es el bloque :root de entrega/piel-3b.css puesto a
   trabajar. Los radios están bajos a propósito: la piel es cuadrada.
   Ninguna comilla invertida en todo el archivo — el CSS de la app en
   producción viaja dentro de una plantilla de JavaScript.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --papel:        #fbfaf7;
  --papel-hondo:  #f2f0eb;
  --papel-alto:   #ffffff;
  --tinta:        #17171c;
  --tinta-media:  #56565f;
  --tinta-tenue:  #9b9ba4;
  --linea:        #e4e1da;
  --linea-fina:   #efede7;
  --carmin:       #a8322a;
  --carmin-suave: #f8efed;
  --accion:       #17171c;
  --accion-txt:   #ffffff;

  /* Radios de la piel taller: la caja redondeada desaparece. */
  --r-ch: 2px; --r-md: 3px; --r-gr: 4px; --r-max: 999px;

  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 18px; --e5: 26px; --e6: 40px;

  --sombra-1: 0 1px 1px rgba(22,20,16,.045), 0 2px 6px -2px rgba(22,20,16,.055);
  --sombra-2: 0 1px 2px rgba(22,20,16,.05), 0 6px 14px -6px rgba(22,20,16,.10),
              0 12px 32px -12px rgba(22,20,16,.10);
  --sombra-3: 0 1px 2px rgba(22,20,16,.06), 0 10px 22px -8px rgba(22,20,16,.13),
              0 26px 60px -20px rgba(22,20,16,.16);
  --sombra-4: 0 2px 4px rgba(22,20,16,.07), 0 18px 38px -12px rgba(22,20,16,.18),
              0 44px 96px -32px rgba(22,20,16,.22);
  --luz-cenital: inset 0 1px 0 rgba(255,255,255,.9);

  --llega:  cubic-bezier(.22, 1, .36, 1);
  --sale:   cubic-bezier(.55, 0, 1, .45);
  --masa:   cubic-bezier(.34, 1.35, .64, 1);
  --rapido: 140ms; --medio: 240ms; --lento: 380ms;

  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono:  "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --t-micro: 10.5px; --t-menor: 12.5px; --t-ui: 13.5px;
  --t-lee: 17px; --t-sub: 21px; --t-tit: 27px; --t-gran: 40px;
  --ritmo: 1.75; --medida: 62ch;

  /* Noche · La lámpara. El papel no se apaga: baja de luminancia a
     marfil cálido. Lo que se apaga es el escritorio. */
  --noche-mesa:      #0c0d10;
  --noche-barra:     #14161a;
  --noche-hueco:     #1c1f24;
  --noche-linea:     #23262b;
  --noche-regla:     #3a3d43;
  --noche-txt:       #ede6d6;
  --noche-txt-media: #b8b2a6;
  --noche-txt-tenue: #7a7469;
  --noche-icono:     #8a8377;
  --noche-lampara:   #c9a86a;
  --noche-papel-a:   #e9e1d2;
  --noche-papel-b:   #ded5c4;
  --noche-papel-ln:  #c9c0ad;
  --noche-papel-tt:  #1c1913;
  --noche-papel-md:  #514a3d;
  --noche-papel-tn:  #857d6c;
  --noche-carmin:    #9a2f26;   /* sobre el papel claro   */
  --noche-carmin-ui: #d9705f;   /* sobre el cromo oscuro  */
}

/* ── Las cinco letras de los libros ─────────────────────────────
   Se elige por pieza, no por cuenta: el atributo data-letra viaja en
   el contenedor de la hoja (y en la raíz como valor por defecto). */
[data-letra="garamond"]     { --serif-lee: "EB Garamond", Georgia, serif;        --cuerpo-lee: 17.5px; }
[data-letra="caslon"]       { --serif-lee: "Libre Caslon Text", Georgia, serif;  --cuerpo-lee: 16.5px; }
[data-letra="baskerville"]  { --serif-lee: "Libre Baskerville", Georgia, serif;  --cuerpo-lee: 16px; }
[data-letra="literata"]     { --serif-lee: "Literata", Georgia, serif;           --cuerpo-lee: 16.5px; }
[data-letra="merriweather"] { --serif-lee: "Merriweather", Georgia, serif;       --cuerpo-lee: 15.5px; }

/* ── Noche: la remonta de tokens ────────────────────────────────
   Dos pieles y solo dos. No hay una tercera. */
[data-piel="noche"] {
  --papel:        var(--noche-barra);
  --papel-hondo:  var(--noche-mesa);
  --papel-alto:   var(--noche-hueco);
  --tinta:        var(--noche-txt);
  --tinta-media:  var(--noche-txt-media);
  --tinta-tenue:  var(--noche-txt-tenue);
  --linea:        var(--noche-linea);
  --linea-fina:   var(--noche-hueco);
  --carmin:       var(--noche-carmin-ui);
  --carmin-suave: #2a211d;
  --accion:       var(--noche-txt);
  --accion-txt:   var(--noche-mesa);
  --luz-cenital:  inset 0 1px 0 rgba(255,255,255,.06);
}