@charset "UTF-8";

/* ============================================================
   variables.css - Farb-/Theme-Variablen & Dark Mode
   Muss als ERSTES CSS geladen werden (vor allen anderen Dateien),
   da app.css, nav.css, base.css etc. var(--xxx) referenzieren.
   ============================================================ */

/* -- CSS-Variablen & Dark Mode ------------------------------- */
:root {
  --cream:        #f7f3ee;
  --warm-dark:    #1e1a16;
  --terracotta:   #c1622f;
  --sage:         #7a8c6e;
  --gold:         #c9a84c;
  --light-border: #e2dbd2;
  --bg:           #f7f3ee;
  --card-bg:      #ffffff;
  --text-main:    #1e1a16;
  --text-muted:   #6b6055;
  --text-subtle:  #9a8f85;
  --nav-bg:       #1e1a16;
  --nav-link:     #b0a899;
  --stats-bg:     #1e1a16;
  --transition:   background 0.3s, color 0.3s, border-color 0.3s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #16120e;
    --card-bg:      #1f1b17;
    --text-main:    #f0ebe4;
    --text-muted:   #a89f96;
    --text-subtle:  #6e6560;
    --light-border: #2e2925;
    --nav-bg:       #100e0b;
    --stats-bg:     #100e0b;
  }
}

[data-theme="dark"] {
  --bg:           #16120e;
  --card-bg:      #1f1b17;
  --text-main:    #f0ebe4;
  --text-muted:   #a89f96;
  --text-subtle:  #6e6560;
  --light-border: #2e2925;
  --nav-bg:       #100e0b;
  --stats-bg:     #100e0b;
}

[data-theme="light"] {
  --bg:           #f7f3ee;
  --card-bg:      #ffffff;
  --text-main:    #1e1a16;
  --text-muted:   #6b6055;
  --text-subtle:  #9a8f85;
  --light-border: #e2dbd2;
  --nav-bg:       #1e1a16;
  --stats-bg:     #1e1a16;
}