/* Gemeinsame Design-Tokens fuer Buehne, Handy und Regie (docs/UI_SYSTEM.md). Vorbild: Secret of Mana (blaue Fenster, helle Kante, Gold als Akzent).
   Alle Flaechen, Texte und Bewegungen beziehen Farben/Abstaende/Easing nur von hier. Aenderungen hier wirken ueberall. */
:root {
  /* Schrift: Titel = Pixelify Sans, Fliesstext/Zahlen = Jersey 10 (gut lesbar) */
  --font-display: 'Pixelify Sans', 'Jersey 10', monospace;
  --font-body: 'Jersey 10', 'Pixelify Sans', monospace;

  /* Farben */
  --c-win-top: #3d5fc4;
  --c-win-bottom: #1b2f86;
  --c-win-deep: #0e1a52;
  --c-edge: #f4efe0;
  --c-edge-dark: #0a1238;
  --c-text: #ffffff;
  --c-text-dim: #b9c6f0;
  --c-accent: #ffd866;      /* Gold: Titel, Hervorhebung */
  --c-zeus: #9ec8ff;
  --c-good: #7fe08a;
  --c-bad: #ff7a7a;
  --c-outline: #222034;

  /* Abstaende (Basis 4 px, skaliert auf der Buehne mit --u) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --radius: 8px;
  --border: 4px;

  /* Schriftgroessen (Buehne, bei 1920 Breite) */
  --fs-caption: 26px; --fs-body: 40px; --fs-title: 64px; --fs-hero: 120px;

  /* Bewegung: nur transform/opacity animieren */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 120ms; --dur: 220ms; --dur-slow: 420ms;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } }