/* ============================================================================
   HVNH COCKPIT — gemeinsames Farbsystem, 10.08.2026
   Vorbild: WCG Sales-Tool (/home/WCG/wcg-v2/apps/web/src/app/globals.css)

   WARUM DIESE DATEI EXISTIERT
   Gemessen am 10.08.2026: von 20 Seiten unter public/ luden nur VIER die
   style.css. Die anderen 16 brachten ihre eigene Palette in einem <style>-Block
   mit, die meisten davon fest verdrahtet dunkel. Im Light Mode blieben Planer,
   PR-Hub und Approvals deshalb schwarze Inseln in einer hellen Anwendung —
   nicht «zu wenig Kontrast», sondern gar kein gemeinsames System.

   REGEL AB HIER: Eine Farbe steht in dieser Datei, nirgends sonst. Ein neuer
   Hex-Wert in einer Seite ist ein Fehler, kein Sonderfall.

   LICHT IST DER NORMALFALL (:root). Dunkel kommt entweder von der
   Systemeinstellung oder von einem ausdruecklichen data-theme="dark" am <html>.
   Ein ausdrueckliches data-theme="light" schlaegt die Systemeinstellung —
   sonst koennte Niclas den Light Mode auf einem dunkel eingestellten Rechner
   gar nicht sehen.
   ========================================================================== */

