/*
 * KINOS REAL ESTATE — typography.css
 * Sistema tipográfico completo: variantes y clases utilitarias.
 *
 * FUENTES (cargadas en app.html):
 *   Display:  Cormorant Garamond (serif) — titulares, hero, editorial
 *   Body:     DM Sans (sans-serif)       — cuerpo, UI, formularios
 *   Mono:     DM Mono (monospace)        — datos técnicos, precios, referencias
 *
 * JERARQUÍA EDITORIAL KINOS:
 *   Eyebrow → H1/H2 (Cormorant) → Lead (DM Sans) → Body → Caption → Microcopy
 */

/* ── Display — Cormorant Garamond ── */
.type-display-hero {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl));
  font-weight: var(--font-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-authority);
}

.type-display-hero--on-dark {
  color: var(--text-on-dark-primary);
}

.type-display-section {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: var(--font-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-authority);
}

.type-display-card {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-authority);
}

/* ── Eyebrow — etiqueta superior institucional ── */
.type-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-ultra);
  text-transform: uppercase;
  color: var(--color-gold);
  line-height: var(--leading-normal);
}

.type-eyebrow--on-dark {
  color: var(--text-on-dark-muted);
}

.type-eyebrow--navy {
  color: var(--color-kinos-blue-25);
}

/* ── Subtítulos — DM Sans ── */
.type-subtitle-lg {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.type-subtitle-md {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.type-subtitle--on-dark {
  color: var(--text-on-dark-secondary);
}

/* ── Body ── */
.type-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.type-body-md {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.type-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* ── Precio — DM Mono ── */
.type-price {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text-authority);
}

.type-price-sm {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--text-authority);
}

/* ── Datos técnicos — DM Mono ── */
.type-data {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.type-data-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── KPI / Estadística ── */
.type-kpi-value {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: var(--font-light);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-authority);
}

.type-kpi-value--on-dark {
  color: var(--text-on-dark-primary);
}

.type-kpi-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.type-kpi-label--on-dark {
  color: var(--text-on-dark-muted);
}

/* ── Navigation ── */
.type-nav-item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--text-authority);
}

.type-nav-item--on-dark {
  color: var(--text-on-dark-primary);
}

/* ── CTA label ── */
.type-cta {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ── Badge / Tag ── */
.type-badge {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1;
}

/* ── Zona / Localización ── */
.type-zone {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ── Tesis editorial ── */
.type-thesis {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}

/* ── Confidencialidad / Legal ── */
.type-legal {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}