/* =============================================================
   THEME / DESIGN-TOKENS  ·  Gameanac
   -------------------------------------------------------------
   EINZIGE QUELLE fuer alle Farben des Projekts.
   Moechtest du das Aussehen aendern -> NUR hier anpassen,
   dann wirkt es ueberall.

   Diese Datei wird in includes/header.php VOR style.css geladen.
   style.css benutzt ausschliesslich diese Variablen: var(--name).

   Eine Farb-Variable nutzt man so:   color: var(--brand);
   ============================================================= */

:root {
  /* ---- Flaechen / Hintergruende ---- */
  --bg:       #0f1220;   /* Seiten-Hintergrund (fast schwarz-blau) */
  --panel:    #1a1f36;   /* Karten / Panels */
  --panel2:   #232a4d;   /* Eingabefelder (etwas heller als panel) */
  --glow:     #1b2450;   /* farbiger Schimmer oben links im Hintergrund */
  --topbar-bg: rgba(20, 25, 50, .6);  /* halbtransparente Kopfleiste */
  --cover: linear-gradient(135deg, #2a2350, #123047);  /* Platzhalter-Bild fuer Spiele */

  /* ---- Text ---- */
  --text:     #e8ebf5;   /* normaler Text (hell) */
  --muted:    #9aa3c7;   /* abgeschwaechter Text (Labels, Hinweise) */
  --on-brand: #ffffff;   /* Text auf farbigen Buttons */

  /* ---- Markenfarben (Akzente) ---- */
  --brand:    #7c5cff;   /* Violett  – Hauptakzent */
  --brand2:   #00d4ff;   /* Cyan     – zweiter Akzent / Links */
  --brand-gradient: linear-gradient(135deg, var(--brand), var(--brand2));

  /* ---- Linien & Schatten ---- */
  --border:   #2c335c;                    /* Rahmen / Trennlinien */
  --shadow:   0 10px 30px rgba(0, 0, 0, .25);  /* Karten-Schatten */

  /* ---- Statusfarben: Erfolg (gruen) ---- */
  --ok:       #2ecc71;                 /* Rahmen */
  --ok-bg:    rgba(46, 204, 113, .12); /* Hintergrund der Meldung */
  --ok-text:  #c9f7dd;                 /* Textfarbe der Meldung */

  /* ---- Statusfarben: Fehler (rot) ---- */
  --err:      #ff5c7c;                 /* Rahmen */
  --err-bg:   rgba(255, 92, 124, .12); /* Hintergrund der Meldung */
  --err-text: #ffd0da;                 /* Textfarbe der Meldung */

  /* ---- Statusfarben: Warnung (amber) ---- */
  --warn:     #ffb454;                 /* Hinweise / Abhaengigkeits-Warnungen */
  --star:     #ffd24a;                 /* "beste Umsetzung" (Stern auf der Landkarte) */
}

/* =============================================================
   LIGHT-THEME  ·  wird aktiv bei <html data-theme="light">
   (in includes/header.php aus den Einstellungen gesetzt).
   Nur die gleichen Tokens werden ueberschrieben - der Rest des
   CSS bleibt unveraendert, weil ueberall var(--name) genutzt wird.
   ============================================================= */
:root[data-theme="light"] {
  --bg:        #f4f6fb;
  --panel:     #ffffff;
  --panel2:    #eef1f8;
  --glow:      #e2e9ff;
  --topbar-bg: rgba(255, 255, 255, .72);
  --cover:     linear-gradient(135deg, #e2e6ff, #d8f0ff);

  --text:      #1a1f36;
  --muted:     #5b6488;
  --on-brand:  #ffffff;

  --brand:     #6a44ff;
  --brand2:    #0596b8;   /* dunkleres Cyan fuer lesbare Links auf Hell */
  --brand-gradient: linear-gradient(135deg, var(--brand), var(--brand2));

  --border:    #d7dcea;
  --shadow:    0 10px 30px rgba(20, 30, 70, .08);

  --ok:       #1f9d57; --ok-bg: rgba(31, 157, 87, .12);  --ok-text: #0e5c31;
  --err:      #d63a5c; --err-bg: rgba(214, 58, 92, .12); --err-text: #7a1730;
  --warn:     #b9760f;
  --star:     #d99a00;
}