/* LEWEB Design System – Token für Backend, /login und Seiten-Editor (dunkle Fassung).
   Quelle: Repo design-system, build.mjs (brand, mix(), tone(), neutralRoles, status,
   statusOnDark, typeScale, spacing; Radien, Schatten, Breiten von der Seite „Raster und
   Abstände“), Stand 7cf878e 2026-10-05. Abgeleitete Töne sind dort gerechnet, nicht geschätzt.
   Nachziehen: Ändert sich das Design System, die Werte hier mit den Tabellen im PDF
   (Farben – Rollen, Farben – Status, Dunkel – was anders ist, Typografie – Skala, Raster)
   abgleichen; der Kommentar hinter jeder Farbe nennt die Stufe der Neutralskala.
   Nur hier stehen Farben und Maße; alle anderen Dateien benutzen var(--le-…).
   :root für Backend, /login und die Seite (Schrift), :host für das Shadow-DOM des Seiten-Editors.
   Schrift unter eigenem Namen, damit keine Schrift der Kunden-Website ersetzt wird. */
@font-face {
  font-family: "le-sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("LEWEBSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "le-sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("LEWEBSans-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "le-sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("LEWEBSans-Bold.woff2") format("woff2");
}

:root,
:host {
  /* Marke: Primary ist auf Dunkel Fläche, Linie, Fokus und Text; Text auf Primary immer Dark. */
  --le-primary: #a4f5a6;
  --le-on-primary: #242529;
  /* Hover auf Primary: im Design System für Dunkel nicht benannt (auf Hell: primary-deep, dunkler).
     Hier ebenso dunkler im selben Farbton, tone(primary, 0.65): Dark darauf 10,0:1,
     gegen Primary 1,18:1 (heller wäre kaum sichtbar, je Stufe ≤ 1,13:1). */
  --le-primary-hover: #5eed62;

  /* Neutral-Rollen, dunkel (Seite „Farben – Rollen“). */
  --le-background: #242529; /* dark-0 */
  --le-surface: #36373f; /* dark-100 */
  --le-surface-sunken: #242529; /* dark-0 */
  --le-surface-hover: #4e4f56; /* dark-400 */
  --le-border: #3e3f47; /* dark-200 */
  --le-border-strong: #46474e; /* dark-300 */
  --le-text: #fafafa; /* light-100 */
  --le-text-muted: #dcdcdd; /* mid-0 */
  --le-text-inverted: #242529; /* dark-0 */

  /* Status auf Dunkel: Basis statusOnDark() = mix(Status, light, 0.35), Fläche mix(dark-0, Status, 0.22)
     wie im Beispiel „Dunkel und hell“. Abweichung: danger mit mix(danger, light, 0.45), sonst nur
     4,07:1 auf surface (mit 0.45: 4,84:1, auf danger-soft 5,28:1). */
  --le-success: #66c296;
  --le-success-soft: #204035;
  --le-warning: #e89d5b;
  --le-warning-soft: #4c3421;
  --le-danger: #ea8c84;
  --le-danger-soft: #4c2727;
  --le-info: #67a2f5;
  --le-info-soft: #213655;

  /* Fokus: 2 px Kontur, 2 px Abstand, auf Dunkel Primary selbst. */
  --le-focus-ring: var(--le-primary);
  --le-focus-width: 2px;
  --le-focus-offset: 2px;

  /* Typografie: Bildschirmspalte der Skala in px (1 rem = 16 px). Nicht rem: im Shadow-DOM
     bezöge sich rem auf die Schriftgröße der Kunden-Website. Light 300 wird nicht gebraucht;
     Label in Versalien mit tracking-label. */
  --le-font: "le-sans", system-ui, sans-serif;
  --le-weight-regular: 400;
  --le-weight-medium: 500;
  --le-weight-bold: 700;
  --le-fs-titel: 36px;
  --le-lh-titel: 1.15;
  --le-fs-h1: 30px;
  --le-lh-h1: 1.2;
  --le-fs-h2: 24px;
  --le-lh-h2: 1.3;
  --le-fs-h3: 18px;
  --le-lh-h3: 1.4;
  --le-fs-body: 16px;
  --le-lh-body: 1.55;
  --le-fs-klein: 14px;
  --le-lh-klein: 1.5;
  --le-fs-label: 12px;
  --le-lh-label: 1.4;
  --le-tracking-brand: 0.115em;
  --le-tracking-label: 0.08em;

  /* Abstände (Nummer = Vielfaches von 4 px), in px wie die Schrift. */
  --le-space-1: 4px;
  --le-space-2: 8px;
  --le-space-4: 16px;
  --le-space-6: 24px;
  --le-space-8: 32px;
  --le-space-12: 48px;

  /* Radien, Linien, Schatten (Schatten nur für Überlagerndes, Tailwind-Stufe zu „y 25px“;
     Karten trennt auf Dunkel Fläche und Linie, nicht Schatten). */
  --le-radius-sm: 6px;
  --le-radius-md: 8px;
  --le-radius-lg: 12px;
  --le-radius-full: 9999px;
  --le-line: 1px;
  --le-shadow-overlay: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Breiten aus dem Design System. */
  --le-sidebar-width: 256px;
  --le-measure: 65ch;
  --le-logo-min-width: 56px;

  /* Maße dieser Oberfläche (nicht aus dem Design System). Alle in px; overlay.js liest
     --le-bar-height (page.css), --le-space-2, --le-space-4, --le-frame-pad und --le-tag-gap mit
     parseFloat, deshalb dort je ein Wert ohne calc(). */
  /* Leiste des Seiten-Editors: schwebende Pille unten (Höhe, Abstand zum Rand) und der Platz, den sie
     unter der Seite braucht (bar-space = bar-size + 2 × bar-offset; ein Wert, weil overlay.js ihn
     mit parseFloat liest). */
  --le-bar-size: 60px;
  /* Schlagschatten der Leiste, ihres Stands und des Menüs „Mehr“: kräftiger als shadow-overlay,
     damit sie sich auch auf hellen Kundenseiten abheben. */
  --le-shadow-bar: 0 16px 40px -8px rgb(0 0 0 / 0.55), 0 4px 12px rgb(0 0 0 / 0.3);
  /* Derselbe Schatten als filter für die eingeklappte, flüssige Leiste (folgt der Form, dreht nicht mit). */
  --le-drop-shadow-bar: drop-shadow(0 12px 16px rgb(0 0 0 / 0.45)) drop-shadow(0 3px 6px rgb(0 0 0 / 0.3));
  --le-bar-offset: 16px;
  --le-bar-space: 92px;
  /* Leuchten um bearbeitbare Stellen beim Überfahren (Breite des weichen Rands), Rahmen um das
     Element (so viel größer als der Inhalt) und Abstand des Schilds „Text ändern“ über dem Rahmen. */
  --le-glow-width: 6px;
  --le-frame-pad: 3px;
  --le-tag-gap: 8px;
  --le-icon: 20px;
  --le-icon-small: 16px;
  --le-dot: 10px;
  --le-menu-width: 288px;
  --le-hint-width: 400px;
  --le-dialog-width: 400px;
  /* Platz unter einer Plugin-Liste für ihre Leiste („Mitarbeiter · 5 Einträge  + Neuer Eintrag“). */
  --le-list-bar-space: 64px;
  --le-touch-target: 44px;
  --le-sidebar-collapsed-width: 64px;
  --le-panel-width: 440px;
  --le-popover-width: 320px;
  --le-modal-width: 560px;
  --le-login-width: 384px;
  --le-form-width: 480px;
  /* Kleinste Breite eines Titels oder Eingabefelds neben Knöpfen, bevor umbrochen wird. */
  --le-text-min-width: 160px;
  --le-icon-button: 32px;
  --le-thumb-height: 120px;
  --le-textarea-min-height: 88px;
  /* Texteditor (richtext.css): höher scrollt der Text im Feld. */
  --le-rte-max-height: 360px;
  /* Leeres Bildfeld im Formular (Platzhalter „Noch kein Bild“). */
  --le-image-empty-height: 96px;
  --le-backdrop: rgb(36 37 41 / 0.7);
  /* Grund der Website im iframe der Seitenansicht, wie ein Browser ohne eigene Hintergrundfarbe. */
  --le-page-canvas: #ffffff; /* light-0 */
}