:root {
  /* ── Flaechen ──────────────────────────────────────────────────────────── */
  --bg:            #f8f8f8;   /* Seitengrund */
  --surface:       #ffffff;   /* Karte, Panel, Dialog */
  --surface-2:     #f1f1f2;   /* abgesetzte Flaeche in einer Karte */
  --surface-hover: #ebebec;
  --surface-active:#e2e2e4;

  /* ── Linien ───────────────────────────────────────────────────────────── */
  --border:        #d5d6d7;
  --border-soft:   #e6e6e7;
  --border-strong: #b9babc;

  /* ── Schrift ──────────────────────────────────────────────────────────── */
  --fg:            #303334;   /* WCG --foreground-rgb 48,51,52 */
  --fg-soft:       #4a4d4f;
  /* Gegen die DUNKELSTE helle Flaeche gerechnet, nicht gegen --bg: 4,78:1 auf
     --surface-hover, 5,70:1 auf Weiss. Der Vorgaenger #6b6e70 war gegen --bg
     gerechnet (4,84) und fiel auf --surface-2/--surface-hover auf 4,55/4,31 —
     dieselbe Zeile war je nach Umgebung lesbar oder nicht. Genau daher kamen die
     21 schwachen Stellen auf index.html. Eine Schriftrolle, die nur auf einem
     bestimmten Grund haelt, ist keine Rolle. */
  --muted:         #646769;
  /* Deko und Grosstext (ab 24px, ab 18,66px fett). Fuer Kleintext ist --muted
     zustaendig — auf --surface-hover traegt dieser Ton nur 2,99:1. */
  --muted-soft:    #85888a;

  /* ── Primaerfarbe (WCG) ───────────────────────────────────────────────── */
  --primary:       #4263eb;   /* 4,71:1 auf Weiss — traegt weisse Schrift */
  --primary-hover: #3b5bdb;
  --primary-fg:    #ffffff;
  --primary-muted: rgba(66, 99, 235, .08);
  --primary-ring:  rgba(66, 99, 235, .35);

  /* ── Signalfarbe (WCG) ────────────────────────────────────────────────── */
  --accent:        #e6243d;
  --accent-hover:  #c91a32;
  --accent-muted:  rgba(230, 36, 61, .08);
  /* Flaeche, auf der weisse Schrift steht. #e6243d traegt sie nur mit 4,48:1
     und faellt damit unter die 4,5 fuer normalen Text — gemessen am Badge in
     approvals.html. Deko, Rahmen und grosse Ueberschriften bleiben --accent. */
  --accent-solid:  #c91a32;

  /* ── Bedeutungen ──────────────────────────────────────────────────────── */
  --success:        #15803d;
  --success-hover:  #166534;
  --success-bg:     #ecfdf5;
  --success-border: #a7f3d0;
  --warning:        #b45309;  /* dunkler als #ca8a04: Gelb auf Weiss traegt nicht */
  --warning-hover:  #92400e;
  --warning-bg:     #fffbeb;
  --warning-border: #fde68a;
  --danger:         #dc2626;
  --danger-hover:   #b91c1c;
  --danger-bg:      #fef2f2;
  --danger-border:  #fecaca;
  /* Verdunkelung hinter Dialogen. Bleibt in BEIDEN Modi dunkel — ein heller
     Schleier ueber hellem Grund trennt den Dialog nicht mehr vom Rest. */
  --overlay:        rgba(15, 23, 42, .55);
  /* Schrift auf --overlay, auf --stage-gradient oder auf einem Foto (Lightbox,
     Vollbild-Knopf). Alles davon ist unabhaengig vom Modus dunkel, also bleibt
     die Schrift weiss. */
  --on-overlay:     #ffffff;
  /* Buehne des mobilen Vollbild-Chats. Bewusst in beiden Modi dunkel: die
     Ansicht deckt den ganzen Bildschirm und hat keinen hellen Rahmen, an dem
     sie sich orientieren muesste. */
  --stage-gradient: radial-gradient(120% 80% at 50% 0%, #11233f 0%, #0a1424 55%, #060b14 100%);
  --info:           var(--primary);
  --info-bg:        var(--primary-muted);
  /* Schrift AUF der jeweiligen Vollfarbe. Hell und dunkel brauchen hier
     gegenlaeufige Werte: #15803d traegt weisse Schrift, das dunkelmodus-Gruen
     #4ade80 traegt sie nicht. Ohne eigenes Token wird genau das uebersehen. */
  --success-fg: #ffffff;
  --warning-fg: #ffffff;
  --danger-fg:  #ffffff;
  --accent-fg:  #ffffff;
  /* Durchscheinende Leiste (sticky Kopfzeilen mit backdrop-filter) */
  --surface-blur: rgba(255, 255, 255, .85);
  /* Gold ist im Cockpit ein eigenes Subsystem (Gedankengang, Werkzeugleiste).
     Gemessen auf hellem Grund: das alte #d4a300 traegt 2,32:1, der alte
     Textton #a67900 nur 3,92:1 — beides unter der Schwelle 4,5 fuer normalen
     Text. #8a6d00 schafft 4,92:1 auf Weiss und 4,63:1 auf --bg. */
  --gold:           #8a6d00;  /* Schrift, Punkte, Rahmen mit Bedeutung */
  --gold-bg:        #fdf6e3;  /* zarte Flaeche */
  --gold-bg-strong: #f7ecc9;  /* Marke/Zaehler auf goldenem Grund */
  --gold-border:    #d9c47a;

  /* ── Diagramme (WCG-Reihe) ────────────────────────────────────────────── */
  --chart-1: var(--primary);
  --chart-2: var(--accent);
  --chart-3: #7c3aed;
  --chart-4: #16a34a;
  --chart-5: #ea580c;
  --chart-6: #0891b2;
  --chart-7: #db2777;
  --chart-8: #ca8a04;

  /* ── Rollen aus der alten style.css ───────────────────────────────────────
     Bewusst als Verweise, nicht als Kopien: die vier Seiten, die style.css
     laden, benutzen diese Namen weiter, und ein zweiter Wert waere ein
     zweiter Ort, an dem die Farbe auseinanderlaufen kann. */
  --bg-soft:      var(--surface-2);
  --bg-sidebar:   var(--surface);
  --bg-hover:     var(--surface-hover);
  --bg-active:    var(--surface-active);
  --bg-input:     var(--surface);
  --bg-code:      var(--surface-2);
  --bg-assistant: var(--surface-2);
  --bg-user:      var(--surface);
  --green:  var(--success);
  --yellow: var(--warning);
  --red:    var(--danger);
  --violet: var(--chart-3);
  --accent-soft: var(--primary-muted);

  /* ── Form ─────────────────────────────────────────────────────────────── */
  --radius:    8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow:    0 4px 14px rgba(15, 23, 42, .07);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, .12);

  color-scheme: light;
}

