/**
 * Immobestand — Wurzel-Stylesheet des Design-Systems.
 *
 * Bindet die Tokens ein und setzt die Grundlagen, die für jede Ansicht gelten.
 * Komponenten konsumieren ausschliesslich die semantischen Tokens aus `tokens/colors.css` —
 * nie einen rohen Farbwert.
 */

@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/layout.css";

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

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

body {
  margin: 0;
  /* Die Fläche wird ausdrücklich gesetzt: ohne eigenen Hintergrund übernimmt die Seite
     den Grund der Umgebung und zeigt im falschen Modus Text auf falschem Grund. */
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Beträge und Überschriften laufen in der Serif. */
h1, h2, h3,
.amount {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin: 0;
}

.amount {
  font-variant-numeric: tabular-nums;
}

/* Versal-Mikrolabels lesen sich als Datenrahmen, nicht als Prosa. */
.label {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

a {
  color: var(--text-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Tastaturfokus ist immer sichtbar — die App wird auch per Tastatur bedient. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Breite Inhalte scrollen in ihrem eigenen Behälter, nie der Seitenkörper. */
.scroll-x {
  overflow-x: auto;
}