/**
 * Basistypografie: liest nur semantische und Theme-Tokens.
 * In :where(), damit Komponenten ohne Spezifitätskampf überschreiben.
 */
@layer base {
  :where(html) {
    color-scheme: light dark;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  :where(body) {
    background-color: var(--theme-page-bg);
    color: var(--theme-page-text);
    font-family: var(--brand-font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :where(h1, h2, h3, h4) {
    font-family: var(--brand-font-title);
    letter-spacing: var(--brand-title-letter-spacing);
    text-transform: var(--brand-title-transform);
    color: var(--theme-heading-color);
    font-weight: var(--font-weight-semibold);
    text-wrap: balance;
  }

  :where(h4) {
    letter-spacing: var(--letter-spacing-normal);
  }

  :where(h1) { font-size: var(--font-size-h1); line-height: var(--line-height-h1); }
  :where(h2) { font-size: var(--font-size-h2); line-height: var(--line-height-h2); }
  :where(h3) { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
  :where(h4) { font-size: var(--font-size-h4); line-height: var(--line-height-h4); }

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

  :where(small) {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }

  :where(a) {
    color: var(--theme-link-color);
    text-decoration-color: var(--theme-link-underline);
    text-underline-offset: 0.2em;
    transition: color var(--motion-duration-ui) var(--motion-ease);
  }

  @media (hover: hover) and (pointer: fine) {
    :where(a:hover) {
      color: var(--theme-link-color-hover);
      text-decoration-color: currentcolor;
    }
  }
}