/* Leitwarte — Design-Tokens.
 *
 * Werte am Vorbild (relationflow.io) gemessen: ein shadcn/ui-Satz, hell und
 * dunkel. Drei Ebenen, in dieser Reihenfolge:
 *   1. --lw-*        die eigentlichen Tokens; nur die benutzt neuer Code
 *   2. Dunkelmodus   [data-theme] schlaegt die Systemvorgabe, damit der
 *                    Umschalter in der Sidebar in BEIDE Richtungen wirkt
 *   3. Altnamen      --bg, --text, --accent … zeigen auf die Tokens, damit die
 *                    vorhandenen Stile die neue Farbwelt uebernehmen, ohne dass
 *                    jede Regel angefasst werden muss
 */

:root {
  /* Flaechen */
  --lw-flaeche: #ffffff;
  --lw-flaeche-2: #f5f5f5;
  --lw-karte: #ffffff;
  --lw-popover: #ffffff;

  /* Sidebar hat im Vorbild eine eigene, waermere Flaeche */
  --lw-sidebar: #f7f4ee;
  --lw-sidebar-text: #0a0a0a;
  --lw-sidebar-aktiv: #ecf0f8;
  --lw-sidebar-aktiv-text: #262e3d;
  --lw-sidebar-rahmen: #e5e5e5;

  /* Text */
  --lw-text: #0a0a0a;
  --lw-text-leise: #696969;

  /* Akzent und Zustaende */
  --lw-primaer: #2563eb;
  --lw-primaer-hover: #1d4fd8;
  --lw-primaer-text: #ffffff;
  --lw-primaer-zart: #ecf0f8;
  /* Link im Fliesstext. Eigenes Token, weil --lw-primaer im Dunkelmodus
     unveraendert bleibt (es traegt dort gefuellte Knoepfe mit weisser Schrift)
     — als Textfarbe auf dunklem Grund kaeme es nur auf Kontrast 3:1. */
  --lw-link: #2563eb;
  --lw-link-hover: #1d4fd8;
  --lw-erfolg: #16a34a;
  --lw-warnung: #d97706;
  --lw-fehler: #dc2626;

  /* Linien */
  --lw-rahmen: #e5e5e5;
  --lw-ring: #2563eb;

  /* Maße */
  --lw-radius: 0.625rem;
  --lw-radius-klein: 0.375rem;
  --lw-radius-gross: 1rem;
  --lw-radius-rund: 999px;

  /* Schatten — im Vorbild auffallend flach */
  --lw-schatten-1: 0 1px 2px 0 rgba(43, 36, 25, 0.06);
  --lw-schatten-2: 0 2px 6px rgba(43, 36, 25, 0.06), 0 4px 12px rgba(43, 36, 25, 0.07);
  --lw-schatten-3: 0 4px 10px rgba(43, 36, 25, 0.06), 0 12px 26px rgba(43, 36, 25, 0.10);
  --lw-schatten-4: 0 8px 18px rgba(43, 36, 25, 0.07), 0 22px 50px rgba(43, 36, 25, 0.14);

  /* Diagramme — im Vorbild ebenfalls Variablen. Der Kennzahlen-Bereich hatte
     bis Schritt 9 seine eigene, gruene Palette fest im JavaScript stehen; auf
     hellem Grund war die dann unlesbar. */
  --lw-diagramm-1: #2563eb;
  --lw-diagramm-2: #16a34a;
  --lw-diagramm-3: #d97706;
  --lw-diagramm-4: #7c3aed;
  --lw-diagramm-5: #0891b2;
  --lw-diagramm-gitter: #e5e5e5;
  /* Die Kontostand-Linie im Umsatz-Diagramm braucht eine eigene Farbe AUSSERHALB
     der Jahres-Palette: sonst faellt sie mit der dritten Jahresreihe (Orange,
     diagramm-3) zusammen, sobald drei Jahre nebeneinander stehen. */
  --lw-diagramm-linie: #e11d48;

  /* Schrift */
  --lw-schrift: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

/* Dunkel: erst die Systemvorgabe … */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --lw-flaeche: #0e1424;
    --lw-flaeche-2: #151c2e;
    --lw-karte: #151c2e;
    --lw-popover: #1c2438;
    --lw-sidebar: #0b111e;
    --lw-sidebar-text: #edf1f7;
    --lw-sidebar-aktiv: #1c2438;
    --lw-sidebar-aktiv-text: #eff4fc;
    --lw-sidebar-rahmen: #232c3f;
    --lw-text: #edf1f7;
    --lw-text-leise: #8a93a3;
    --lw-primaer-zart: #1c2438;
  --lw-link: #60a5fa;
  --lw-link-hover: #93c5fd;
    --lw-erfolg: #4ade80;
    --lw-warnung: #fbbf24;
    --lw-fehler: #f87171;
    --lw-rahmen: #232c3f;
    --lw-schatten-1: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --lw-schatten-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
    --lw-schatten-3: 0 4px 10px rgba(0, 0, 0, 0.45), 0 12px 26px rgba(0, 0, 0, 0.4);
    --lw-schatten-4: 0 8px 18px rgba(0, 0, 0, 0.5), 0 22px 50px rgba(0, 0, 0, 0.45);
    --lw-diagramm-1: #60a5fa;
    --lw-diagramm-2: #4ade80;
    --lw-diagramm-3: #fbbf24;
    --lw-diagramm-4: #a78bfa;
    --lw-diagramm-5: #22d3ee;
    --lw-diagramm-gitter: #232c3f;
    --lw-diagramm-linie: #fb7185;
  }
}

