/* ============================================================
   carmenleo.com — Tokens del sistema (docs/07-sistema-diseno.md)
   Una sala, una luz, ocho funciones. Cambiar aquí cambia la web.
   Conserva todos los nombres que usa css/home.css.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---------- La sala ---------- */
  --sala-900: #0a0907;
  --sala-800: #12100e;
  --sala-700: #1b1815;
  --sala-600: #26221e;
  --sala-500: #35302a;
  --sala-400: #4a433b;
  --niebla-900: #141618;   /* solo Escena narrativa */
  --niebla-700: #1d2023;

  /* ---------- La luz (el hilo) ---------- */
  --luz: #d9b166;
  --luz-clara: #f0d9a8;
  --luz-honda: #8a6a2e;
  --luz-tinta: #7a5b25;    /* la luz sobre papel: 5,7:1 */
  --telon: #6e1b23;

  /* ---------- La tinta ---------- */
  --hueso: #f4efe6;
  --hueso-apagado: #cfc6b8;
  --hueso-tenue: #8e867a;  /* mínimo para texto */

  /* ---------- La luz de trabajo (solo poemas) ---------- */
  --papel: #f5f0e6;
  --papel-hondo: #ebe4d6;
  --papel-tinta: #211d18;
  --papel-tinta-suave: #5a5248;
  --papel-linea: rgba(33, 29, 24, 0.14);

  /* ---------- Gelatinas: misma luz, distinto filtro ----------
     Solo filo, halo, subrayado u ornamento. Nunca fondo ni texto. */
  --ac-musica: #e0913f;
  --ac-teatro: #b04a4f;
  --ac-narrativa: #7f9a6e;
  --ac-poesia: #7fa5a8;
  --ac-talleres: #aea266;
  --ac-publicaciones: #9a86b8;
  --ac-ilustracion: #c47a98;
  --ac-edicion: #9a968c;

  /* ---------- Semántica (lo que usan los componentes) ---------- */
  --fondo: var(--sala-900);
  --superficie: var(--sala-800);
  --superficie-alta: var(--sala-700);
  --texto: var(--hueso);
  --texto-suave: var(--hueso-apagado);
  --texto-tenue: var(--hueso-tenue);
  --linea: rgba(244, 239, 230, 0.10);
  --linea-fuerte: rgba(244, 239, 230, 0.22);
  --foco: var(--luz);
  --subrayado: rgba(217, 177, 102, 0.5);
  --enlace-hover: var(--luz-clara);
  --acento: var(--luz);

  /* ---------- Diales de sección (§11) ---------- */
  --tempo: 1;       /* 0.75 – 1.4 */
  --aire: 1;        /* 0.8 – 1.8 */
  --densidad: 1;    /* 0.5 – 1   */
  --penumbra: 0;    /* 0 – 1     */

  /* ---------- Tipografía ---------- */
  --fuente-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --fuente-texto: "EB Garamond", Garamond, Georgia, serif;
  --fuente-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-xs: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --t-sm: clamp(0.84rem, 0.8rem + 0.2vw, 0.95rem);
  --t-md: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --t-verso: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem);
  --t-lg: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  --t-xl: clamp(1.8rem, 1.3rem + 2.4vw, 3.2rem);
  --t-2xl: clamp(2.4rem, 1.5rem + 4vw, 5rem);
  --t-3xl: clamp(3rem, 1.8rem + 6vw, 7.5rem);

  --lh-display: 1.05;
  --lh-titulo: 1.2;
  --lh-texto: 1.65;
  --lh-verso: 2;
  --lh-ui: 1.4;

  --interletra-ancha: 0.24em;
  --interletra-media: 0.1em;

  /* ---------- Medidas y rejilla ---------- */
  --gutter: clamp(1rem, 4vw, 3rem);
  --ancho-lectura: 38rem;
  --ancho-texto: 44rem;
  --ancho-contenido: 72rem;
  --ancho-sala: 97.5rem;
  --alto-cabecera: 3.5rem;

  /* ---------- Ritmo ---------- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 1rem;
  --esp-4: 1.5rem;
  --esp-5: 2.5rem;
  --esp-6: 4rem;
  --esp-7: 6.5rem;
  --esp-8: 10rem;   /* Poesía y finales de Narrativa */

  /* ---------- Radios ---------- */
  --radio-pantalla: 3px;   /* toda obra */
  --radio-suave: 8px;      /* interfaz */
  --radio-pildora: 999px;  /* solo chips de filtro */

  /* ---------- Capas ---------- */
  --z-contenido: 1;
  --z-pantalla-activa: 5;
  --z-cabecera: 50;
  --z-panel: 60;
  --z-aviso: 70;

  /* ---------- Movimiento: cinco verbos, sin rebote ---------- */
  --dur-instante: 140ms;
  --dur-rapida: 280ms;
  --dur-media: 700ms;
  --dur-lenta: 1400ms;
  --dur-encendido: 1400ms;
  --dur-emerger: 1700ms;
  --dur-apagar: 420ms;
  --dur-escena: 2200ms;      /* fundido entre imágenes */
  --dur-deriva: 9000ms;      /* Ken Burns */
  --dur-latido: 8s;          /* carta de ajuste, línea de carga */
  --dur-respiracion: 19s;
  --dur-barrido: 46s;

  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);          /* entrar: decelera */
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);         /* cambio de estado */
  --curva-entrada: cubic-bezier(0.55, 0, 0.75, 0.2);   /* salir: acelera */
  --curva-respiro: cubic-bezier(0.45, 0, 0.55, 1);     /* bucles: seno */

  /* ---------- Profundidad ---------- */
  --sombra-pantalla:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.7),
    0 2px 8px rgba(0, 0, 0, 0.5);
  --sombra-centro:
    0 2px 0 rgba(255, 255, 255, 0.07),
    0 40px 90px rgba(0, 0, 0, 0.85),
    0 0 90px rgba(217, 177, 102, 0.09);
  --sombra-flotante: 0 24px 60px rgba(0, 0, 0, 0.7);
  --halo: 0 0 44px -6px var(--acento);
  --halo-luz: 0 0 90px rgba(217, 177, 102, 0.10);

  /* ---------- Grano único de la web ---------- */
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --grano-sala: 0.35;    /* overlay sobre oscuro */
  --grano-papel: 0.05;   /* multiply sobre papel */
}

