/* The Walk — core.css
   Ley común: respiración del todo (Firme→Blando→Firme) como fundamento.
   Esta hoja NO reemplaza tus estilos: los sostiene. Baja especificidad: solo actúa bajo body.tw
*/

:root{
  /* parámetro único (0..1). core.js lo actualiza y lo persiste */
  --breath: 0.12;

  /* Paleta madre (puede ser reinterpretada por cada página) */
  --tw-bg-dark: #0f0f10;
  --tw-bg-light: #dadada;
  --tw-ink: #dadada;
  --tw-ink-dim: rgba(218,218,218,.68);
  --tw-accent: #f80a0f;
  --tw-hot: #fd6400;

  /* Derivados: no “dicen”, operan */
  --tw-veil: calc(0.14 + (1 - var(--breath)) * 0.40);
  --tw-fog:  calc(0.08 + (1 - var(--breath)) * 0.30);
  --tw-density: calc(0.55 + var(--breath) * 0.35);
  --tw-edge: calc(0.10 + var(--breath) * 0.55);

  /* Tipografía base (neutra; tus páginas pueden sobreescribir) */
  --tw-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body.tw{
  /* No impone fondo: si la página ya define background, no lo pisa.
     Solo ofrece coherencia sutil (texto + ritmo). */
  font-family: var(--tw-font);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Capa atmosférica única, silenciosa (no toca tu layout) */
body.tw::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--tw-veil);
  background:
    radial-gradient(1100px 700px at 20% 10%, rgba(248,10,15, calc(.05 + var(--breath)*.08)), transparent 60%),
    radial-gradient(900px 600px at 80% 80%, rgba(253,100,0, calc(.04 + var(--breath)*.06)), transparent 55%),
    linear-gradient(0deg, rgba(0,0,0,var(--tw-fog)), rgba(0,0,0, calc(var(--tw-fog)*.45)));
  mix-blend-mode: screen;
}

/* Grano madre (si existe el archivo; si no, no pasa nada) */
body.tw::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  background-image: url("../graficos/Ruido_1.jpg");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  filter: contrast(1.05);
}

/* Asegura que tu contenido quede por encima de capas */
body.tw > *{
  position: relative;
  z-index: 2;
}

/* Microley de foco: interacciones sin cambiar tus estilos */
body.tw a, body.tw button{
  outline-color: rgba(253,100,0,.55);
  outline-offset: 3px;
}

/* Debug silencioso (solo si core.js activa .tw-debug) */
body.tw.tw-debug .tw__debug{
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.35);
  color: rgba(218,218,218,0.85);
  font-size: 12px;
  backdrop-filter: blur(8px);
  letter-spacing: .08em;
}