/* ═══════════════════════════════════════════════════════
   base.css – Design-Tokens, Reset, Typografie
   ═══════════════════════════════════════════════════════
   Hier alle Farben, Abstände und Fonts zentral ändern.
   Alle anderen CSS-Dateien und JS nutzen diese Variablen.
   ═══════════════════════════════════════════════════════ */

:root {
  /* Hauptfarben */
  --bg:       #0f1117;   /* Seitenhintergrund */
  --surface:  #181c27;   /* Sidebar, Header */
  --surface2: #1f2436;   /* Inputs, Cards */
  --border:   #2a3050;   /* Trennlinien */

  /* Akzentfarbe – hier zentral ändern für neues Farbschema */
  --accent:   #c8973a;
  --accent2:  #e8b45a;

  /* Textfarben */
  --text:       #dce4f5;
  --text-muted: #7a88aa;

  /* Semantische Farben */
  --green: #3ec97b;
  --red:   #e05c5c;
  --blue:  #4a8fe8;

  /* Allgemein */
  --shadow: 0 8px 32px rgba(0,0,0,0.5);
  --radius: 10px;
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Fira Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Gemeinsame Hilfsklassen ────────────────────────── */
.spacer    { flex: 1; }
.h-sep     { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }
.divider   { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* ── Scrollbar-Stil ─────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════
   Landingpage-Erweiterungen
   Zusätzliche Tokens die nur die index.html braucht.
   Bauen auf den selben Akzentfarben auf (--accent etc.)
   ═══════════════════════════════════════════════════════ */
:root {
  /* Landingpage-spezifische Tiefen */
  --lp-dark:  #09080d;
  --lp-dark2: #110e18;
  --lp-dark3: #1a1526;
  --lp-dark4: #241e35;
  --lp-stone: #2e2840;

  /* Textfarben Landingpage */
  --lp-text:  #e8e0d0;
  --lp-muted: #8a7f9a;

  /* Gold-Abstufungen (Landingpage nutzt mehr Goldtöne) */
  --gold:  var(--accent);   /* = #c8973a */
  --gold2: var(--accent2);  /* = #e8b45a */
  --gold3: #f5d080;
}