/* ============================================================
   AI-Crafting Portal — Dunkles Design (theme.css)
   ------------------------------------------------------------
   Diese Datei definiert NUR Farb- und Gestaltungswerte als
   CSS-Variablen. Seiten, die diese Datei NICHT einbinden,
   behalten ihr bisheriges helles Aussehen — app.css nutzt die
   Variablen ausschließlich mit hellen Fallback-Werten.

   Einbinden (nach app.css):
     <link rel="stylesheet" href="/theme.css">

   Ein späterer Hell-Modus ist nur ein zweiter Satz Werte
   (z. B. unter  html[data-theme="light"] { ... } ).
   ============================================================ */

:root {
  /* Native Bedienelemente (Scrollbalken, Dropdowns …) dunkel rendern */
  color-scheme: dark;

  /* --- Flächen --- */
  --bg: #111827;            /* Seitenhintergrund */
  --surface: #1F2937;       /* Karten, Toolbar, Footer, Panels */
  --surface-2: #273449;     /* abgehobene Flächen, Hover-Zustände */
  --border: #374151;        /* Trennlinien, Kartenränder */

  /* --- Text --- */
  --text: #E5E7EB;          /* Fließtext */
  --heading: #F9FAFB;       /* Überschriften, Titel */
  --text-dim: #9CA3AF;      /* Nebentext, Beschreibungen */

  /* --- Kopfzeile --- */
  --header-bg: #0B1120;     /* flächig dunkel statt Blau-Verlauf */
  --header-border: #1E293B;
  --header-text: #F9FAFB;

  /* --- Aktionen (primäre Buttons, Links) --- */
  --primary: #3B82F6;
  --primary-hover: #2563EB;
  --primary-text: #FFFFFF;

  /* --- Eingabefelder --- */
  --input-bg: #111827;
  --input-border: #374151;
  --input-focus: #3B82F6;

  /* --- Statusfarben (Farbe trägt Bedeutung, nie Deko) --- */
  --success: #22C55E;
  --warning: #F59E0B;
  --danger:  #EF4444;
  --info:    #3B82F6;

  /* --- Sonstiges --- */
  --result-bg: #273449;                       /* Ergebnis-Boxen */
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);   /* Karten-Schatten */
}

/* --- Komponenten-Feinschliff (gilt nur auf dunklen Seiten) ---
   Im Dunkeln trennen Ränder die Flächen, wo im Hellen Schatten reichen. */

.app-header { border-bottom: 1px solid var(--header-border); }
.container  { border: 1px solid var(--border); }