/* ============================================================
   Franz — Design-Tokens (Marke: KI-Lotse, Teal)
   Kanonische Quelle: C:\Claude\Franz\_design\tokens.css
   Nur Variablen — keine Klassen. Apps mit eigenem CSS binden NUR diese
   Datei ein; theme.css (Tokens + Komponenten) ist fuer neue Apps gedacht.
   ============================================================ */

:root {
  color-scheme: light;

  /* Flächen & Text */
  --bg:            #f6f7f9;   /* Seitenhintergrund */
  --flaeche:       #ffffff;   /* Karten, Topbar, Eingaben */
  --flaeche-2:     #f0f2f4;   /* dezente Fläche (Tabellenkopf, Hover) */
  --text:          #1f2430;
  --gedaempft:     #5b6472;
  --rand:          #dfe3e8;

  /* Marke (Logo-Teal) */
  --akzent:        #0f6e56;   /* interaktiv: Links, Buttons, aktiv (AA auf weiß) */
  --akzent-hell:   #1d9e75;   /* helles Teal: Icons, Ränder, Akzentlinien */
  --akzent-bg:     #e7f6f0;   /* Teal-Tönung für Hover/Chips */
  --akzent-kontrast:#ffffff;  /* Textfarbe auf gefüllten Akzentflächen */

  /* Status */
  --erfolg:        #0f6e56;  --erfolg-bg:  #e7f6f0;
  --warnung:       #b45309;  --warnung-bg: #fef3e2;
  --fehler:        #b42318;  --fehler-bg:  #fdeceb;

  --code-bg:       #eef0f3;
  --radius:        14px;
  --schatten:      0 2px 10px rgba(15,110,86,.08);
  --schatten-stark:0 6px 20px rgba(15,110,86,.14);
}

/* Explizit dunkel gewählt */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #14161a;
  --flaeche:       #1e2128;
  --flaeche-2:     #262a32;
  --text:          #e6e8ec;
  --gedaempft:     #9aa3b2;
  --rand:          #2c313a;

  --akzent:        #45c398;
  --akzent-hell:   #6fd6b3;
  --akzent-bg:     #123528;
  --akzent-kontrast:#08221a;

  --erfolg:        #45c398;  --erfolg-bg:  #123528;
  --warnung:       #e08a3c;  --warnung-bg: #3a2a10;
  --fehler:        #e0574a;  --fehler-bg:  #3a1512;

  --code-bg:       #262a32;
  --schatten:      0 2px 10px rgba(0,0,0,.35);
  --schatten-stark:0 6px 20px rgba(0,0,0,.5);
}

/* System-Dunkel, wenn nichts explizit gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:            #14161a;
    --flaeche:       #1e2128;
    --flaeche-2:     #262a32;
    --text:          #e6e8ec;
    --gedaempft:     #9aa3b2;
    --rand:          #2c313a;
    --akzent:        #45c398;
    --akzent-hell:   #6fd6b3;
    --akzent-bg:     #123528;
    --akzent-kontrast:#08221a;
    --erfolg:        #45c398;  --erfolg-bg:  #123528;
    --warnung:       #e08a3c;  --warnung-bg: #3a2a10;
    --fehler:        #e0574a;  --fehler-bg:  #3a1512;
    --code-bg:       #262a32;
    --schatten:      0 2px 10px rgba(0,0,0,.35);
    --schatten-stark:0 6px 20px rgba(0,0,0,.5);
  }
}