/* ═══════════════════════════════════════════════════════════
   base.css — reinicio, tipografía y los tokens de :root.

   TODOS los colores de la escena viven aquí como variables y
   los escribe js/04_escena.js. Ningún otro archivo, ni CSS ni
   JS, debe poner un color a fuego: ver CLAUDE.md.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Colores del cielo, del centro al borde */
  --c1:#fffdf4;      /* núcleo del disco  */
  --c2:#ffeaa8;      /* halo              */
  --c3:#ffc25e;      /* medio             */
  --c4:#f0912f;      /* cielo             */
  --c5:#d1701f;      /* borde             */

  /* Resplandores, en RGB porque se usan con alfa */
  --g1:255,247,220;  /* interior */
  --g2:255,226,150;  /* medio    */
  --g3:255,196,100;  /* exterior */

  /* Texto sobre la escena */
  --tinta:#7a4413;
  --aura:255,244,205;

  /* Estado */
  --brillo:1;        /* atenuador de comodidad: 1 = sin atenuar */
  --escala:1;        /* respiración */
  --dx:0px;          /* desplazamiento del campo */
  --dy:0px;

  /* Duraciones. Las ajusta 04_escena.js según lo que esté pasando:
     una animación de amanecer necesita fundidos cortos; un cambio
     manual de momento, largos. */
  --resp:6s;         /* transición de la respiración */
  --seguir:600ms;    /* transición del desplazamiento */
  --fundido:3s;      /* transición de color */
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%;overflow:hidden;background:#0b0806;overscroll-behavior:none}

body{
  font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color:var(--tinta);
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
}

/* Atenuador de comodidad. Marrón cálido y no negro: al bajarlo la
   escena se vuelve tarde tibia, no pantalla apagada.

   OJO: esto NO participa del amanecer. Un amanecer se hace subiendo
   el sol y aclarando el cielo, no levantando un velo. Ver CLAUDE.md. */
#atenuar{
  position:fixed;inset:0;background:#170c05;pointer-events:none;
  opacity:calc(1 - var(--brillo));transition:opacity 1.2s ease;
}