/* tokens/typography.css — Clínica Dental Santo Diente */

:root {
  /* ── capa 1: familias ───────────────────────────────────────────── */
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* ── capa 2: roles ──────────────────────────────────────────────── */
  /* Bebas solo en display y en etiquetas cortas. Nunca en párrafos. */

  /* Display XL — portada de red social, cartel, encabezado de sección */
  --text-display-xl-family:  var(--font-display);
  --text-display-xl-size:    clamp(3.5rem, 8vw, 6rem);   /* 56 → 96 px */
  --text-display-xl-lh:      0.88;
  --text-display-xl-tracking: 0.01em;
  --text-display-xl-weight:  400;
  --text-display-xl-case:    uppercase;

  /* Display L — título de página, titular de pieza */
  --text-display-l-family:   var(--font-display);
  --text-display-l-size:     clamp(2.5rem, 5vw, 3.75rem); /* 40 → 60 px */
  --text-display-l-lh:       0.92;
  --text-display-l-tracking: 0.015em;
  --text-display-l-weight:   400;
  --text-display-l-case:     uppercase;

  /* Display M — subtítulo de sección, nombre de servicio */
  --text-display-m-family:   var(--font-display);
  --text-display-m-size:     1.875rem;                    /* 30 px */
  --text-display-m-lh:       1;
  --text-display-m-tracking: 0.02em;
  --text-display-m-weight:   400;
  --text-display-m-case:     uppercase;

  /* Etiqueta — antetítulo, categoría, dato de tabla, botón */
  --text-label-family:       var(--font-display);
  --text-label-size:         1.125rem;                    /* 18 px */
  --text-label-lh:           1.1;
  --text-label-tracking:     0.06em;   /* Bebas necesita aire en chico */
  --text-label-weight:       400;
  --text-label-case:         uppercase;

  /* Título de bloque — Montserrat, cuando el titular lleva minúsculas */
  --text-heading-family:     var(--font-body);
  --text-heading-size:       1.375rem;                    /* 22 px */
  --text-heading-lh:         1.3;
  --text-heading-tracking:   -0.01em;
  --text-heading-weight:     700;

  /* Cuerpo grande — entradilla, primer párrafo */
  --text-body-lg-family:     var(--font-body);
  --text-body-lg-size:       1.125rem;                    /* 18 px */
  --text-body-lg-lh:         1.65;
  --text-body-lg-tracking:   0;
  --text-body-lg-weight:     400;

  /* Cuerpo — el texto por defecto de todo el sistema */
  --text-body-family:        var(--font-body);
  --text-body-size:          1rem;                        /* 16 px */
  --text-body-lh:            1.6;
  --text-body-tracking:      0;
  --text-body-weight:        400;

  /* Cuerpo chico — pie de foto, nota, dato secundario */
  --text-body-sm-family:     var(--font-body);
  --text-body-sm-size:       0.875rem;                    /* 14 px */
  --text-body-sm-lh:         1.5;
  --text-body-sm-tracking:   0.005em;
  --text-body-sm-weight:     400;

  /* Legal — cédula profesional, aviso sanitario, letra chica */
  --text-legal-family:       var(--font-body);
  --text-legal-size:         0.75rem;                     /* 12 px */
  --text-legal-lh:           1.45;
  --text-legal-tracking:     0.01em;
  --text-legal-weight:       400;

  /* ── pesos con nombre ───────────────────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── medida de línea ────────────────────────────────────────────── */
  --measure-prose: 68ch;   /* ancho máximo de un párrafo cómodo */
  --measure-narrow: 46ch;  /* columnas y tarjetas */
}