/* ══════════════════════════════════════════════════════════════════
   ALYX v2.22 — TYPOGRAPHY PASS
   ─────────────────────────────────────────────────────────────────
   Segundo movimiento de la conversación de UX iniciada en v2.20.
   Objetivo: subir el suelo de legibilidad sin desfigurar el carácter
   "gótico-editorial" del producto.

   Diagnóstico previo (resumido):
     · 394 reglas con font-size 7–11px repartidas en 16 archivos CSS.
     · letter-spacing 2–3px en small caps con 8–10px de cuerpo:
       triple ataque a la legibilidad (tamaño, tracking, contraste).
     · 77 reglas font-style:italic en styles.css. Crimson italic en
       cuerpos pequeños sobre fondo oscuro es la zona más cansada.
     · Mezclas no intencionadas de Cinzel + Crimson + Georgia/Times
       en la misma línea por cómo se cargan inline-style el HTML.

   Esta pasada NO toca esas 394 reglas. En su lugar:
     1) Define tokens semánticos para escala de tamaño, tracking y
        color de labels.
     2) Sube el "suelo" de los selectores más visibles (labels de
        sección, títulos de celda, chips, tabs, panel headers).
     3) Reserva itálicas para attribution/poetic — quita del
        funcional (subtítulos de celda, captions, hints).
     4) Normaliza la family inline a las variables del sistema.

   Carga LAST en index.html después de clarity. !important sólo
   donde una hoja anterior ya lo usa con la misma propiedad.
══════════════════════════════════════════════════════════════════ */


/* ── 1. SEMANTIC TYPOGRAPHY TOKENS ────────────────────────────────
   La regla mental simple:
     · Si es etiqueta funcional (label), sm o md. Nunca menos de sm.
     · Si es texto leíble, body-md o body-lg.
     · Si es "decoración" (caption, hint), label-sm + color-dim.
   Tres tamaños, no cinco. Tres tracking, no siete.
─────────────────────────────────────────────────────────────────── */
:root {
  /* Label scale — antes 7/8/9/10/11/12/13px en distintos lugares */
  --typo-label-xs: 10px;  /* solo decorativo: timestamps, indicadores */
  --typo-label-sm: 11px;  /* default para small caps de sección */
  --typo-label-md: 12px;  /* etiqueta enfatizada */
  --typo-label-lg: 14px;  /* título de panel */

  /* Body scale */
  --typo-body-sm: 13px;   /* sub texto, captions con peso */
  --typo-body-md: 14px;   /* default body */
  --typo-body-lg: 16px;   /* texto del prompt, áreas editables */

  /* Tracking — antes 1.5–3px, ahora máx 1.2px en small caps */
  --typo-track-tight:  .3px;
  --typo-track-normal: .8px;
  --typo-track-wide:   1.2px;   /* tope absoluto */

  /* Color scale — antes hasta 30% blanco (invisible).
     45% es el suelo perceptible cómodo sobre fondo oscuro. */
  --typo-label-color:      rgba(255,255,255,.62);
  --typo-label-color-dim:  rgba(255,255,255,.45);
  --typo-label-color-emph: rgba(255,255,255,.85);

  /* Cuerpo: usamos los tokens existentes */
  --typo-body-color:     var(--text);
  --typo-body-color-dim: var(--text2);
}


/* ══════════════════════════════════════════════════════════════════
   2. SECTION LABELS — el problema más visible
   "— PROMPT", "— INTENSITY", "EMOTION", "TEMPO": small caps a 7-9px
   con tracking salvaje. Subimos suelo a 11px, tracking 1px, color 62%.
══════════════════════════════════════════════════════════════════ */

/* Inspector context panel — eran 8px / ls 2px / color 30% */
.ctx-section-lbl {
  font-size: var(--typo-label-sm) !important;
  letter-spacing: var(--typo-track-normal) !important;
  color: var(--typo-label-color-dim) !important;
}
.ctx-section-lbl-icon {
  font-size: var(--typo-label-md) !important;
  opacity: .75 !important;
}

