/* Towerful – Brücke von den bisherigen Variablennamen auf die Tokens aus towerful.css (Design-System
   „F"). Neue Bausteine verwenden direkt die Tokens (--surface, --raised, --ink, --muted, --accent …);
   ältere Stellen laufen über diese Namen und folgen damit automatisch Hell und Dunkel. Keine eigenen
   Farbwerte hier – nur Verweise. */

/* Schriften: Dateien wie im Paket, selbst gehostet (keine fremden Server). font-display „block"
   statt „swap", damit beim Start nichts umspringt (frühere Rückmeldung: sichtbarer Schriftwechsel). */
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: block; src: url('fonts/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: block; src: url('fonts/manrope-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: block; src: url('fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 800; font-display: block; src: url('fonts/manrope-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: block; src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

.tw {
  --font-sans: var(--sans);
  --font-mono: var(--mono);
  --ink-2: var(--muted);
  --ink-3: var(--muted);
  --ink-strong: var(--ink);
  --on-ink: var(--surface);
  --surface-2: var(--track);
  --muted-fill: var(--track);
  --fill-2: var(--surface);
  --fill-3: var(--surface);
  --line-2: var(--line);
  --line-3: var(--line);
  --line-4: var(--line-strong);
  --chrome-line: var(--line);
  --step-open: var(--track);
  --wave-off: var(--track);
  --transmit: var(--accent);
  --ok: var(--correct);
  --content: var(--incorrect);
  --content-text: var(--incorrect);
  --pron: var(--incorrect);
  --pron-text: var(--incorrect);
  --stift: var(--correct);
  /* Dunkle Flächen (Weitermachen-Karte, Kacheln) = Navy, in beiden Modi */
  --dunkel: var(--navy);
  --auf-dunkel: #f2f5f8;
  --auf-dunkel-2: var(--fog);
  --dunkel-chip: #22344b;
  --dunkel-chip-text: var(--fog);
  --dunkel-offen: #22344b;
  --rahmen-grund: var(--surface);
  /* Formen */
  --r-tile: var(--r-sm);
  --r-btn-s: var(--r-pill);
  --r-btn: var(--r-pill);
  --r-card: var(--r-lg);
  --r-ptt: var(--r-xl);
  --ptt-h: 112px;
  --hit: 44px;
  --t-fast: 150ms ease-out;
  --t-result: 240ms ease-out;
  color-scheme: light;
}
[data-theme=dark] .tw, .tw[data-theme=dark] { color-scheme: dark; }