/* ==========================================================================
   Lightwork — Stilvorlage über LibreChat (Design v2, 15.09.2026)

   WIE DAS FUNKTIONIERT: LibreChat definiert seine gesamte Oberfläche über
   CSS-Variablen auf `html` und `.dark`. Diese Datei definiert dieselben
   Variablen neu. Die Anwendung färbt sich damit selbst um — es wird KEINE
   Regel überschrieben und KEIN Code angefasst.

   QUELLE DER WERTE: ~/lightwork-desktop/projekt/design/lightwork-ui-v2/
   (Design System v2 + Styleguide v2, REGELN.md) und die Laufzeit-Tokens
   ~/lightwork-desktop/apps/electron/src/renderer/tokens.css. Eine Kopie hier
   wäre eine zweite Quelle; wer Farben ändert, ändert sie dort und trägt sie
   hier nach.

   REGEL: Hier stehen ausschliesslich Variablen-Definitionen. Wer anfängt,
   einzelne Bauteile per Selektor umzustylen, baut einen Fork ohne es zu
   merken — beim nächsten Upstream-Sprung bricht genau das.

   FORMAT-HINWEIS (gilt nur für einen künftigen Sprung auf v0.8.8-rc3 oder
   neuer): ab dort verpackt createTailwindColors.js die semantischen Tokens
   als rgb(var(--x) / <alpha-value>) — dann müssen ALLE Werte im ersten Block
   unten als reine "R G B"-Kanaltriples ohne "#" geschrieben werden, sonst
   wird die Farbe still unwirksam. Am HEUTE gepinnten v0.8.7 werden dieselben
   Variablen ohne rgb()-Wrapper konsumiert (var(--x) direkt) — Hex-Werte sind
   hier also richtig. Siehe Design-Lücke-Recherche 15.09.2026.

   ABGELEITETE WERTE: einige Variablen unten haben kein 1:1-Pendant in
   tokens.css (Hover-/Fokus-Zustände, die HSL-Kompatibilitätsebene, die
   Grau-Rampe). Sie sind aus den vorhandenen v2-Werten HERGELEITET (Alpha-
   Blend auf Weiss bzw. Schwarz, Methode im Kommentar an Ort und Stelle) —
   keine Erfindung, aber auch keine Christian-geprüften Werte. Am gebauten
   Client optisch gegenzuprüfen.
   ========================================================================== */

html,
.gizmo {
  /* Flächen — direkt aus tokens.css */
  --surface-primary: #ffffff;           /* v2 --background */
  --surface-secondary: #f6f5f2;         /* v2 --navigator — kein 1:1-Pendant, naechster Wert */
  --surface-tertiary: #f1eee7;          /* v2 --ton */
  --surface-dialog: #ffffff;            /* v2 --karte (Ebene 1: weiss + Rahmen, kein eigener Ton) */
  --surface-chat: #ffffff;              /* v2 --background */
  --surface-active: rgba(30, 26, 20, 0.07);      /* v2 --auswahl */
  --surface-active-alt: rgba(30, 26, 20, 0.07);  /* v2 --auswahl */
  --surface-hover: rgba(30, 26, 20, 0.025);      /* v2 --hover-liste */
  --surface-hover-alt: rgba(30, 26, 20, 0.05);   /* v2 --hover-leiste (Seitenleiste) */
  --presentation: #f1eee7;              /* v2 --ton — kein eigener Presentation-Token in v2 */
  --header-primary: #fbfaf8;            /* v2 --kopf */
  --header-hover: rgba(30, 26, 20, 0.05);        /* v2 --hover-leiste, auf --kopf gelegt */

  /* Text — direkt aus tokens.css */
  --text-primary: #1a1a18;              /* v2 --foreground / --tinte */
  --text-secondary: #4a4741;            /* v2 --text-sekundaer */
  --text-secondary-alt: #4a4741;        /* v2 --text-sekundaer — kein separater Alt-Wert in v2 */
  --text-tertiary: #6f6c66;             /* v2 --text-tertiaer */
  --text-warning: #8a6b3a;              /* v2 --wartet-text (Textpartner zu --info) */

  /* Linien — direkt aus tokens.css (RGBA, in v0.8.7 ohne rgb()-Wrapper gültig) */
  --border-light: rgba(30, 26, 20, 0.07);   /* v2 --linie-trenner */
  --border-medium: rgba(30, 26, 20, 0.12);  /* v2 --linie */
  --border-medium-alt: rgba(30, 26, 20, 0.12);
  --border-heavy: rgba(30, 26, 20, 0.3);    /* v2 --linie-betont */
  --border-xheavy: rgba(30, 26, 20, 0.3);   /* kein eigener xheavy-Token in v2 — wiederverwendet */

  /* Marke — der EINE dunkle Knopf (v2 --primaer-dunkel), kein Blau mehr */
  --brand-purple: #26241f;
  --brand-blue: #26241f;
  --ring-primary: #26241f;
  --surface-submit: #26241f;
  --surface-submit-hover: #1f1e19;      /* HERGELEITET: --primaer-dunkel um 18% Richtung Schwarz */

  /* Zustände — je Farbe genau eine Bedeutung, direkt aus tokens.css */
  --surface-destructive: #a65a3c;       /* v2 --destructive */
  --text-destructive: #a65a3c;
}