/* ---------- La luz de trabajo: <body data-luz="trabajo"> ---------- */
[data-luz="trabajo"] {
  color-scheme: light;
  --fondo: var(--papel);
  --superficie: var(--papel-hondo);
  --superficie-alta: var(--papel-hondo);
  --texto: var(--papel-tinta);
  --texto-suave: var(--papel-tinta-suave);
  --texto-tenue: var(--papel-tinta-suave);
  --linea: var(--papel-linea);
  --linea-fuerte: rgba(33, 29, 24, 0.3);
  --foco: var(--luz-tinta);
  --subrayado: rgba(122, 91, 37, 0.45);
  --enlace-hover: var(--luz-tinta);
  --acento: var(--luz-tinta);
}

/* ---------- Cada función, su gelatina y sus diales ---------- */
[data-faceta="musica"]        { --acento: var(--ac-musica);        --tempo: .75; --densidad: .6; --aire: .9; }
[data-faceta="teatro"]        { --acento: var(--ac-teatro);        --tempo: 1.1; --aire: 1.1; }
[data-faceta="narrativa"]     { --acento: var(--ac-narrativa);     --tempo: 1.4; --aire: 1.3; --penumbra: .6; }
[data-faceta="poesia"]        { --acento: var(--ac-poesia);        --tempo: 1.3; --aire: 1.8; }
[data-faceta="talleres"]      { --acento: var(--ac-talleres); }
[data-faceta="publicaciones"] { --acento: var(--ac-publicaciones); --aire: 1.1; }
[data-faceta="ilustracion"]   { --acento: var(--ac-ilustracion);   --densidad: .8; }
[data-faceta="edicion"]       { --acento: var(--ac-edicion);       --aire: 1.2; }
/* En la luz de trabajo, la gelatina de Poesía queda para ornamentos;
   foco y enlaces usan --luz-tinta por contraste. */
[data-luz="trabajo"][data-faceta="poesia"] { --acento: var(--luz-tinta); }

/* ---------- Menos movimiento: una web quieta, no rota ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instante: 1ms;
    --dur-rapida: 1ms;
    --dur-media: 1ms;
    --dur-lenta: 1ms;
    --dur-encendido: 1ms;
    --dur-emerger: 1ms;
    --dur-apagar: 1ms;
    --dur-escena: 1ms;
    --dur-deriva: 1ms;
    --dur-latido: 0s;
    --dur-respiracion: 0s;
    --dur-barrido: 0s;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Cambio de página: apagar y encender ---------- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: apagar-pagina var(--dur-apagar) var(--curva-entrada) both;
}
::view-transition-new(root) {
  animation: encender-pagina var(--dur-media) var(--curva) 120ms both;
}
@keyframes apagar-pagina {
  to { opacity: 0; filter: brightness(0.3); }
}
@keyframes encender-pagina {
  0%   { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(1.8) saturate(0); }
  35%  { clip-path: inset(49.6% 0 49.6% 0); filter: brightness(1.8) saturate(0); }
  100% { clip-path: inset(0 0 0 0);         filter: none; }
}

/* ---------------- Reinicio mínimo ---------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--alto-cabecera) + var(--esp-3));
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-md);
  line-height: var(--lh-texto);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* Enlaces: de navegación sin subrayado; en el texto, con él */
a { color: inherit; text-decoration: none; }

:where(p, li, dd, blockquote, figcaption) a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--subrayado);
  transition:
    color var(--dur-instante) var(--curva-suave),
    text-decoration-color var(--dur-instante) var(--curva-suave);
}
:where(p, li, dd, blockquote, figcaption) a:hover {
  color: var(--enlace-hover);
  text-decoration-color: currentColor;
}

/* Foco visible siempre. Nunca se quita sin sustituto. */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

::selection { background: rgba(217, 177, 102, 0.32); color: var(--texto); }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Saltar al contenido: invisible hasta recibir foco */
.saltar {
  position: fixed;
  top: var(--esp-2);
  left: var(--esp-2);
  z-index: var(--z-aviso);
  padding: var(--esp-2) var(--esp-4);
  font-family: var(--fuente-ui);
  font-size: var(--t-sm);
  background: var(--sala-800);
  color: var(--hueso);
  border: 1px solid var(--luz);
  border-radius: var(--radio-pildora);
  transform: translateY(-200%);
}
.saltar:focus-visible { transform: none; }

/* Línea de carga: el tubo calentando (§10.3) */
.calentando {
  position: relative;
  background: var(--sala-600);
}
.calentando::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 50%;
  height: 1px;
  background: var(--luz-clara);
  box-shadow: 0 0 12px var(--luz);
  animation: latir-linea var(--dur-latido) var(--curva-respiro) infinite;
}
@keyframes latir-linea {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}