/* =========================================================
   Typography primitives & helpers
   ========================================================= */

/* Die Referenz setzt genau drei Überschriftengrößen, und zwar in
   absoluten Werten mit eigenem Laufweitenausgleich je Größe:

     h1{font-size:30px;letter-spacing:-1.1px;line-height:1.2}
     h2{font-size:19px;letter-spacing:-.5px}
     h3{font-size:15px}

   Eine gemeinsame relative Laufweite (``-0.012em``) trifft das nicht:
   sie ergibt bei 30 px −0,36 px statt −1,1 px, und genau daran erkennt
   man eine nachgebaute Überschrift. Die Werte stehen deshalb einzeln.

   Ein Schriftschnitt wird bewusst nicht gesetzt: die Referenz tut es
   auch nicht und überlässt Überschriften dem Browser-Standard ``bold``. */

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  line-height: var(--leading-tight);
  color: var(--text);
}

h1 {
  font-size: var(--text-4xl); /* 30 */
  letter-spacing: -1.1px;
  line-height: 1.2;
}
h2 {
  font-size: var(--text-xl); /* 19 */
  letter-spacing: -0.5px;
}
h3 {
  font-size: var(--text-15); /* 15 */
}
/* h4 und h5 kommen im Konzept nicht vor. Sie setzen die Reihe nach
   unten fort, statt eine vierte Größe zu erfinden. */
h4 {
  font-size: var(--text-md);
}
h5 {
  font-size: var(--text-base);
}

@media (max-width: 350px) {
  h1 {
    font-size: var(--text-27); /* 27 */
  }
}

p {
  margin: 0;
}

/* ``small{font-size:12px}`` in der Referenz, ohne Farbe. Die Farbe
   steht hier trotzdem: praktisch jede ``small``-Regel des Konzepts setzt
   ``color:var(--muted)`` gleich mit, und eine zentrale Vorgabe ist besser
   als dieselbe Zeile fünfzigmal. Wo eine Stelle die Tintenfarbe braucht,
   setzt sie sie ausdrücklich. */
small {
  font-size: var(--text-sm); /* 12 */
  color: var(--text-muted);
}

.text-xs {
  font-size: var(--text-xs);
}
.text-sm {
  font-size: var(--text-sm);
}
.text-base {
  font-size: var(--text-base);
}
.text-md {
  font-size: var(--text-md);
}
.text-lg {
  font-size: var(--text-lg);
}
.text-xl {
  font-size: var(--text-xl);
}
.text-2xl {
  font-size: var(--text-2xl);
}
.text-3xl {
  font-size: var(--text-3xl);
}

.text-muted {
  color: var(--text-muted);
}
.text-subtle {
  color: var(--text-subtle);
}
.text-brand {
  color: var(--brand-600);
}
.text-success {
  color: var(--success-600);
}
.text-danger {
  color: var(--danger-600);
}
.text-warning {
  color: var(--warning-600);
}

.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

.brand-wordmark {
  font-family: var(--font-brand);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.eyebrow {
  font-size: var(--text-2xs); /* 10 */
  font-weight: 800;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lead {
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}