/* ==========================================================================
   Dunkelmodus — PROVISORISCH, ungeklärt (siehe Übergabe 'blocker').

   Design v2 definiert BEWUSST keinen Dunkelmodus (tokens.css, Kommentar
   "Dunkelmodus: vorerst hell ... die App bleibt auch im System-Dunkelmodus
   hell" — Christian, 14.09.2026, für den Lightwork-Agent-Desktop). Für
   Lightwork Chat gibt es dazu KEINE eigene, bestätigte Entscheidung.

   Vorläufig umgesetzt: dieselben hellen Werte auch unter .dark/.gizmo.dark
   — die Oberfläche bleibt beim Umschalten auf Dunkelmodus hell, statt in
   LibreChats eigenes, markenfremdes Grau zu fallen. Das spiegelt die
   Schwester-Entscheidung, ist aber NICHT Christians expliziter Auftrag für
   dieses Produkt — siehe 'blocker' in der Übergabe.
   ========================================================================== */
.dark,
.gizmo.dark {
  --surface-primary: #ffffff;
  --surface-secondary: #f6f5f2;
  --surface-tertiary: #f1eee7;
  --surface-dialog: #ffffff;
  --surface-chat: #ffffff;
  --surface-active: rgba(30, 26, 20, 0.07);
  --surface-active-alt: rgba(30, 26, 20, 0.07);
  --surface-hover: rgba(30, 26, 20, 0.025);
  --surface-hover-alt: rgba(30, 26, 20, 0.05);
  --presentation: #f1eee7;
  --header-primary: #fbfaf8;
  --header-hover: rgba(30, 26, 20, 0.05);

  --text-primary: #1a1a18;
  --text-secondary: #4a4741;
  --text-secondary-alt: #4a4741;
  --text-tertiary: #6f6c66;
  --text-warning: #8a6b3a;

  --border-light: rgba(30, 26, 20, 0.07);
  --border-medium: rgba(30, 26, 20, 0.12);
  --border-medium-alt: rgba(30, 26, 20, 0.12);
  --border-heavy: rgba(30, 26, 20, 0.3);

  --brand-purple: #26241f;
  --ring-primary: #26241f;
  --surface-submit: #26241f;
  --surface-submit-hover: #1f1e19;
}

/* LibreChat setzt einige Marken-Variablen erst auf :root, nach dem html-Block
   (gemessen 13.09.2026 am v1-Stand, gilt strukturell weiter). Deshalb hier
   noch einmal mit :root — gleiche Regel, spaeter im Dokument, gewinnt. */
