/*
 * Barlow Condensed Bold wird in Schritt 2/3 mit der eigentlichen Logo-Arbeit
 * eingebunden. Bis dahin fällt --font-special auf Helvetica zurück, das
 * funktioniert visuell als Platzhalter.
 */

html {
  font-size: calc(0.333vw + 1em);
  font-family: var(--font-plain);
  line-height: var(--ratio);
  color: var(--color-dark);
  background-color: var(--color-light);
}

body {
  font-size: var(--s0);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-special);
  font-weight: 700;
  line-height: var(--line-height-small);
  letter-spacing: 0;
}

h1 {
  font-size: var(--s4);
}

h2 {
  font-size: var(--s3);
}

h3 {
  font-size: var(--s2);
}

h4 {
  font-size: var(--s1);
}

p {
  max-inline-size: var(--measure);
}

/* Bug 58: Fließtext-Größe global angehoben. .text-small ist
   visuell gleich body (--s0); semantisch markiert sie weiterhin
   sekundären Text (Hints, Intros) und bekommt die dezentere
   --color-darkish-Farbe. Newsletter-Body und Onboarding/Settings/
   Footer/Hero sehen jetzt einheitlich aus. */
small,
.text-small {
  font-size: var(--s0);
  color: var(--color-darkish);
}

.text-tiny {
  font-size: var(--s-1);
  color: var(--color-mid);
}

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

blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--s1);
  border-inline-start: var(--border-thin) solid var(--color-dark);
  padding-inline-start: var(--s1);
  color: var(--color-darkish);
}

blockquote cite,
blockquote footer {
  display: block;
  font-style: normal;
  font-size: var(--s-1);
  font-family: var(--font-plain);
  color: var(--color-mid);
  margin-block-start: var(--s-1);
}

a {
  color: var(--color-dark);
}

::selection {
  background-color: var(--color-dark);
  color: var(--color-light);
}