/* =============================================================================
 * ff-design/typography.css — Schriftfamilien, Skala, Mono-Hilfsklassen
 * -----------------------------------------------------------------------------
 * Geist Sans + Geist Mono (SIL OFL). Variable Fonts: eine .woff2 deckt den
 * Gewichtsbereich 100..900 ab, der Browser interpoliert. Geist Mono NUR fuer
 * Zahlen (Score, Timer) — HUD-Gefuehl, tabular-nums + slashed-zero.
 * ===========================================================================*/

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-sans-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ff-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* OpenType-Features fuer numerische Inhalte. */
  --ff-numeric-feature-settings: "tnum", "zero", "ss01";

  --font-sans: var(--ff-font-sans);
  --font-mono: var(--ff-font-mono);

  /* Schriftgrad-Skala (wenige Grade, klare Hierarchie). */
  --text-xs:         0.6875rem;  /* 11px */
  --text-sm:         0.8125rem;  /* 13px */
  --text-base:       0.9375rem;  /* 15px */
  --text-h2:         1.25rem;    /* 20px */
  --text-h1:         1.75rem;    /* 28px */
  --text-display:    2rem;       /* 32px */
}

html {
  font-family: var(--ff-font-sans);
}

/* Mono-Klassen mit aktivierten OpenType-Features fuer numerische Inhalte. */
.font-mono,
.font-numeric {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  -webkit-font-feature-settings: var(--ff-numeric-feature-settings);
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Typografie-Skalen-Klassen. Sentence Case ueberall — KEIN uppercase. */
.ff-h1 {
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ff-h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.ff-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.ff-display {
  font-size: var(--text-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
}

.ff-mono-display {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: var(--text-display);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.ff-mono-base {
  font-family: var(--ff-font-mono);
  font-feature-settings: var(--ff-numeric-feature-settings);
  font-size: var(--text-base);
  line-height: 1.4;
  font-weight: 500;
}