:root {
  --brand-purple: #26241f;
  --ring-primary: #26241f;

  /* Grau-Rampe. LibreChat verweist intern auf diese Stufen (z. B.
     --surface-primary-alt: var(--gray-850)) — MUSS auf :root stehen, nicht
     auf html (gemessen 13.09.2026: im html-Block blieb --gray-800 wirkungslos).

     HERGELEITET, nicht 1:1 aus tokens.css: v2 nennt sechs Flaechen-/Text-
     Rollen, keine 12-stufige Nummern-Rampe. Direkt uebernommen sind
     gray-20/50/100 (kopf/navigator/ton) und gray-400/500/600/800/850
     (text-schwach/text-tertiaer/text-sekundaer/foreground/primaer-dunkel).
     gray-200/300/700/900 sind rechnerisch interpoliert (Alpha-Blend von
     --linie bzw. --linie-betont auf Weiss, bzw. Mischung Richtung Schwarz)
     — am gebauten Client visuell zu pruefen, nicht Christian-bestaetigt. */
  --gray-20: #fbfaf8;   /* = --kopf */
  --gray-50: #f6f5f2;   /* = --navigator */
  --gray-100: #f1eee7;  /* = --ton */
  --gray-200: #e4e4e3;  /* hergeleitet: --linie (0.12) auf Weiss */
  --gray-300: #bcbab9;  /* hergeleitet: --linie-betont (0.3) auf Weiss */
  --gray-400: #9c9890;  /* = --text-schwach */
  --gray-500: #6f6c66;  /* = --text-tertiaer */
  --gray-600: #4a4741;  /* = --text-sekundaer */
  --gray-700: #302e2a;  /* hergeleitet: Mitte --text-sekundaer/--foreground */
  --gray-800: #1a1a18;  /* = --foreground / --tinte */
  --gray-850: #26241f;  /* = --primaer-dunkel */
  --gray-900: #1c1b17;  /* hergeleitet: --primaer-dunkel Richtung Schwarz */

  /* Zustandsfarben — direkt aus tokens.css, je Farbe genau eine Bedeutung. */
  --amber-500: #b79a54;   /* v2 --info — wartet auf Entscheidung */
  --amber-600: #8a6b3a;   /* v2 --wartet-text — lesbare Schrift auf Ocker */
  --green-500: #6e7f6a;   /* v2 --success — fertig, positiver Trend */
  --green-600: #4f5e4a;   /* v2 --erledigt-text */
  --green-700: #414d3d;   /* hergeleitet: --erledigt-text Richtung Schwarz (kein dritter v2-Wert) */
  --red-500: #a65a3c;     /* v2 --destructive — Fehler, Loeschen */
  --red-600: #8d4c33;     /* hergeleitet: --destructive Richtung Schwarz (kein Hover-Token in v2) */
  --red-700: #78412b;     /* hergeleitet, dito */
}

/* ==========================================================================
   Zweite Ebene: die Bedienelemente (shadcn-Stil, HSL-Bestandteile ohne
   Funktion — genutzt als hsl(var(--primary)) usw.). Ein Hex-Wert hier macht
   die Farbe still unwirksam, nicht kaputt. Werte unten sind aus denselben
   v2-Hex-Werten nach HSL umgerechnet (siehe Kommentar je Zeile); --border/
   --input haben kein eigenes v2-Pendant und sind wie die Grau-Rampe oben aus
   --linie (0.12 auf Weiss) hergeleitet.
   ========================================================================== */

html,
.gizmo {
  --primary: 43 10% 14%;            /* = --primaer-dunkel #26241f */
  --primary-foreground: 40 30% 96%; /* = --auf-dunkel #f8f6f2 */
  --secondary: 42 26% 93%;          /* = --ton #f1eee7 */
  --secondary-foreground: 60 4% 10%; /* = --foreground #1a1a18 */
  --muted: 42 26% 93%;              /* = --ton #f1eee7 */
  --muted-foreground: 40 4% 42%;    /* = --text-tertiaer #6f6c66 */
  --accent: 42 26% 93%;             /* = --ton #f1eee7 (neutrale Hover-Flaeche, nicht der Marken-Akzent) */
  --accent-foreground: 60 4% 10%;   /* = --foreground #1a1a18 */
  --background: 0 0% 100%;          /* = --background #ffffff */
  --foreground: 60 4% 10%;          /* = --foreground #1a1a18 */
  --border: 60 2% 89%;              /* hergeleitet: --linie (0.12) auf Weiss = #e4e4e3 */
  --input: 60 2% 89%;               /* dito */
  --ring: 43 10% 14%;               /* = --primaer-dunkel #26241f */
  --switch-unchecked: 40 6% 59%;    /* = --text-schwach #9c9890 — warmes Grau statt kaltem */
}

.dark,
.gizmo.dark {
  /* Provisorisch identisch zum Hell-Block (siehe Dunkelmodus-Hinweis oben) */
  --primary: 43 10% 14%;
  --primary-foreground: 40 30% 96%;
  --secondary: 42 26% 93%;
  --secondary-foreground: 60 4% 10%;
  --muted: 42 26% 93%;
  --muted-foreground: 40 4% 42%;
  --accent: 42 26% 93%;
  --accent-foreground: 60 4% 10%;
  --background: 0 0% 100%;
  --foreground: 60 4% 10%;
  --border: 60 2% 89%;
  --input: 60 2% 89%;
  --ring: 43 10% 14%;
  --switch-unchecked: 40 6% 59%;
}

