/* ============================================================
   VARIABLEN — Design Tokens
   Basis für alle anderen CSS-Dateien. Nichts hier hart kodieren,
   überall nur var(--...) verwenden.
   ============================================================ */
:root {
  /* Flächen */
  --bg-page:        #0f1117;
  --bg-card:        #1a1d26;
  --bg-raised:      #222633;
  --bg-input:       #0f1117;

  /* Rahmen */
  --border:         #2e3445;
  --border-strong:  #3a4155;

  /* Text */
  --text-primary:   #fcfcfe;
  --text-secondary: #ced1dd;
  --text-muted:     #888ea3;

  /* Akzent / Rollen */
  --accent:         #e0b13f;
  --accent-text:    #1a1400;   /* Text AUF Gold-Flächen */
  --accent-hover:   #ecc463;
  --link-active:    #ffa500;  /* Orange, wie auf der Live-Seite bei :active */
  --box-shadow-color: rgba(0,0,0,0.65);
  --container-bg: rgba(10,13,19,0.7);

  --info:           #4a90e2;
  --info-hover:     #6ba3e8;

  --danger:         #d9534f;
  --danger-hover:   #e2726e;

  --steam-bg:       #171a21;
  --steam-border:   #2a475e;
  --steam-text:     #c7d5e0;
  --steam-hover:    #2a475e;

  /* Radius */
  --radius-sm:  3px;
  --radius:     3px;
  --radius-lg:  3px;

  /* Abstände */
  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap-md: 16px;
  --gap-lg: 24px;

  /* Schrift */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1:   20px;
  --fs-h2:   15px;
  --fs-body: 14px;
  --fs-meta: 12px;

  /* Übergänge */
  --transition: 0.15s ease;
}