// ────────────────────────────────────────────────────────────────
// Foundation · Typografie
//
// Generische Grundtypen. Widgets/Hero duerfen groesser ueberschreiben.
// ────────────────────────────────────────────────────────────────

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-normal);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-sm); }

p {
  line-height: var(--lh-base);
}

small {
  font-size: var(--fs-sm);
}

strong,
b {
  font-weight: var(--fw-semibold);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  color: color-mix(in srgb, var(--accent) 78%, var(--fg));
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: .92em;
}

code {
  padding: 1px 5px;
  color: var(--fg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--dim) 10%, transparent);
}

pre {
  overflow-x: auto;
  padding: var(--sp-4);
  color: var(--fg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, #000 32%, transparent);
}

pre code {
  padding: 0;
  border: 0;
  background: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

// ── Helfer ──────────────────────────────────────────────────────
.mono {
  font-family: var(--font-mono);
}

// Gesperrte Versalien-Schrift mit optischer Zentrierung.
.sub {
  color: var(--dim);
  font-size: clamp(13px, 2vw, 17px);
  letter-spacing: var(--tracking-widest);
  text-indent: var(--tracking-widest);
  text-transform: uppercase;
}

// ── Grosse Groessen als Klassen ─────────────────────────────────
// Die Display-Groessen aus den Tokens, ohne Inline-Stil benutzbar. Die Marke
// (`.masthead__title`) traegt ihre Groesse weiterhin selbst.
@each $name in (sm, md, lg) {
  .display-#{$name} {
    font-family: var(--font-display);
    font-size: var(--display-#{$name});
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
  }
}

// Ein Vorlauf-Absatz: groesser und ruhiger als der Fliesstext.
.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--dim);
}