/*
  Tipografía base.

  Figma exporta TODOS los nodos de texto con line-height "normal" (auto), no con
  un valor numérico — el token "lineHeight: 100" del System es la definición del
  estilo, pero los textos reales usan auto. Por eso --lh-base es `normal`.

  IMPORTANTE (arquitectura de color): los encabezados y párrafos heredan el color
  (`color: inherit`) en vez de fijar negro. Fijar un color aquí ganaba por
  especificidad sobre la herencia y obligaba a repetir `color` en cada regla
  hija; ese era el origen de una familia entera de bugs de "texto negro" dentro
  de contenedores de color. El color por defecto lo define `body`.
*/

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  max-width: 100%;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: inherit;
  line-height: var(--lh-base);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: inherit;
  line-height: var(--lh-base);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: inherit;
  line-height: var(--lh-base);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: var(--fw-heavy);
  text-transform: uppercase;
  color: inherit;
  line-height: var(--lh-base);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: inherit;
  line-height: var(--lh-base);
  margin: 0;
}

.body, p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  color: inherit;
  line-height: var(--lh-base);
  margin: 0;
}

ul, ol, li { color: inherit; line-height: var(--lh-base); }
a { color: inherit; }

.body-bold      { font-family: var(--font-body); font-size: var(--fs-body-bold);     font-weight: var(--fw-bold); }
.body-lg        { font-family: var(--font-body); font-size: var(--fs-body-lg);       font-weight: var(--fw-regular); }
.body-lg-bold   { font-family: var(--font-body); font-size: var(--fs-body-lg-bold);  font-weight: var(--fw-bold); }
.small          { font-family: var(--font-body); font-size: var(--fs-small);         font-weight: var(--fw-regular); }
.small-bold     { font-family: var(--font-body); font-size: var(--fs-small-bold);    font-weight: var(--fw-bold); }