/* Sidebar section labels */
.ls-label {
  font-size: var(--typo-label-md) !important;
  letter-spacing: var(--typo-track-wide) !important;
  color: var(--typo-label-color) !important;
}

/* Sidebar control labels (BPM, KEY etc — los que aparecen al lado de sliders) */
.ls-ctrl-label {
  font-size: var(--typo-label-md);
  letter-spacing: var(--typo-track-normal);
  color: var(--typo-label-color-dim);
}

/* Right panel labels — "Prompt", "Ref" etc */
.rp-label {
  font-size: var(--typo-label-md);
  letter-spacing: var(--typo-track-wide);
  color: var(--typo-label-color);
}

/* Generic arc labels (intensity bar, etc.) */
.arc-label,
.arc-bar-labels .arc-label {
  font-size: var(--typo-label-sm) !important;
  letter-spacing: var(--typo-track-normal) !important;
}


/* ══════════════════════════════════════════════════════════════════
   3. CHIPS, PILLS, BADGES — etiquetas funcionales
   Eran 9-10px con tracking 1px. Subir a 11px reduce el sentimiento
   "decorativo" y los hace clickables.
══════════════════════════════════════════════════════════════════ */

.proj-chip {
  font-size: var(--typo-label-sm);
  letter-spacing: var(--typo-track-normal);
  padding: 3px 9px;
}

.alyx-pill {
  font-size: var(--typo-label-sm);
  letter-spacing: var(--typo-track-tight);
}

/* Section column header (encima de cada bloque del sequencer) */
.sec-col-hdr {
  font-size: var(--typo-label-sm) !important;
  letter-spacing: var(--typo-track-normal) !important;
}

/* Mode switcher trigger */
.alyx-mode-trigger,
.alyx-mode-cur {
  font-size: var(--typo-label-md) !important;
  letter-spacing: var(--typo-track-normal) !important;
}


/* ══════════════════════════════════════════════════════════════════
   4. CELL CONTENT — donde el usuario lee texto real
   .seq-cell-title estaba a 11–13px (varía según override).
   .seq-cell-sub a 11px italic — el italic + dark + pequeño es
   la combinación más cansada del codebase. Subimos sub a 12px y
   conservamos italic (es identidad), pero también subimos contraste.
══════════════════════════════════════════════════════════════════ */

.seq-cell-title {
  font-size: var(--typo-body-sm) !important;
  font-weight: 600 !important;
  letter-spacing: var(--typo-track-tight) !important;
  color: rgba(255,255,255,.92) !important;
}
.seq-cell-sub {
  font-size: var(--typo-label-md) !important;
  color: rgba(255,255,255,.65) !important;
  line-height: 1.55 !important;
  /* mantenemos font-style:italic porque es identidad del proyecto */
}

/* "+ Add" hint en celdas vacías */
.seq-cell-add-lbl {
  font-size: var(--typo-label-sm) !important;
  letter-spacing: var(--typo-track-normal) !important;
}


/* ══════════════════════════════════════════════════════════════════
   5. TOPBAR Y NAVEGACIÓN — botones de texto
   EXPORT / IMPORT / DETAILS / HISTORY estaban en ls 1.5px. Bajamos
   a 1.2px y subimos algo de cuerpo en los tabs porque tab activo
   es ancla visual primaria.
══════════════════════════════════════════════════════════════════ */

.btn {
  letter-spacing: var(--typo-track-wide) !important;
}

.inspector-tab-btn {
  font-size: var(--typo-label-md);
  letter-spacing: var(--typo-track-wide);
}

.asst-toggle-btn {
  letter-spacing: var(--typo-track-normal);
}

.proj-input {
  /* nombre del proyecto en topbar — Cinzel 15px era OK,
     pero el letter-spacing 1px aplicado por proj-input
     en alyx-fix.css se cargaba la legibilidad. */
  letter-spacing: var(--typo-track-tight) !important;
}


/* ══════════════════════════════════════════════════════════════════
   6. STEPPER — pasos numerados de la cabecera
   Letter-spacing demasiado wide para que los subtítulos largos
   entren cómodamente. Subimos cuerpo del título, bajamos tracking.
══════════════════════════════════════════════════════════════════ */

