:root {
  /* === Master-Tokens (Wertdefinition; Hex nur hier) === */
  --bg-base: #330000;
  --surface-dark: #1a0000;
  --border-soft: #5a1a1a;
  --accent-strong: #2a0808;
  --accent: #b03030;
  --accent-medium: #cc3838;
  --accent-border: #c04848;
  --accent-light: #ff9c9c;
  --accent-pale: #ffd0d0;
  --accent-bright: #ff6868;
  --fg: #f5f3f2;
  --fg-muted: #e8e4e3;
  --fg-dim: #9b8d74;
  --fg-strong: #ffffff;
  --badge-bg: #d63838;
  --badge-fg: #ffffff;
  --welcome-input-focus: #ff5555;

  /* === Composite Tokens === */
  --shadow-card: 0 0 12px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 0 8px rgba(0, 0, 0, 0.35);
  --shadow-badge: 0 0 4px rgba(0, 0, 0, 0.5);
  --backdrop-mix: color-mix(in srgb, var(--surface-dark) 85%, transparent);

  /* === Aliase (verweisen auf Master) === */
  --backdrop-color: var(--surface-dark);
  --surface-card: var(--surface-dark);
  --chat-bg: var(--bg-base);
  --chat-log-bg: var(--surface-dark);
  --chat-input-bg: var(--surface-dark);
  --welcome-card-bg: var(--surface-dark);
  --welcome-input-bg: var(--surface-dark);
  --welcome-input-border: var(--border-soft);
  --welcome-input-fg: var(--fg);
  --welcome-btn-bg: var(--accent);
  --welcome-btn-fg: var(--fg-strong);
  --welcome-btn-secondary-bg: var(--bg-base);
  --welcome-error-fg: var(--accent-pale);
  --player-border: var(--accent-border);
  --player-hint-bg: var(--surface-dark);
  --status-tab-active-bg: var(--border-soft);
  --status-table-header-bg: var(--border-soft);
  --accent-hover: var(--border-soft);
}

/* === Interaktions-States (Phase 1 UI-Feinschliff, 2026-09-14) ===
   Oberflaechenuebergreifende Regeln. Sie leben hier, weil theme.css die
   einzige Datei ist, die alle sechs Konsumenten einbinden. Sie nutzen
   ausschliesslich bestehende Tokens — kein neuer Farbwert, also auch kein
   Theme-Picker-Eintrag (vgl. docs/design.md § 10 Schritt 1). */

/* Tastatur-Fokus: sichtbarer Ring auf allen sechs Oberflaechen. Muster aus
   OVERVIEW_HTML, das ihn als einzige Oberflaeche schon korrekt hatte.
   :focus-visible statt :focus — der Maus-Klick bleibt ringfrei wie bisher. */
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* Bewegung auf Wunsch abschalten. watch.html hat zwei Animationen
   (LIVE-Badge-Pulse) und vier Transitions; bis heute gab es keinen Opt-out. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}