/* ==========================================================================
   Schriften — geladen, aber (noch) NICHT zugewiesen.

   /schriften/*.woff2 sind aus ~/lightwork-desktop/apps/electron/src/renderer/
   fonts/ kopiert (Source Serif 4, Instrument Sans, IBM Plex Mono — SIL OFL
   1.1, Lizenztexte liegen daneben unter /schriften/). Lokal ausgeliefert,
   kein Aufruf an einen fremden Server.

   KEINE ZUWEISUNG in dieser Datei: LibreChat v0.8.7 hat weder eine
   CSS-Variable noch eine durchgaengig genutzte Tailwind-Font-Klasse für die
   Schriftfamilie — geprueft: client/tailwind.config.cjs setzt fontFamily
   NICHT unter `extend` (kein --font-sans-Var, keine `font-serif`-Klasse
   ueberhaupt im Theme); client/src/components/Messages/Content/CodeBlock.tsx
   traegt keine `font-mono`-Klasse auf <code>/<pre> (nur `hljs language-*`).
   Jede Rollenzuweisung (Serif fuer Antworten/Ueberschriften, Sans fuer
   Bedienung, Mono fuer Code) ginge deshalb NUR per Selektor auf Bauteile
   (h1-h3, html/body/input/textarea/button, code/pre) — genau das verbietet
   der Auftrag fuer diesen Umbau. Siehe 'offen' in der Uebergabe.
   ========================================================================== */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url('/schriften/instrument-sans-latin-ext-a53201c8.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url('/schriften/instrument-sans-latin-11aa495c.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('/schriften/source-serif-4-italic-latin-ext-53b2761e.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('/schriften/source-serif-4-italic-latin-b64cadaa.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url('/schriften/source-serif-4-latin-ext-23835fe8.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url('/schriften/source-serif-4-latin-2c60df80.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/schriften/ibm-plex-mono-latin-ext-2532acb5.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/schriften/ibm-plex-mono-latin-01c04f4d.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('/schriften/ibm-plex-mono-latin-ext-7300d08c.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('/schriften/ibm-plex-mono-latin-5778b1a2.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Zuweisung der Schriften (Design v2, Styleguide: „Alles, was der Agent sagt,
   steht in Source Serif 4 — alles, was man anklickt, ist Instrument Sans";
   Code in IBM Plex Mono). Bewusst die einzige Stelle mit Selektoren neben der
   Absenderzeile unten: nur Elementtypen und LibreChats eigene Markdown-Klassen,
   keine Bauteil-Klassen. Faellt eine Schrift aus, greift die System-Schrift. */
html,
body,
input,
textarea,
button,
select,
optgroup {
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3,
.markdown,
.prose {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

code,
pre,
kbd,
.font-mono {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Absenderzeile ueber der Antwort ──────────────────────────────────────
   Ueber jeder Antwort stand der Name des Anbieters ("Synthetic"). Das ist
   unsere Lieferkette, nicht die Information des Kunden — und es macht die
   Oberflaeche zu einem Schaufenster fremder Marken.

   Wie es aufgebaut ist (nachgesehen im gebauten Client, Datei
   client/dist/assets/index.*.js, 13.09.2026): jede Nachricht rendert
   <div class="relative flex w-11/12 flex-col [agent-turn]"> und darin als
   ERSTES Kind <div class="select-none font-semibold">Name + Zeitstempel</div>.
   Die Klasse "agent-turn" bekommt nur die Antwort, nie die Nutzernachricht.

   Deshalb greift die Regel ueber "agent-turn" und das erste Kind. Kein
   Zugriff auf den Namen selbst — der ist ein blanker Textknoten und fuer CSS
   nicht erreichbar; die ganze Zeile muss weg. Der Zeitstempel liegt mit
   drin, er wird bei uns ohnehin nicht angezeigt.

   Grenze, ehrlich: Klassennamen sind keine zugesicherte Schnittstelle.
   Baut LibreChat die Nachricht um, kommt der Name zurueck — sichtbar, nicht
   still. Das ist der Preis dafuer, den Kern nicht anzufassen.

   Dies ist KEIN Design-v2-Wert und bleibt deshalb unveraendert aus dem
   v1-Stand uebernommen — funktionale Marken-Bereinigung, keine Optik. */
.agent-turn > .select-none.font-semibold {
  display: none;
}