/* tokens.css — origen unico de color, tipografia, tiempo y medida.
   Lo enlaza el puesto de mando (web/ui/index.html) y el tema de Quartz del sitio publico:
   un solo mundo visual, pintado una vez.
   Los hex estan verificados por tests/test_ui_contraste.py — no cambies uno sin correrlo.

   2026-08-25 — TERCERA PIEL: de Dala (vacio y violeta) a BRASA (oscuridad calida de museo).
   Decision de Carlos: el cerebro como pieza unica flotando en penumbra calida, tipografia
   crema como unica decoracion, inspirado en el sistema ORYZO (referencia aportada por Carlos,
   usada como ejemplo, no copiada). Piel unica oscura: se retira el tema dia, la Lampara y
   el Foco; la referencia vive en git.
   Los NOMBRES de token no se tocan a proposito: estilo.css, app.js, la portada que hornea
   publica.py y los huecos de color de Quartz piden var(--catodo) sin saber de que color es.
   `--catodo` vuelve a ser naranja —el naranja de catodo original, ahora como brasa editorial:
   acento de texto y unico boton relleno, con tinta oscura encima. */

/* 2026-09-15: Inter se sirve desde aqui. Antes era «Inter si el visitante la tiene» y casi nadie la
   tiene: cada visitante veia la fuente de su sistema. Variable (100-900) en un solo woff2. */
@font-face {
  font-family: Inter;
  src: url("tipos/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* piel brasa (unica) — el vacio calido ES el diseño: negro nogal, nunca negro puro */
  --fondo: #100904;          /* nogal: el lienzo y el vacio detras de cada pieza */
  --panel: #160c06;          /* medio escalon arriba: la separacion la hace el aire, no la caja */
  --hueso: #ffedd7;          /* crema calido — nunca #fff: el tinte calido es la firma */
  --hueso-2: #d8c3a8;        /* crema apagado — cuerpo secundario */
  --hueso-3: #a89987;        /* gris calido — nav apagada, metadatos, fantasmas legibles */
  --catodo: #dc5000;         /* brasa — acento editorial y unico boton relleno; se gana su rareza */
  --catodo-tinta: #100904;   /* lo que se escribe ENCIMA de la brasa: tinta nogal */
  --bronce: #8a7a68;         /* madera — hairlines, bordes y micro-rotulos */
  --oro: #e8bb55;            /* el metal de la moneda de marca: oro calido, familia del bronce */
  --oro-sombra: #6b4e2a;     /* el cuero caliente que el oro refleja por debajo */
  --aviso: #ff7a66;          /* rojo calido de fallo: funcional, no de marca */
  --fantasma: rgba(255, 237, 215, .14);
  --rejilla: rgba(255, 237, 215, .05);
  --pozo: rgba(255, 237, 215, .055);  /* la luz calida detras de la pieza: alfa bajo, sin halo de color */
  --halo: 0 0 8px rgba(220, 80, 0, .55), 0 0 30px rgba(220, 80, 0, .25);
  /* tipografia — UNA familia para todo, geometrica sans: Inter autoalojada (@font-face arriba),
     detras la del sistema. `--datos` sigue monoespaciada: eso es funcion (cifras y codigo
     alineados), no estilo. */
  --condensada: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --prosa: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --datos: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  /* tiempo */
  --t-golpe: 120ms;
  --t-decae: 400ms;
  --t-seccion: 180ms;
  --t-piel: 600ms;
  --t-fila: 260ms;
  --t-moneda: 600ms;         /* lo que tarda la moneda en cruzar la pantalla */
  --t-llegada: 480ms;        /* lo que tarda en revelarse una respuesta al llegar (Fase 3) */
  /* La respuesta al toque: lo que tarda el boton en bajar el brillo con el dedo encima. Es un
     acuse de recibo, no una coreografia, asi que va por debajo de `t-golpe`. */
  --t-toque: 80ms;
  /* La curva de esa llegada: ease-out exponencial — entra rapido y se posa, no rebota. */
  --curva-llegada: cubic-bezier(.16, 1, .3, 1);
  /* medida */
  --alto-barra: 64px;
  /* La barra inferior de secciones del telefono (spec 2026-09-22). 56 es lo que pide una fila de
     cinco pestanas con su rotulo a .75rem y 44px de alto minimo por boton; lleva encima el
     `env(safe-area-inset-bottom)` del iPhone, que no es una medida nuestra sino del aparato. */
  --alto-tabbar: 56px;
  --ancho-instrumentos: 300px;
  --moneda-grande: 104px;    /* el lado de la moneda cuando aterriza en la columna derecha */
  --alto-entrada: 96px;
  /* La franja de composicion de la cartera: su alto. El ancho lo pone el numero de posiciones. */
  --alto-franja: 18px;
  /* La columna de prosa de las secciones de lectura. En escritorio se centra en el espacio que
     queda entre el margen y el rail: pegada a la izquierda dejaba 590px de vacio a 1440. */
  --ancho-lectura: 68ch;
  /* A1 (ronda 2026-09-22 tarde): la columna unica del chat en escritorio — caja, sugerencias,
     historial y respuesta comparten este ancho, centrado en la pagina. */
  --ancho-conversacion: 46rem;
  /* B4: el fundido por encima de la caja de pregunta, que ahora es opaca. */
  --fundido-entrada: 32px;
  /* B7: el selector de edicion deja de medir lo que su opcion mas larga. */
  --ancho-selector-edicion: 28rem;
  /* B6: la pieza en el telefono, para que el cerebro entero quepa sobre la caja fija. */
  --cerebro-movil: min(300px, 76vw);
}

/* En movil la barra son dos filas fijas: marca arriba, secciones abajo en una sola linea que se
   desplaza. El alto es un token porque #contenido y scroll-padding lo leen. */
@media (max-width: 999px) {
  :root { --alto-barra: 136px; }
}
/* B5 (ronda 2026-09-22 tarde): en tableta las cinco pestanas van en UNA fila — marca 44 + pestanas
   44 + 16 de aire. Se pisa aqui y no arriba: el bloque <600 de abajo la vuelve a dejar en 56. */
@media (max-width: 999px) {
  :root { --alto-barra: 104px; }
}

/* Por debajo de 600px la barra vuelve a UNA fila —moneda y marca— porque las secciones se van a la
   barra inferior fija: los 136px eran de una segunda fila que ya no existe, y dejarlos era 80px de
   aire muerto en cada pantalla de telefono. */
@media (max-width: 599px) {
  :root { --alto-barra: 56px; }
}