/* ── Dunkel ─────────────────────────────────────────────────────────────────
   Die Werte sind bewusst die BISHERIGEN des Cockpits, nicht die des
   WCG-Tools: Niclas hat den Light Mode beanstandet. Eine Anwendung, die bei
   der Gelegenheit auch nachts anders aussieht, aendert etwas, um das niemand
   gebeten hat.

   Die Farben stehen GENAU EINMAL (als --d-* in :root). Die beiden Selektoren
   darunter verweisen nur. Beim ersten Entwurf standen sie zweimal wortgleich
   da — zwei Orte fuer dieselbe Farbe sind zwei Orte, an denen sie auseinander
   laufen kann, ohne dass irgendetwas kaputtgeht. */
:root {
  --d-bg:            #1c1c1f;
  --d-surface:       #202023;
  --d-surface-2:     #26262a;
  --d-surface-hover: #2a2a2e;
  --d-surface-active:#33333a;
  --d-border:        #2c2c30;
  --d-border-soft:   #232327;
  --d-border-strong: #3a3a40;
  --d-fg:            #ececf1;
  --d-fg-soft:       #c5c5cd;
  --d-muted:         #9b9ba4;
  --d-muted-soft:    #7a7a82;
  --d-primary:       #7f9cff;
  --d-primary-hover: #9db3ff;
  --d-primary-fg:    #10131f;
  --d-primary-muted: rgba(127, 156, 255, .14);
  --d-primary-ring:  rgba(127, 156, 255, .40);
  --d-accent:        #ff5268;
  --d-accent-hover:  #ff6b7e;
  --d-accent-muted:  rgba(255, 82, 104, .14);
  --d-accent-fg:     #2a0a0f;
  --d-accent-solid:  var(--d-accent);   /* im Dunkeln traegt das helle Rot dunkle Schrift */
  --d-success:        #4ade80;
  --d-success-hover:  #86efac;
  --d-success-bg:     rgba(74, 222, 128, .12);
  --d-success-border: rgba(74, 222, 128, .35);
  --d-success-fg:     #05230f;
  --d-warning:        #fbbf24;
  --d-warning-hover:  #fcd34d;
  --d-warning-bg:     rgba(251, 191, 36, .12);
  --d-warning-border: rgba(251, 191, 36, .35);
  --d-warning-fg:     #2a1d00;
  --d-danger:         #f87171;
  --d-danger-hover:   #fca5a5;
  --d-danger-bg:      rgba(248, 113, 113, .12);
  --d-danger-border:  rgba(248, 113, 113, .35);
  --d-danger-fg:      #2a0a0e;
  --d-gold:           #d4a300;
  --d-gold-bg:        rgba(212, 163, 0, .12);
  --d-gold-bg-strong: rgba(212, 163, 0, .20);
  --d-gold-border:    rgba(212, 163, 0, .40);
  --d-bg-code:        #161618;
  --d-bg-sidebar:     #19191b;
  --d-surface-blur:   rgba(28, 28, 31, .85);
  --d-chart-1: #bdd2ff;  --d-chart-2: var(--d-accent);  --d-chart-3: #a78bfa;  --d-chart-4: var(--d-success);
  --d-chart-5: #fb923c;  --d-chart-6: #22d3ee;  --d-chart-7: #f472b6;  --d-chart-8: var(--d-warning);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dunkel: 1; }
}
/* Ausdrueckliche Wahl schlaegt das System — in BEIDE Richtungen, sonst ist der
   Umschalter auf einem dunkel eingestellten Rechner wirkungslos. */
