/* ============================================================
   LUISA GRAJALES — TYPOGRAPHIC SYSTEM
   T1 Display     · Playfair Display 600 · titulares
   T2 Editorial   · Playfair Display Italic · citas / manifiesto
   T3 Operativo   · Montserrat 400 · cuerpo
   T4 Etiqueta    · Montserrat 600 UPPERCASE · labels (bronce)
   T5 Datos       · Montserrat 700 · cifras y métricas
   Regla: nunca más de dos pesos por sección. La tipografía
   no compite con el espacio — lo habita.
   ============================================================ */

:root {
  /* — Familias — */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* — Pesos canónicos — */
  --weight-body: 400;
  --weight-medium: 500;
  --weight-label: 600;
  --weight-display: 600;
  --weight-data: 700;

  /* — Escala tipográfica (display en serif, generosa) — */
  --text-hero: clamp(2.75rem, 6vw, 4.5rem);   /* 44–72px · portadas */
  --text-h1: clamp(2.25rem, 4.5vw, 3.25rem);  /* 36–52px */
  --text-h2: clamp(1.75rem, 3vw, 2.25rem);    /* 28–36px */
  --text-h3: 1.5rem;                          /* 24px */
  --text-quote: clamp(1.5rem, 3vw, 2rem);     /* pull quotes editoriales */
  --text-body-lg: 1.125rem;                   /* 18px */
  --text-body: 1rem;                          /* 16px */
  --text-body-sm: 0.875rem;                   /* 14px */
  --text-label: 0.75rem;                      /* 12px · etiquetas caps */
  --text-data: clamp(3rem, 8vw, 6rem);        /* cifras aisladas */

  /* — Interlineado — */
  --leading-tight: 1.1;     /* titulares display */
  --leading-snug: 1.3;
  --leading-body: 1.75;     /* cuerpo operativo — generoso */

  /* — Tracking — */
  --tracking-display: -0.01em;
  --tracking-body: 0;
  --tracking-label: 0.18em;   /* etiquetas amplias */
  --tracking-label-wide: 0.28em;
}

/* ============================================================
   CLASES DE ROL TIPOGRÁFICO (opcionales, para uso directo)
   ============================================================ */

.lg-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-body);
}

.lg-editorial {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-body);
  line-height: var(--leading-snug);
  color: var(--text-body);
}

.lg-body {
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-body);
}

.lg-label {
  font-family: var(--font-body);
  font-weight: var(--weight-label);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
}

.lg-data {
  font-family: var(--font-body);
  font-weight: var(--weight-data);
  font-size: var(--text-data);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-body);
}