/* GENERIERT aus src/voice_gateway/empfang/design/tokens.json - nicht von Hand aendern.
 * Neu erzeugen: python -m voice_gateway.empfang.design
 * Thema: Caravan-Wendt. Regeln: EMPFANG-DESIGN.md
 * 'grund-*' sind Rohwerte - Komponenten benutzen nur die Bedeutungen darunter. */
:root {
  /* thema */
  --thema-logo: url("/web/design/marke/logo.webp"); /* Logo des Betriebs – für dunklen Grund (weiße Schrift). Je Betrieb die Datei tauschen, nicht den Code. */
  --thema-logo-verhaeltnis: 3.52; /* Breite geteilt durch Höhe der Logo-Datei (619 x 176) – mit dem Logo zusammen ändern */

  /* grund */
  --grund-marine-50: #eef3f8;
  --grund-marine-100: #dde6ef;
  --grund-marine-200: #ccd7e3; /* Caravan-Wendt Fußzeilen-Text */
  --grund-marine-400: #5882a7; /* Caravan-Wendt Menü-Untergrund */
  --grund-marine-600: #3a6283; /* Caravan-Wendt Verlauf oben */
  --grund-marine-700: #2e5776;
  --grund-marine-900: #263b50; /* Caravan-Wendt Marineblau (Verlauf unten) */
  --grund-blau-50: #e8f2fa;
  --grund-blau-100: #cfe4f3;
  --grund-blau-600: #006ead; /* Caravan-Wendt Markenblau (--cw-blue) */
  --grund-blau-700: #00578a;
  --grund-blau-800: #004470;
  --grund-gruen-50: #eef7e1;
  --grund-gruen-100: #d9edbd;
  --grund-gruen-300: #9acd51; /* Caravan-Wendt Grün hell (Verlauf oben) */
  --grund-gruen-500: #66ad00; /* Caravan-Wendt Markengrün (--cw-green) – mit weißer Schrift zu schwach (2,8:1) */
  --grund-gruen-700: #3d7300;
  --grund-gruen-800: #2f5a00;
  --grund-rot-50: #fdeded;
  --grund-rot-200: #f2b7b7; /* Caravan-Wendt Rot hell (--cw-red-light) */
  --grund-rot-700: #b20000; /* Caravan-Wendt Rot (--cw-red) */
  --grund-rot-900: #650f0f; /* Caravan-Wendt Rot dunkel */
  --grund-bernstein-50: #fff5d9;
  --grund-bernstein-200: #ffe58a;
  --grund-bernstein-600: #b87d00;
  --grund-bernstein-800: #7a4f00;
  --grund-lila-50: #f3edfa;
  --grund-lila-700: #6b3fa0;
  --grund-grau-0: #ffffff;
  --grund-grau-50: #f5f7f9;
  --grund-grau-100: #eef1f4;
  --grund-grau-200: #dde3e9;
  --grund-grau-300: #c5ced8;
  --grund-grau-500: #7b8794;
  --grund-grau-600: #56616e;
  --grund-grau-900: #1f2933;

  /* farbe */
  --farbe-seite: var(--grund-grau-50); /* Hintergrund der ganzen Seite */
  --farbe-flaeche: var(--grund-grau-0); /* Karten, Mitte, Eingabefelder */
  --farbe-flaeche-ruhig: var(--grund-grau-100); /* Seitenspalten, wenn sie gerade nicht dran sind */
  --farbe-kopfleiste: var(--grund-marine-900); /* Kopfleiste oben – Markenfläche */
  --farbe-kopfleiste-text: var(--grund-grau-0); /* Text in der Kopfleiste */
  --farbe-kopfleiste-leise: var(--grund-marine-200); /* Nebeninfo in der Kopfleiste */
  --farbe-text: var(--grund-grau-900); /* Grundtext */
  --farbe-text-leise: var(--grund-grau-600); /* Nebeninfo, Etiketten */
  --farbe-text-aus: var(--grund-grau-500); /* Text in deaktivierten Bedienelementen */
  --farbe-text-auf-farbe: var(--grund-grau-0); /* Text auf gefüllten Knöpfen und Flächen */
  --farbe-rand: var(--grund-grau-200); /* Trennlinien und Kartenränder (Schmuck) */
  --farbe-rand-feld: var(--grund-grau-500); /* Rand von Eingabefeldern – mindestens 3:1 */
  --farbe-fokus: var(--grund-marine-900); /* Fokusring (Tastatur) auf hellem Grund */
  --farbe-fokus-auf-dunkel: var(--grund-grau-0); /* Fokusring auf dunklem Grund */
  --farbe-aktion: var(--grund-blau-600); /* Hauptaktion und 'jetzt dran' – Markenblau */
  --farbe-aktion-hover: var(--grund-blau-700); /* Hauptaktion unter der Maus */
  --farbe-aktion-gedrueckt: var(--grund-blau-800); /* Hauptaktion gedrückt */
  --farbe-aktion-hell: var(--grund-blau-50); /* Hintergrund 'jetzt dran' (Jetzt-Kasten, gewählte Karte) */
  --farbe-aktion-text: var(--grund-blau-700); /* Blaue Schrift auf hellem Grund */
  --farbe-aktion-schein: var(--grund-blau-100); /* Leuchtring beim Klingeln – muss sich von aktion-hell abheben */
  --farbe-gut: var(--grund-gruen-700); /* Gut / erledigt / geklappt – gefüllte Knöpfe */
  --farbe-gut-hover: var(--grund-gruen-800); /* Gut-Knopf unter der Maus */
  --farbe-gut-hell: var(--grund-gruen-50); /* Hintergrund Gut-Hinweis */
  --farbe-gut-text: var(--grund-gruen-800); /* Grüne Schrift auf hellem Grund */
  --farbe-marke-gruen: var(--grund-gruen-500); /* Markengrün – nur Schmuck (Streifen, Diagramme), nie Schrift */
  --farbe-achtung: var(--grund-bernstein-600); /* Rand/Streifen für 'neu' und 'Achtung' */
  --farbe-achtung-hell: var(--grund-bernstein-50); /* Hintergrund Achtung-Hinweis */
  --farbe-achtung-text: var(--grund-bernstein-800); /* Schrift für Achtung */
  --farbe-neu: var(--grund-bernstein-200); /* Kurzes Aufleuchten, wenn sich etwas geändert hat */
  --farbe-gefahr: var(--grund-rot-700); /* Sicherheit, dringend, AUS/Pause – Caravan-Wendt Rot */
  --farbe-gefahr-hover: var(--grund-rot-900); /* Gefahr-Knopf unter der Maus */
  --farbe-gefahr-hell: var(--grund-rot-50); /* Hintergrund Gefahr-Hinweis */
  --farbe-gefahr-text: var(--grund-rot-700); /* Rote Schrift auf hellem Grund */
  --farbe-ki: var(--grund-lila-700); /* Alles, was die KI tut (Überlauf, Vorschläge) */
  --farbe-ki-hell: var(--grund-lila-50); /* Hintergrund KI-Bereich */
  --farbe-aus-flaeche: var(--grund-grau-100); /* Deaktivierter Knopf */
  --farbe-aus-rand: var(--grund-grau-300); /* Rand deaktivierter Knopf */

  /* schrift */
  --schrift-familie: Signika, "Segoe UI", system-ui, -apple-system, sans-serif; /* Hausschrift Caravan-Wendt (SIL Open Font License) */
  --schrift-gewicht-normal: 400;
  --schrift-gewicht-halbfett: 600;
  --schrift-gewicht-fett: 700;
  --schrift-groesse-mini: 14px; /* Nur Backoffice-Tabellen – nie im Dashboard */
  --schrift-groesse-klein: 15px; /* Kleinste Schrift im Dashboard */
  --schrift-groesse-basis: 17px; /* Grundtext */
  --schrift-groesse-gross: 20px;
  --schrift-groesse-titel-3: 24px;
  --schrift-groesse-titel-2: 28px;
  --schrift-groesse-titel-1: 34px;
  --schrift-groesse-anzeige: 44px;
  --schrift-zeile-eng: 1.15;
  --schrift-zeile-titel: 1.25;
  --schrift-zeile-text: 1.5;
  --schrift-laufweite-etikett: 0.07em;

  /* abstand */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 20px;
  --abstand-6: 24px;
  --abstand-8: 32px;
  --abstand-10: 40px;
  --abstand-12: 48px;

  /* radius */
  --radius-klein: 8px; /* Kleine Knöpfe, Eingabefelder, Pillen-Ecken */
  --radius-mittel: 12px; /* Knöpfe, Karten */
  --radius-gross: 16px; /* Jetzt-Kasten, Seitenspalten, Mitte */
  --radius-voll: 999px; /* Pillen, Zähler, Status */

  /* linie */
  --linie-duenn: 1px; /* Kartenrand, Trennlinie */
  --linie-normal: 2px; /* Knopfrand, Eingabefeld, Warnungen */
  --linie-stark: 3px; /* Jetzt-Kasten, Karte 'dran' */
  --linie-fokus-breite: 3px;
  --linie-fokus-abstand: 2px;

  /* hoehe */
  --hoehe-knopf-gross: 64px; /* Knöpfe in der Mitte des Dashboards */
  --hoehe-knopf: 48px; /* Standard – kleinste Größe im Dashboard */
  --hoehe-knopf-klein: 40px; /* Nur Backoffice und Tabellen */
  --hoehe-feld: 48px;
  --hoehe-logo: 44px; /* Logo in der Kopfleiste */

  /* schatten */
  --schatten-karte: 0 1px 2px rgba(38, 59, 80, 0.08);
  --schatten-hervor: 0 6px 22px rgba(0, 110, 173, 0.16); /* Karte, die gerade dran ist */
  --schatten-schwebend: 0 12px 32px rgba(38, 59, 80, 0.18); /* Dialoge und Menüs */

  /* bewegung */
  --bewegung-kurz: 150ms; /* Hover, Farbwechsel */
  --bewegung-mittel: 300ms; /* Auf- und Zuklappen */
  --bewegung-puls: 1200ms; /* Klingeln */
  --bewegung-hinweis: 2400ms; /* Aufleuchten bei Änderung */
}