/* ============================================================================
   4) TIPOGRAFÍA — FUENTE ÚNICA DE LA VERDAD para títulos y subtítulos
   ============================================================================
   Estilos aplicados a:
     - <h1>..<h4> nativos dentro de .main-content (dashboard) y .abk-page
       (login, install, recovery, sso) — sin clase requerida.
     - [class$="-h1"]..[class$="-h4"] — clases module-prefixed (.bit-h1,
       .gp-h1, .gux-h2, etc.) aplicadas a span/div/h-tag indistintamente.
     - .abk-h1..h4 — override puntual desde cualquier scope.

   ENFORCEMENT — !important en FONT properties (familia, tamaño, peso,
   tracking, line-height). Esto GARANTIZA uniformidad: ningún módulo puede
   romper el sistema agregando su propio font-size/font-weight. Si hace
   falta un título más pequeño en un sub-componente (modal head, kpi label),
   se usa otra etiqueta (h5/h6/div) o una clase dedicada (NO un h-tag).

   COLOR queda SIN !important deliberadamente para permitir overrides
   contextuales: heros sobre fondo oscuro (.tem-detail-hero h1 { color:#fff }),
   tarjetas con fondo color, etc. Specificity normal aplica.

   Theming:
     - Cambia --abk-h1-color (etc.) en :root y todos los títulos cambian.
     - El módulo Temas → pestaña Tipografía edita estos tokens en vivo.
   ============================================================================ */

/* Reset compartido — line-height + margen del bloque */
:where(.main-content, .abk-page) :is(h1, h2, h3, h4),
:where(.main-content, .abk-page) :is([class$="-h1"], [class$="-h2"], [class$="-h3"], [class$="-h4"]),
.abk-h1, .abk-h2, .abk-h3, .abk-h4 {
  line-height: var(--abk-line-height-tight) !important;
  margin: 0 0 var(--abk-space-2);
}

/* H1 */
:where(.main-content, .abk-page) h1,
:where(.main-content, .abk-page) [class$="-h1"],
.abk-h1 {
  font-family: var(--abk-h1-family) !important;
  font-size: var(--abk-font-size-h1) !important;
  font-weight: var(--abk-h1-weight) !important;
  letter-spacing: var(--abk-h1-tracking) !important;
  color: var(--abk-h1-color);
  position: relative;
  padding-bottom: 6px;
}

/* H2 */
:where(.main-content, .abk-page) h2,
:where(.main-content, .abk-page) [class$="-h2"],
.abk-h2 {
  font-family: var(--abk-h2-family) !important;
  font-size: var(--abk-font-size-h2) !important;
  font-weight: var(--abk-h2-weight) !important;
  letter-spacing: var(--abk-h2-tracking) !important;
  color: var(--abk-h2-color);
}

/* H3 */
:where(.main-content, .abk-page) h3,
:where(.main-content, .abk-page) [class$="-h3"],
.abk-h3 {
  font-family: var(--abk-h3-family) !important;
  font-size: var(--abk-font-size-h3) !important;
  font-weight: var(--abk-h3-weight) !important;
  letter-spacing: var(--abk-h3-tracking) !important;
  color: var(--abk-h3-color);
}

/* H4 */
:where(.main-content, .abk-page) h4,
:where(.main-content, .abk-page) [class$="-h4"] {
  font-family: var(--abk-h4-family) !important;
  font-size: var(--abk-font-size-base) !important;
  font-weight: var(--abk-h4-weight) !important;
  color: var(--abk-h4-color);
}
/* .abk-h4 — variante "eyebrow" en mayúsculas, opt-in via clase */
.abk-h4 {
  font-family: var(--abk-h4-family) !important;
  font-size: var(--abk-font-size-h4) !important;
  font-weight: var(--abk-h4-weight) !important;
  color: var(--abk-text-muted);
  text-transform: uppercase;
  letter-spacing: .12em !important;
}

/* Línea decorativa gradient debajo del h1 — usa tokens, themeable */
:where(.main-content, .abk-page) h1::after,
.abk-h1::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 56px;
  height: 3px;
  border-radius: var(--abk-radius-pill);
  background: linear-gradient(90deg, var(--abk-primary-2) 0%, var(--abk-primary) 50%, var(--abk-accent) 100%);
  transition: width .35s var(--abk-ease);
}
:where(.main-content, .abk-page) h1:hover::after,
.abk-h1:hover::after { width: 96px; }

/* .abk-h-icon — wrapper para iconos SVG inline en títulos.
   Hereda el color del padre (h1) automáticamente vía currentColor.
   Cambia con dark mode + variantes sin código adicional.
   Uso:
     <h1 class="X-title">
       <span class="abk-h-icon"><?= abk_icon('folder') ?></span>
       Título
     </h1>
*/
.abk-h-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 8px;
  color: inherit;
  flex-shrink: 0;
}
.abk-h-icon svg {
  width: 1em;
  height: 1em;
  display: block;
  stroke: currentColor;
}
/* Permite que h1 con icono use flex-row si su clase ya lo tiene */
:where(.main-content, .abk-page) h1:has(> .abk-h-icon),
:where(.main-content, .abk-page) h1:has(> span.abk-h-icon) {
  display: flex;
  align-items: center;
  gap: 10px;
}
:where(.main-content, .abk-page) h1:has(> .abk-h-icon) .abk-h-icon { margin-right: 0; }

/* Subtítulo / lead — el párrafo informativo que vive bajo un título.
   .abk-subtitle  → tamaño base, gris semiblando — el caso 90%
   .abk-lead      → más grande, para hero de un módulo */
.abk-subtitle,
.abk-lead {
  font-family: var(--abk-font-family);
  color: var(--abk-text-soft);
  line-height: var(--abk-line-height);
  margin: 0 0 var(--abk-space-3);
  max-width: 980px;
}
.abk-subtitle { font-size: var(--abk-font-size-base); }
.abk-lead     { font-size: var(--abk-font-size-lg); }