/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — components/base.css
   Version: 0.1.0 · Build: 2026-09-13 · Benötigt: tokens.css
   VENDORED — READ-ONLY. Projektspezifisches gehört in project.css.

   Reset, Grundtypografie, globaler Fokus. Muss als erste Komponentendatei
   geladen werden; alle übrigen setzen darauf auf.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bh-surface-2);
  color: var(--bh-text-secondary);
  font-family: var(--bh-font-sans);
  font-size: var(--bh-text-sm);
  line-height: var(--bh-leading-normal);
  font-weight: var(--bh-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }

/* ── Überschriften ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--bh-text-primary);
  font-weight: var(--bh-weight-semibold);
  line-height: var(--bh-leading-tight);
}
h1 { font-size: var(--bh-text-2xl); letter-spacing: var(--bh-tracking-tight); }
h2 { font-size: var(--bh-text-xl);  letter-spacing: var(--bh-tracking-tight); }
h3 { font-size: var(--bh-text-lg); }
h4, h5, h6 { font-size: var(--bh-text-md); line-height: var(--bh-leading-normal); }

p { margin: 0 0 var(--bh-space-3); }
p:last-child { margin-bottom: 0; }

/* Links erben die Textfarbe. Akzent und Unterstreichung gibt es nur dort, wo
   ein Link im Fließtext sonst unauffindbar wäre — siehe .bh-prose. */
a { color: inherit; text-decoration: none; transition: color var(--bh-transition); }

hr { border: 0; border-top: 1px solid var(--bh-border-subtle); margin: var(--bh-space-5) 0; }

code, kbd, samp, pre { font-family: var(--bh-font-mono); font-size: var(--bh-text-xs); }

/* ── Fokus ───────────────────────────────────────────────────────────────
   Global gesetzt und nirgends entfernt. Komponenten, die einen Ring statt
   einer Outline brauchen, überschreiben gezielt mit --bh-focus-ring.        */
:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
  border-radius: var(--bh-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ── Fließtext mit sichtbaren Links ──────────────────────────────────────── */
.bh-prose a {
  color: var(--bh-color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bh-prose a:hover { color: var(--bh-color-accent-bright); }
.bh-prose > :last-child { margin-bottom: 0; }

/* ── Texthilfen ──────────────────────────────────────────────────────────── */
.bh-muted    { color: var(--bh-text-tertiary); }
.bh-dim      { color: var(--bh-text-muted); }
.bh-strong   { color: var(--bh-text-primary); font-weight: var(--bh-weight-semibold); }
.bh-success  { color: var(--bh-color-success); }
.bh-warning  { color: var(--bh-color-warning); }
.bh-danger   { color: var(--bh-color-danger); }

.bh-mono     { font-family: var(--bh-font-mono); }
.bh-num      { font-family: var(--bh-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
/* Eine Stufe kleiner als der Fließtext. Die Klasse heißt wie das Token, das
   sie setzt — im Bestand hieß sie .text-sm und setzte --bh-text-xs, und
   .text-lg setzte --bh-text-md: Name und Wert lagen je eine Stufe
   auseinander. Wer das liest, greift zur falschen (DESIGN.md §0b). */
.bh-text-xs  { font-size: var(--bh-text-xs); }

.bh-nowrap   { white-space: nowrap; }
.bh-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.bh-caps {
  font-size: var(--bh-text-xs);
  font-weight: var(--bh-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--bh-tracking-caps);
  color: var(--bh-text-muted);
}

.bh-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Mobil ───────────────────────────────────────────────────────────────
   Überschriften rücken eine Stufe herunter, damit sie in der Skala bleiben. */
@media (max-width: 767px) {
  h1 { font-size: var(--bh-text-xl); }
  h2 { font-size: var(--bh-text-lg); }
}