/* … und dann der Umschalter, der sie in beide Richtungen schlaegt. */
:root[data-theme="dunkel"] {
  --lw-flaeche: #0e1424;
  --lw-flaeche-2: #151c2e;
  --lw-karte: #151c2e;
  --lw-popover: #1c2438;
  --lw-sidebar: #0b111e;
  --lw-sidebar-text: #edf1f7;
  --lw-sidebar-aktiv: #1c2438;
  --lw-sidebar-aktiv-text: #eff4fc;
  --lw-sidebar-rahmen: #232c3f;
  --lw-text: #edf1f7;
  --lw-text-leise: #8a93a3;
  --lw-primaer-zart: #1c2438;
  --lw-link: #60a5fa;
  --lw-link-hover: #93c5fd;
  --lw-erfolg: #4ade80;
  --lw-warnung: #fbbf24;
  --lw-fehler: #f87171;
  --lw-rahmen: #232c3f;
  --lw-schatten-1: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --lw-schatten-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
  --lw-schatten-3: 0 4px 10px rgba(0, 0, 0, 0.45), 0 12px 26px rgba(0, 0, 0, 0.4);
  --lw-schatten-4: 0 8px 18px rgba(0, 0, 0, 0.5), 0 22px 50px rgba(0, 0, 0, 0.45);
  --lw-diagramm-1: #60a5fa;
  --lw-diagramm-2: #4ade80;
  --lw-diagramm-3: #fbbf24;
  --lw-diagramm-4: #a78bfa;
  --lw-diagramm-5: #22d3ee;
  --lw-diagramm-gitter: #232c3f;
  --lw-diagramm-linie: #fb7185;
}

/* Bruecke fuer den vorhandenen Code. Diese Namen stehen in styles.css an
 * hunderten Stellen; sie bleiben gueltig und ziehen die neue Farbwelt nach. */
:root {
  --bg: var(--lw-flaeche);
  --bg-card: var(--lw-karte);
  --bg-sidebar: var(--lw-sidebar);
  --text: var(--lw-text);
  --text-muted: var(--lw-text-leise);
  --text-sidebar: var(--lw-sidebar-text);
  --accent: var(--lw-primaer);
  --accent-hover: var(--lw-primaer-hover);
  --danger: var(--lw-fehler);
  --border: var(--lw-rahmen);
  --radius: var(--lw-radius);
  --shadow: var(--lw-schatten-2);

  /* Autorenfarben fuer die Initialenkreise im Gruppenchat.
   *
   * Bewusst als ALIAS auf die Diagrammfarben und nur EINMAL, im :root: var()
   * loest zur Nutzungszeit auf, also zieht Dunkel automatisch nach. Achtzehn
   * kopierte Hex-Werte in drei Bloecken waeren dieselben Farben, nur mit drei
   * Stellen zum Auseinanderlaufen. Drei Toene fehlen der Diagrammpalette und
   * stehen deshalb unten eigens. */
  --lw-autor-1: var(--lw-diagramm-1);
  --lw-autor-2: var(--lw-diagramm-2);
  --lw-autor-3: var(--lw-diagramm-3);
  --lw-autor-4: var(--lw-diagramm-4);
  --lw-autor-5: var(--lw-diagramm-5);
  --lw-autor-6: var(--lw-diagramm-linie);
  --lw-autor-7: #0d9488;
  --lw-autor-8: #c026d3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --lw-autor-7: #2dd4bf;
    --lw-autor-8: #e879f9;
  }
}

:root[data-theme="dunkel"] {
  --lw-autor-7: #2dd4bf;
  --lw-autor-8: #e879f9;
}