/* ============================================================
   Claud IA — TYPOGRAPHY TOKENS
   Poppins (display/headings) · Montserrat (body/educational)
   ============================================================ */

:root {
  /* ---- Familias ---- */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-logo: 'Poppins', sans-serif;

  /* ---- Pesos ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Escala tipográfica (1.250 major third-ish, ajustada) ---- */
  --text-2xs: 0.6875rem;   /* 11px */
  --text-xs:  0.75rem;     /* 12px */
  --text-sm:  0.875rem;    /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:  1.125rem;    /* 18px */
  --text-lg:  1.375rem;    /* 22px */
  --text-xl:  1.75rem;     /* 28px */
  --text-2xl: 2.25rem;     /* 36px */
  --text-3xl: 2.875rem;    /* 46px */
  --text-4xl: 3.75rem;     /* 60px */
  --text-5xl: 4.75rem;     /* 76px */

  /* ---- Line heights ---- */
  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;   /* descriptor / eyebrow estilo logo */
  --tracking-widest: 0.22em;

  /* ============================================================
     ROLES SEMÁNTICOS
     ============================================================ */
  --type-display-size: var(--text-5xl);
  --type-display-weight: var(--weight-semibold);
  --type-display-leading: var(--leading-tight);
  --type-display-tracking: var(--tracking-tight);

  --type-h1-size: var(--text-4xl);
  --type-h2-size: var(--text-3xl);
  --type-h3-size: var(--text-2xl);
  --type-h4-size: var(--text-xl);
  --type-title-weight: var(--weight-semibold);
  --type-title-tracking: var(--tracking-tight);

  --type-body-size: var(--text-base);
  --type-body-weight: var(--weight-regular);
  --type-body-leading: var(--leading-relaxed);

  /* Eyebrow / descriptor (estilo "IA PRÁCTICA PARA MUJERES") */
  --type-eyebrow-size: var(--text-xs);
  --type-eyebrow-weight: var(--weight-semibold);
  --type-eyebrow-tracking: var(--tracking-wider);

  /* ============================================================
     ESCALA SOCIAL / POST  (lienzos 1080px — Instagram, redes)
     ------------------------------------------------------------
     La escala de UI (rem, tope 76px) se ve pequeña en un lienzo
     de 1080px. Para gráficas sociales usa SIEMPRE estos roles:
     ya vienen dimensionados para el lienzo (no escalar a mano).
     Pensados para 1080×1080 / 1080×1350. Para Story/Reel
     (1080×1920) multiplica ~1.1–1.2 por la mayor distancia.
     ============================================================ */
  --post-eyebrow:  30px;   /* descriptor / kicker */
  --post-display: 104px;   /* hook protagonista (1–2 palabras destacadas) */
  --post-title:    76px;   /* titular estándar del post */
  --post-subtitle: 44px;   /* línea de apoyo bajo el titular */
  --post-lead:     40px;   /* primer párrafo / dato destacado */
  --post-body:     36px;   /* cuerpo, listas, pasos */
  --post-cta:      36px;   /* texto del botón / llamada a la acción */
  --post-handle:   30px;   /* @usuario, web, firma */
  --post-caption:  28px;   /* pies, fuentes, notas */

  --post-leading-display: 1.02;  /* titulares de post */
  --post-leading-body: 1.5;      /* cuerpo de post */
}