:root[data-theme="dark"] { --dunkel: 1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow:    0 4px 14px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, .55);
    --bg: var(--d-bg);
    --surface: var(--d-surface);
    --surface-2: var(--d-surface-2);
    --surface-hover: var(--d-surface-hover);
    --surface-active: var(--d-surface-active);
    --border: var(--d-border);
    --border-soft: var(--d-border-soft);
    --border-strong: var(--d-border-strong);
    --fg: var(--d-fg);
    --fg-soft: var(--d-fg-soft);
    --muted: var(--d-muted);
    --muted-soft: var(--d-muted-soft);
    --primary: var(--d-primary);
    --primary-hover: var(--d-primary-hover);
    --primary-fg: var(--d-primary-fg);
    --primary-muted: var(--d-primary-muted);
    --primary-ring: var(--d-primary-ring);
    --accent: var(--d-accent);
    --accent-hover: var(--d-accent-hover);
    --accent-muted: var(--d-accent-muted);
  --accent-solid: var(--d-accent-solid);
    --accent-fg: var(--d-accent-fg);
    --success: var(--d-success);
    --success-hover: var(--d-success-hover);
    --success-bg: var(--d-success-bg);
    --success-border: var(--d-success-border);
    --success-fg: var(--d-success-fg);
    --warning: var(--d-warning);
    --warning-hover: var(--d-warning-hover);
    --warning-bg: var(--d-warning-bg);
    --warning-border: var(--d-warning-border);
    --warning-fg: var(--d-warning-fg);
    --danger: var(--d-danger);
    --danger-hover: var(--d-danger-hover);
    --danger-bg: var(--d-danger-bg);
    --danger-border: var(--d-danger-border);
    --danger-fg: var(--d-danger-fg);
    --gold: var(--d-gold);
    --gold-bg: var(--d-gold-bg);
    --gold-bg-strong: var(--d-gold-bg-strong);
    --gold-border: var(--d-gold-border);
    --bg-code: var(--d-bg-code);
    --bg-sidebar: var(--d-bg-sidebar);
    --surface-blur: var(--d-surface-blur);
    --chart-1: var(--d-chart-1);
    --chart-2: var(--d-chart-2);
    --chart-3: var(--d-chart-3);
    --chart-4: var(--d-chart-4);
    --chart-5: var(--d-chart-5);
    --chart-6: var(--d-chart-6);
    --chart-7: var(--d-chart-7);
    --chart-8: var(--d-chart-8);
  }
}
:root[data-theme="dark"] {
  --bg: var(--d-bg);
  --surface: var(--d-surface);
  --surface-2: var(--d-surface-2);
  --surface-hover: var(--d-surface-hover);
  --surface-active: var(--d-surface-active);
  --border: var(--d-border);
  --border-soft: var(--d-border-soft);
  --border-strong: var(--d-border-strong);
  --fg: var(--d-fg);
  --fg-soft: var(--d-fg-soft);
  --muted: var(--d-muted);
  --muted-soft: var(--d-muted-soft);
  --primary: var(--d-primary);
  --primary-hover: var(--d-primary-hover);
  --primary-fg: var(--d-primary-fg);
  --primary-muted: var(--d-primary-muted);
  --primary-ring: var(--d-primary-ring);
  --accent: var(--d-accent);
  --accent-hover: var(--d-accent-hover);
  --accent-muted: var(--d-accent-muted);
  --accent-solid: var(--d-accent-solid);
  --accent-fg: var(--d-accent-fg);
  --success: var(--d-success);
  --success-hover: var(--d-success-hover);
  --success-bg: var(--d-success-bg);
  --success-border: var(--d-success-border);
  --success-fg: var(--d-success-fg);
  --warning: var(--d-warning);
  --warning-hover: var(--d-warning-hover);
  --warning-bg: var(--d-warning-bg);
  --warning-border: var(--d-warning-border);
  --warning-fg: var(--d-warning-fg);
  --danger: var(--d-danger);
  --danger-hover: var(--d-danger-hover);
  --danger-bg: var(--d-danger-bg);
  --danger-border: var(--d-danger-border);
  --danger-fg: var(--d-danger-fg);
  --gold: var(--d-gold);
  --gold-bg: var(--d-gold-bg);
  --gold-bg-strong: var(--d-gold-bg-strong);
  --gold-border: var(--d-gold-border);
  --bg-code: var(--d-bg-code);
  --bg-sidebar: var(--d-bg-sidebar);
  --surface-blur: var(--d-surface-blur);
  --chart-1: var(--d-chart-1);
  --chart-2: var(--d-chart-2);
  --chart-3: var(--d-chart-3);
  --chart-4: var(--d-chart-4);
  --chart-5: var(--d-chart-5);
  --chart-6: var(--d-chart-6);
  --chart-7: var(--d-chart-7);
  --chart-8: var(--d-chart-8);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow:    0 4px 14px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, .55);
}

/* ── Grundlage, die jede Seite bekommt ───────────────────────────────────── */
html, body { background: var(--bg); color: var(--fg); }
::selection { background: var(--primary-muted); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
