/* =====================================================================
   Gartenwunder Track – gemeinsame dunkle Farbpalette
   ---------------------------------------------------------------------
   Einzige Quelle der Wahrheit fuer alle Seiten. Die Seiten mappen ihre
   eigenen Variablennamen auf diese Tokens, damit eine Farbaenderung hier
   ueberall gleichzeitig wirkt.

   Grundlage: Tailwind slate-950 als Hintergrund, slate-Abstufungen fuer
   Flaechen und Raender, emerald als Markenfarbe (wie in index.html).
   ===================================================================== */

:root {
  /* Flaechen */
  --gw-bg: #020617;          /* Seitenhintergrund      (slate-950) */
  --gw-surface: #0f172a;     /* Karten                 (slate-900) */
  --gw-surface-2: #1e293b;   /* eingebettete Bloecke   (slate-800) */
  --gw-surface-3: #334155;   /* Hover / aktive Flaeche (slate-700) */

  /* Raender */
  --gw-border: #334155;      /* Standardrand           (slate-700) */
  --gw-border-soft: #1e293b; /* dezenter Trenner       (slate-800) */

  /* Text */
  --gw-text: #e2e8f0;        /* Fliesstext             (slate-200) */
  --gw-text-strong: #f8fafc; /* Ueberschriften         (slate-50)  */
  --gw-text-muted: #94a3b8;  /* Labels, Sekundaertext  (slate-400) */

  /* Marke */
  --gw-brand: #10b981;
  --gw-brand-dark: #059669;
  --gw-brand-light: #34d399;

  /* Statusfarben: gedeckte Flaeche + heller Text, damit der Kontrast
     auf dunklem Grund ausreicht (WCAG AA). */
  --gw-ok-bg: rgba(16, 185, 129, .12);
  --gw-ok-br: rgba(16, 185, 129, .45);
  --gw-ok-t: #34d399;

  --gw-warn-bg: rgba(245, 158, 11, .12);
  --gw-warn-br: rgba(245, 158, 11, .45);
  --gw-warn-t: #fbbf24;

  --gw-err-bg: rgba(239, 68, 68, .12);
  --gw-err-br: rgba(239, 68, 68, .45);
  --gw-err-t: #f87171;

  --gw-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
}

/* Formularelemente sollen auf allen Seiten gleich aussehen. Ohne
   color-scheme rendern Browser native Steuerelemente (Datepicker,
   Dropdownlisten, Scrollbalken) weiterhin hell. */
:root {
  color-scheme: dark;
}

::selection {
  background: var(--gw-brand);
  color: #fff;
}