/* OneGameOneLife – Design-Tokens „Glut und Asche" (Spec v2 §6.2).
   Farben und Typografie nur über diese Variablen verwenden. Nur dunkles Theme. */

@font-face {
  font-family: "Cinzel";
  src: url("/static/fonts/cinzel.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Farben (Spec, exakt) */
  --bg: #0e0c0b;
  --bg-raised: #171412;
  --bg-sunken: #0a0908;
  --line: #2a2420;
  --text: #ece6df;
  --text-muted: #a39a90;
  --ember: #e8762b;
  --ember-soft: #e8762b33;
  --gold: #d6b26a;
  --ok: #6fbf8a;
  --danger: #d9534f;
  --info: #6aa7d6;

  /* Abgeleitete Töne */
  --bg-hover: #1f1b18;
  --line-strong: #3d342d;
  --ember-bright: #f39350;
  --ember-ink: #0a0908;          /* Text auf Glut-Flächen (Kontrast 6.9:1) */
  --ember-faint: #e8762b14;
  --gold-soft: #d6b26a26;
  --ok-soft: #6fbf8a24;
  --danger-soft: #d9534f26;
  --info-soft: #6aa7d624;
  --scrim: #0a0908cc;
  --bg-glass: #0e0c0beb;

  /* Podest (Ranglisten Platz 1–3): Gold aus der Palette, Silber und Bronze abgeleitet */
  --silver: #c3c7cc;
  --silver-soft: #c3c7cc1f;
  --bronze: #c98a5a;
  --bronze-soft: #c98a5a24;

  /* Avatar-Töne (dunkel, Text --text bleibt ≥ 7:1) */
  --tone-1: #6b3a1f;
  --tone-2: #5a4a1e;
  --tone-3: #34452a;
  --tone-4: #2c4254;
  --tone-5: #4d2d45;
  --tone-6: #5c2828;

  /* Typografie */
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.5rem;
  --track-display: 0.06em;
  --track-wide: 0.12em;

  /* Abstände (4-px-Raster) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* Form */
  --radius-card: 10px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --tap: 44px;
  --content-width: 72rem;
  --prose-width: 42rem;

  /* Licht – Glow nur auf der primären Aktion, Schatten nur für Overlays/Dialoge */
  --glow: 0 0 24px var(--ember-soft);
  --shadow-overlay: 0 24px 64px #000000b3, 0 2px 8px #00000080;

  /* Bewegung */
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}