.step-title {
  font-size: var(--typo-body-md);
  letter-spacing: var(--typo-track-tight);
}
.step-desc {
  font-size: var(--typo-label-md);
  letter-spacing: var(--typo-track-tight);
  color: var(--typo-label-color-dim);
}


/* ══════════════════════════════════════════════════════════════════
   7. AI / ASSISTANT PANEL
   Mucha label y mucha caption juntas. Conviene jerarquizar:
   título de sección 13px wide, captions 11px tight.
══════════════════════════════════════════════════════════════════ */

.asst-section-title,
.asst-section-lbl {
  font-size: var(--typo-label-md) !important;
  letter-spacing: var(--typo-track-normal) !important;
  color: var(--typo-label-color) !important;
}

.asst-key-label,
.asst-key-sub {
  font-size: var(--typo-label-sm) !important;
}

.asst-key-status {
  font-size: var(--typo-label-xs) !important;
  letter-spacing: var(--typo-track-normal) !important;
}


/* ══════════════════════════════════════════════════════════════════
   8. ITALIC AUDIT
   Reserva del italic para texto editorial / atribución. Quitar de:
   · Placeholders cortos (ya cubierto en clarity para inputs)
   · Sub-headlines descriptivas con pocas palabras
   · Hint text de empty states
   Conservamos italic en .seq-cell-sub (identidad) y en cuerpos
   editoriales largos.
══════════════════════════════════════════════════════════════════ */

/* Hints decorativos cortos: quitar italic */
.hist-empty,
.proj-edit-btn,
.gauge-lbl,
.ls-tag {
  font-style: normal !important;
}

/* Empty state del sequencer — italic estaba en rgba a 35%, doblemente
   ilegible. Subimos a 55% y quitamos italic. */
.sec-empty-hint,
.empty-state-hint {
  font-style: normal;
  color: var(--typo-label-color-dim);
}


/* ══════════════════════════════════════════════════════════════════
   9. FONT FAMILY NORMALIZATION
   Algunos inline styles en index.html usan 'Crimson Pro',serif o
   'Georgia',serif directamente. Eso se ve sobre todo en bloques
   descriptivos del onboarding y simple-mode-overlay. Mapeamos esos
   nombres al stack del sistema para evitar saltos de personalidad
   tipográfica dentro de la misma frase.
══════════════════════════════════════════════════════════════════ */

/* Donde el HTML pone 'Crimson Pro' inline, lo redirigimos.
   No podemos sobreescribir un inline style con CSS externo a
   no ser que la family inline use ! important — pero podemos
   reforzar el stack del root del body. */
body, html {
  font-family: var(--ff-crimson);
}


/* ══════════════════════════════════════════════════════════════════
   10. CTX-PANEL CONTENT — texto explicativo del inspector
   Subimos cuerpo del prompt textarea a 15px porque ahí el usuario
   escribe Y lee — tamaño primario.
══════════════════════════════════════════════════════════════════ */

.ctx-prompt-ta {
  font-size: var(--typo-body-lg);
  line-height: 1.55;
}

/* Modal flotante de edición de clip */
.cedit-ta {
  font-size: var(--typo-body-lg);
  line-height: 1.55;
}


/* ══════════════════════════════════════════════════════════════════
   11. CINZEL / SMALL CAPS — regla general de tracking
   El stack --ff-cinzel es 'Palatino Linotype' en realidad. Palatino
   con letter-spacing 2-3px en mayúsculas chico se separa demasiado;
   las letras dejan de leerse como palabra. Aplicamos un techo via
   un selector amplio: cualquier cosa con font-family Cinzel +
   text-transform uppercase tiene max ls de 1.2px.
══════════════════════════════════════════════════════════════════ */

[style*="text-transform:uppercase"][style*="letter-spacing:2"],
[style*="text-transform:uppercase"][style*="letter-spacing: 2"],
[style*="text-transform:uppercase"][style*="letter-spacing:3"],
[style*="text-transform:uppercase"][style*="letter-spacing: 3"] {
  letter-spacing: var(--typo-track-wide) !important;
}

/* fin v2.22 — typography pass */