/* Goventa — generated from tokens.json */
:root, [data-theme="light"] {
  --bg: var(--white); /* Seitenhintergrund. Standardfläche für Inhalte. */
  --surface: var(--gray-25); /* Leicht abgesetzte Fläche: Seitenleisten, Tabellenköpfe, Formularbereiche. */
  --surface-raised: var(--white); /* Karten, Dialoge und Menüs, die über surface liegen. */
  --surface-brand: var(--blue-50); /* Ruhige Markenfläche für Hinweise, Hervorhebungen und Einstiegsbereiche. */
  --text: var(--gray-900); /* Fließtext und Überschriften. Ab 16:1 auf bg in beiden Themes. */
  --text-muted: var(--gray-600); /* Sekundärtext, Metadaten, Hilfetexte unter Formularfeldern. Mindestens 7:1 auf bg. */
  --text-subtle: var(--gray-500); /* Platzhalter und deaktivierte Beschriftungen. Nur ab 4,5:1 auf bg und surface, nicht auf surface-raised im Dark Theme. */
  --border: var(--gray-200); /* Trennlinien und Kartenränder. Rein dekorativ, trägt keine Information. */
  --border-strong: var(--gray-400); /* Rahmen von Eingabefeldern, Checkboxen und Radios. Mindestens 3:1 auf bg (BITV 2.0 / WCAG 1.4.11). */
  --primary: var(--blue-600); /* Goventa-Blau. Primäre Buttons, aktive Navigation, Links. 7:1 auf bg. */
  --primary-hover: var(--blue-700); /* Hover- und Pressed-Zustand von primary. */
  --on-primary: var(--white); /* Text und Icons auf primary. */
  --link: var(--blue-600); /* Links im Fließtext, immer zusätzlich unterstrichen. */
  --focus: var(--blue-500); /* Fokusring, 2px mit 2px Abstand. Mindestens 3:1 auf allen Flächen. */
  --accent: var(--sky-400); /* Himmelblau für Illustrationen, Diagramme und dekorative Akzente. Nie für Text auf Weiß. */
  --success: var(--green-600); /* Erfolgsmeldungen, abgeschlossene Vorgänge. Immer mit Icon und Text. */
  --success-surface: var(--green-50); /* Hintergrund von Erfolgsmeldungen; success-Text darauf ab 4,7:1. */
  --warning: var(--amber-600); /* Warnungen, Fristen, unvollständige Angaben. Immer mit Icon und Text. */
  --warning-surface: var(--amber-50); /* Hintergrund von Warnungen; warning-Text darauf ab 5,4:1. */
  --danger: var(--red-600); /* Fehler, Pflichtfeld nicht ausgefüllt, destruktive Aktionen. Immer mit Icon und Text. */
  --danger-surface: var(--red-50); /* Hintergrund von Fehlermeldungen; danger-Text darauf ab 5,5:1. */
  --info: var(--blue-600); /* Neutrale Hinweise. Gleicher Ton wie primary, unterscheidet sich durch Icon und Fläche. */
  --info-surface: var(--blue-50); /* Hintergrund von Hinweisen. */
  --blue-50: #eef4fc; /* Hellste Blaufläche, Hinweis- und Markenhintergrund. */
  --blue-100: #d9e6f7; /* Ausgewählte Tabellenzeilen, Hover auf hellen Flächen. */
  --blue-200: #b5cdef; /* Primary-Hover im Dark Theme; Diagrammfläche. */
  --blue-300: #86ace2; /* Primary im Dark Theme (8:1 auf gray-950). */
  --blue-400: #5288d2; /* Fokusring im Dark Theme; Diagrammlinie. */
  --blue-500: #2b6bc2; /* Fokusring im Light Theme; kleinste Blaustufe für Text auf Weiß (5,3:1). */
  --blue-600: #1d55a6; /* Goventa-Blau, die Markenfarbe (7,2:1 auf Weiß). */
  --blue-700: #184486; /* Hover auf Goventa-Blau. */
  --blue-800: #14366a; /* Dunkle Markenflächen, Footer. */
  --blue-900: #0f2750; /* Sehr dunkle Markenflächen. */
  --blue-950: #0a1a36; /* Markenfläche im Dark Theme; Text auf primary im Dark Theme. */
  --white: #ffffff; /* Reines Weiß: bg im Light Theme, Text auf primary. */
  --gray-25: #f7f9fc; /* surface im Light Theme. */
  --gray-50: #f0f3f8; /* Text im Dark Theme. */
  --gray-100: #e3e8f0; /* Deaktivierte Flächen im Light Theme. */
  --gray-200: #cdd5e1; /* border im Light Theme. */
  --gray-300: #a9b5c7; /* text-muted im Dark Theme. */
  --gray-400: #7d8ba1; /* border-strong im Light Theme, text-subtle im Dark Theme. */
  --gray-500: #5b6980; /* text-subtle im Light Theme, border-strong im Dark Theme. */
  --gray-600: #445168; /* text-muted im Light Theme. */
  --gray-700: #323d52; /* border im Dark Theme. */
  --gray-800: #222b3c; /* surface-raised im Dark Theme. */
  --gray-900: #151c29; /* Text im Light Theme, surface im Dark Theme. */
  --gray-950: #0c111b; /* bg im Dark Theme. */
  --sky-400: #4aa3e6; /* Himmelblau, der zweite Markenton. Nur Flächen, Linien, Illustration. */
  --green-50: #e7f5ec; /* Meldungsfläche, Light Theme. */
  --green-600: #1b7a4b; /* Meldungstext und -icon, Light Theme. */
  --green-300: #5cc98e; /* Meldungstext und -icon, Dark Theme. */
  --green-950: #0e2a1c; /* Meldungsfläche, Dark Theme. */
  --amber-50: #fdf2de; /* Meldungsfläche, Light Theme. */
  --amber-600: #935300; /* Meldungstext und -icon, Light Theme. */
  --amber-300: #f0b452; /* Meldungstext und -icon, Dark Theme. */
  --amber-950: #2e2008; /* Meldungsfläche, Dark Theme. */
  --red-50: #fcebea; /* Meldungsfläche, Light Theme. */
  --red-600: #b42a24; /* Meldungstext und -icon, Light Theme. */
  --red-300: #f4857e; /* Meldungstext und -icon, Dark Theme. */
  --red-950: #361412; /* Meldungsfläche, Dark Theme. */
}
[data-theme="dark"] {
  --bg: var(--gray-950);
  --surface: var(--gray-900);
  --surface-raised: var(--gray-800);
  --surface-brand: var(--blue-950);
  --text: var(--gray-50);
  --text-muted: var(--gray-300);
  --text-subtle: var(--gray-400);
  --border: var(--gray-700);
  --border-strong: var(--gray-500);
  --primary: var(--blue-300);
  --primary-hover: var(--blue-200);
  --on-primary: var(--blue-950);
  --link: var(--blue-300);
  --focus: var(--blue-400);
  --accent: var(--sky-400);
  --success: var(--green-300);
  --success-surface: var(--green-950);
  --warning: var(--amber-300);
  --warning-surface: var(--amber-950);
  --danger: var(--red-300);
  --danger-surface: var(--red-950);
  --info: var(--blue-300);
  --info-surface: var(--blue-950);
}