/* ============================================================
   Dark Mode
   Eigene Werte, kein simples Invert. Hintergrund leicht violett,
   JCI Blue heller für Kontrast, cinematic Tiefe.
   Aktiv über [data-theme="dark"] (Toggle) ODER prefers-color-scheme.
   ============================================================ */

[data-theme="dark"] {
  --bg:           #0A0817;
  --bg-elev:      #14102A;
  --bg-soft:      #1B1638;
  --bg-inverted:  #FBFBFD;

  --fg:           #F4F4F8;
  --fg-muted:     #B7B9C8;
  --fg-faint:     #838599;
  --fg-on-dark:   #F4F4F8;

  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.18);

  --accent:       #4FB9E8;
  --accent-soft:  rgba(79, 185, 232, 0.18);
  --accent-deep:  #6FC4EC;

  --focus-ring:   0 0 0 3px rgba(79, 185, 232, 0.55);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --shadow-lg: 0 30px 80px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.4);

  color-scheme: dark;
}

/* Fallback: Wenn kein Toggle gesetzt ist, System-Präferenz respektieren */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0A0817;
    --bg-elev:      #14102A;
    --bg-soft:      #1B1638;
    --bg-inverted:  #FBFBFD;

    --fg:           #F4F4F8;
    --fg-muted:     #B7B9C8;
    --fg-faint:     #838599;
    --fg-on-dark:   #F4F4F8;

    --line:         rgba(255, 255, 255, 0.08);
    --line-strong:  rgba(255, 255, 255, 0.18);

    --accent:       #4FB9E8;
    --accent-soft:  rgba(79, 185, 232, 0.18);
    --accent-deep:  #6FC4EC;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 10px 30px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
    --shadow-lg: 0 30px 80px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.4);

    color-scheme: dark;
  }
}