/*
 * Design-Tokens aus dem Vouchly-Design-System.
 *
 * Quelle: Claude-Design-Projekt "Vouchly Design-System", Datei
 * "Vouchly Design System - Final.dc.html", Richtung „Ledger Blue".
 * Uebernommen am 01.08.2026. Die Werte stehen hier **einmal**; wer eine
 * Farbe aendern will, aendert sie hier und nirgends sonst.
 *
 * Warum eine eigene Datei: Die Tokens sind die Schnittstelle zum Entwurf.
 * Kommt eine neue Fassung aus dem Design, wird diese Datei ersetzt - und
 * taskpane.css, das nur noch die Tokens benutzt, bleibt unberuehrt.
 *
 * ⚠ Die alten Variablen in taskpane.css (`--rand`, `--betont`, …) leben
 * bewusst weiter, bis alle Bereiche umgestellt sind. Ein halb migrierter
 * Bereich, dessen Variable es nicht mehr gibt, faellt sonst auf die
 * Vorgabefarbe zurueck - und das sieht aus wie ein Gestaltungsfehler.
 */

/* --- Schriften ------------------------------------------------------------
 *
 * Lokal gebuendelt, **kein CDN zur Laufzeit**. Das verlangt sowohl das
 * Design-System ("Woff2-Dateien lokal buendeln (@font-face), kein
 * Laufzeit-CDN-Nachladen") als auch die Regel dieses Projekts: Ein Werkzeug
 * mit dem Versprechen "nichts verlaesst den Rechner" laedt zur Laufzeit
 * nichts nach. Die Dateien liegen in addin/assets und werden von webpack
 * mitkopiert.
 *
 * ⚠ Die Adressen beginnen mit `/`, sind also **serverabsolut**. Grund: In
 * diesem Bau gibt es keinen css-loader - das Stylesheet wird von
 * html-loader als Anhang emittiert, und `url(...)` darin wird **nicht**
 * umgeschrieben. Ein relativer Pfad zeigte damit je nach Ablageort der
 * emittierten CSS-Datei ins Leere, und zwar lautlos: Man saehe schlicht
 * die Ersatzschrift und hielte das Design fuer misslungen.
 *
 * IBM Plex Sans kommt als **Variable Font** - eine Datei deckt 100-700 ab.
 * Nachgemessen: Die vier von Google Fonts gelieferten Gewichtsdateien waren
 * bis aufs Byte identisch. IBM Plex Mono ist dagegen statisch, dort gibt es
 * je Gewicht eine Datei.
 */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/ibm-plex-sans.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Schriftfamilien --------------------------------------------------
   *
   * Die Ersatzschriften sind kein Zierrat: Bis das woff2 geladen ist (oder
   * falls es fehlt), traegt der Stapel die Anzeige. "Segoe UI" steht vorn,
   * weil Excel unter Windows damit ohnehin setzt - der Sprung ist dann
   * kleiner.
   */
  --ds-schrift: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  /* Betraege, Kennungen, erkannter Text. Tabellarische Ziffern, damit
     Zahlen untereinander stehen - bei 300-350 px Breite entscheidend. */
  --ds-schrift-zahlen: "IBM Plex Mono", Consolas, "Courier New", monospace;

  /* --- Markenfarben ------------------------------------------------------ */
  --ds-primaer: #1d3557; /* Kopfzeile, Primaerbuttons, Wortmarke */
  --ds-sekundaer: #2e5266; /* Aktions-Icons, sekundaere Flaechen */
  --ds-akzent: #3a7ca5; /* Markierungsrahmen im Betrachter, Links */

  /* --- Zustandsfarben ----------------------------------------------------
   *
   * Sie tragen im Werkzeug Bedeutung, nicht Geschmack: Jede entspricht
   * einem Zustand, den der Audit-Trail kennt.
   */
  --ds-aktiv: #1e7a55; /* bestaetigt, Summe stimmt, Verknuepfung aktiv */
  --ds-abweichung: #b23a2f; /* Fehler, abweichender Zellinhalt */
  --ds-unsicher: #c98a2b; /* geringe Konfidenz */
  --ds-verwaist: #8a8f98; /* verwaiste Verknuepfung, Inaktives */

  /* --- Verbindungsampel in der Kopfzeile -------------------------------
   *
   * Der Punkt rechts in der dunklen Kopfleiste (`--ds-primaer`, #1d3557).
   * Es sind bewusst EIGENE Werte, nicht `--ds-aktiv` / `--ds-abweichung`:
   * die Zustandsfarben sind auf helle Meldungsflaechen abgestimmt und
   * laufen auf dem dunklen Blau zu (das Rot besonders). Dieselbe
   * Ueberlegung wie bei den Menueband-Symbolen (25.08.2026) - eine Farbe,
   * die auf einem Grund traegt, traegt nicht von selbst auf dem anderen.
   * Aufgehellt, dazu in taskpane.css ein heller Ring.
   */
  --ds-ampel-ruht: #aab3bf; /* Vouchly wartet aufs Oeffnen - prueft nichts */
  --ds-ampel-pruefe: #e8b563; /* Verbindung wird geprueft */
  --ds-ampel-gut: #4ecb8f; /* Belegdienst erreichbar */
  --ds-ampel-fehler: #f2685c; /* Belegdienst nicht erreichbar */

  /* --- Flaechen der Zustandsmeldungen ------------------------------------ */
  --ds-aktiv-flaeche: #eaf3ee;
  --ds-aktiv-text: #14513a;
  --ds-unsicher-flaeche: #fbf1e3;
  --ds-unsicher-text: #7a5a1e;
  --ds-abweichung-flaeche: #fbeae7;
  --ds-abweichung-text: #7a2a21;

  /* --- Neutrale Toene ---------------------------------------------------- */
  --ds-grund: #f7f8fa; /* Seitenhintergrund */
  --ds-flaeche: #ffffff; /* Karten, Listen, Eingabefelder */
  --ds-rand: #dde1e6; /* Rahmen von Karten und Feldern */
  --ds-rand-kraeftig: #e1e4e8; /* Trennlinien zwischen Bereichen */
  --ds-rand-zart: #eceef1; /* Trennlinien innerhalb einer Liste */

  --ds-text: #171a1f; /* Ueberschriften, Betraege */
  --ds-text-koerper: #2a2e35; /* Fliesstext, Listeneintraege */
  --ds-text-gedaempft: #5b6470; /* Beschreibungen, Fussnoten */
  --ds-text-zart: #8a8f98; /* Beschriftungen, inaktive Reiter */
  --ds-text-platzhalter: #9aa0a8;

  /* --- Masse -------------------------------------------------------------
   *
   * Radien aus dem Entwurf: 3 px an Bedienelementen, 4 px an Karten. Das
   * ist bewusst klein - ein Werkzeug, das neben Excel steht, soll nicht
   * runder wirken als Excel selbst.
   */
  --ds-radius: 3px;
  --ds-radius-karte: 4px;
}