/* ============================================================
   elftipp — Design-Tokens (SSOT für Look & Feel)
   ------------------------------------------------------------
   CLAUDE.md §4a: "Eine Stelle ändern ⇒ ganze App reskinnt."
   Diese Datei ist die EINZIGE Stelle, an der Farben, Typo,
   Spacing, Radius und Bewegung definiert werden.

   Werte 1:1 aus DESIGN.md §2/§3/§3a (beschlossen 2026-07-10):
   Flutlicht-Gold auf epischem Schwarz. Das alte Dunkelblau
   (#0B1422) ist ersatzlos entfallen (DESIGN.md §1).

   REGELN
   - Komponenten/Seiten lesen ausschließlich diese Variablen.
     Nie Hex-Werte direkt in HTML/JS/Komponenten schreiben.
   - Farb-Semantik (verbindlich, DESIGN.md §2):
       GOLD = Marke — nur Momente, die es verdienen:
              Rang 1, primäre CTAs, Punktgewinn, Siegerehrung.
              Max. 1 Gold-Button pro View. Funke, keine Fläche.
       ROT  = LIVE (pulsierend) + Fehler/Absteiger (Kontext trennt)
       GRÜN = richtig getippt / Aufsteiger / Erfolg
       ORANGE = Warnungen (damit Gold eindeutig Marke bleibt)
   - Signaturelement: 2px-Goldkante links an der führenden
     Tabellenzeile — überall (Tabelle, Karten, Badges, Marketing).
   - Dark-only als Produkt-Identität. Kein Light-Mode.
   ============================================================ */

/* ── Schriften: selbst gehostet (DSGVO, kein Google-CDN) ──
   Variable Fonts: Archivo (Display/Headlines/Spielstände),
   Inter (Fließtext/UI/Tabellen). DESIGN.md §3. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Grundflächen (neutral, KEIN Blaustich) ---------- */
  --bg-0: #0A0A0B;              /* Seite/Hintergrund */
  --bg-1: #131315;              /* Karten, Tabellen-Container */
  --bg-2: #1C1C1F;              /* Erhöht: Modals, Dropdowns, Sticky-Nav */
  --line: rgba(255,255,255,.08);        /* Hairlines, Tabellen-Trenner */
  --line-strong: rgba(255,255,255,.16); /* Betonte Trenner, Input-Rahmen */

  /* ---------- Text ---------- */
  --text-1: #F2F2F0;            /* Primär (warmes Weiß, kein reines #FFF) */
  --text-2: #C9C9C4;            /* Sekundär */
  --text-3: #8A8A85;            /* Gedämpft: Metadaten, Platzhalter */

  /* ---------- Marke: Flutlicht-Gold ---------- */
  --gold: #F5B841;              /* Rang 1, primäre CTAs, Punkt-Highlights */
  --gold-strong: #EFA827;       /* Hover/Aktiv-Zustand */
  --gold-ink: #241800;          /* Text AUF Gold-Flächen (nie Schwarz/Weiß) */
  --gold-tint: rgba(245,184,65,.14); /* Flächen-Tint: Rang-1-Zeile, Sieger-Karte */

  /* ---------- Funktionsfarben (konkurrieren nie mit der Marke) ---------- */
  --live: #E8483F;              /* LIVE-Badge (pulsierend), Fehler */
  --up: #2FBF71;                /* Richtig getippt, Aufsteiger, Erfolg */
  --down: #E8483F;              /* Falsch, Absteiger (teilt Rot mit Live) */
  --warn: #FF7A45;              /* Warnungen */

  /* ---------- Typografie (DESIGN.md §3) ---------- */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(40px, 8vw, 72px); /* Hero · Archivo 700 · lh 1.05 · ls -.02em */
  --fs-score-lg: clamp(48px, 9vw, 80px);/* Spielstand groß · tabular-nums · lh 1 */
  --fs-h1: 32px;                /* Archivo 700 · ls -.01em */
  --fs-h2: 24px;                /* Archivo 700 */
  --fs-h3: 18px;                /* Archivo 500 */
  --fs-body: 16px;              /* Inter 400 · lh 1.6 */
  --fs-small: 14.5px;           /* Inter 400/500 · Tabellen 500 + tabular-nums */
  --fs-table-pts: 16px;         /* Punkte in Tabelle · Archivo 700 · tabular-nums */
  --fs-caption: 12.5px;         /* Inter 400 · --text-3 */
  --fs-btn: 15px;               /* Inter 500 · keine Versalien */

  /* ---------- Raster: 8pt (DESIGN.md §3a) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---------- Radius ---------- */
  --r-ctl: 8px;                 /* Controls */
  --r-card: 12px;               /* Karten */
  --r-modal: 16px;              /* Modals */
  --r-pill: 999px;              /* Pills/Badges */

  /* ---------- Bewegung: sparsam, nur bedeutungsvoll ---------- */
  --dur-fast: .18s;
  --dur-med: .32s;
  --dur-rank: .55s;             /* Tabellen-Rangwechsel = Kernprodukt-Erlebnis */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- Signatur & Ergonomie ---------- */
  --edge-gold: 2px solid var(--gold); /* Goldkante links, Rang 1 */
  --touch-min: 44px;            /* Bar-Kontext: stehend, halbes Bier in der Hand */
}

/* Barrierefreiheit: Bewegung respektieren (DESIGN.md §3a) */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur-med: 0s; --dur-rank: 0s; }
}