/* ============================================================================
   Valdra · Sistema de diseño — tipografía

   No se sustituye la pila tipográfica de app.css (Inter para todo lo que se
   lee, JetBrains Mono para terminal/eyebrow/cifra: la regla sigue vigente,
   ver UI_AUDIT.md §2) — se le pone una ESCALA con nombre, para que un
   primitivo nuevo no tenga que decidir un tamaño de letra a mano cada vez.

   La escala es la misma proporción que ya usa el resto de la consola
   (13.5px de cuerpo, cabeceras de tarjeta a 13-14px): esto documenta lo que
   ya existía y añade los dos escalones que faltaban arriba, para el hero y
   los títulos de sección del nuevo Inicio.
   ============================================================================ */

:root {
  --font-size-xs:   11px;
  --font-size-sm:   12.5px;
  --font-size-base: 13.5px;
  --font-size-md:   15px;
  --font-size-lg:   17px;
  --font-size-xl:   21px;
  --font-size-2xl:  27px;
  --font-size-3xl:  34px;

  --font-weight-regular: 400;
  --font-weight-medium:  520;
  --font-weight-semibold: 620;
  --font-weight-bold:    720;

  --line-height-tight: 1.2;
  --line-height-base:  1.5;
  --line-height-loose: 1.65;

  --letter-spacing-eyebrow: .08em;
}

/* ── Utilidades tipográficas ──────────────────────────────────────────────
   Prefijo vx- (Valdra design system) para no colisionar con ninguna clase de
   una vista existente: app.css y las 25 vistas ya usan `.h`, `.sub`, `.nm`,
   `.t3`… y una utilidad nueva con ese mismo nombre pisaría la de otra vista
   sin avisar. */

.vx-eyebrow {
  font-family: var(--mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.vx-display {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -.01em;
}

.vx-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.vx-heading {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.vx-body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--text-secondary);
}

.vx-caption {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: var(--line-height-base);
}

.vx-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}