/*
 * Lumen Layout - Design-Tokens
 * Zentrale Custom Properties (Farben, Abstände, Radien, Schatten, Typografie).
 * Werte abgeleitet aus dem Design-Prototyp (tools_layoutentwurf, Kufer Corporate
 * Design: kurse.html + assets/app.css).
 */
:root {
  /* Markenfarben (Kufer Teal) */
  --teal: #01a5a9;
  --teal-d: #017073;
  --teal-soft: #e6f6f6;

  /* Fokusring: dunkles Teal, damit der Ring auch auf --bg >= 3:1 erreicht
     (WCAG 1.4.11; --teal läge dort nur bei ~2.8:1). Alle outline-Regeln
     nutzen diesen Token. */
  --focus-ring: var(--teal-d);

  /* Akzent (Orange); --orange nur für Flächen/Akzente (3:1 auf Weiß),
     für Text auf Weiß --orange-d verwenden (5.2:1, WCAG AA) */
  --orange: #e8743b;
  --orange-d: #c2410c;
  --orange-soft: #fceee6;

  /* Text / Tinten. --ink-3 ist die gedaempfteste Tinte (Meta-Zeilen, Labels,
     Fusszeile). Auf --bg muss sie >= 4.5:1 erreichen (WCAG 1.4.3); das fruehere
     #6b7780 lag dort nur bei 4.26:1. #66707a bringt ~4.7:1 auf --bg (und mehr
     auf Weiss) bei praktisch unveraenderter Optik. */
  --ink: #1b2a2e;
  --ink-2: #516068;
  --ink-3: #66707a;

  /* Gesperrte (inaktive) Bedienelemente - neutrale Grundfassung. Varianten mit
     eigener Farbe überschreiben sie (siehe components/button.css).
     WCAG nimmt inaktive Bedienelemente von 1.4.3/1.4.6/1.4.11 ausdrücklich aus
     ("inactive user interface component"); angestrebt wird trotzdem ein lesbares
     Zielband von 3,5-4,5:1 - deutlich schwächer als jeder aktive Zustand (der
     aktive btn-primary liegt bei 5,89:1), aber ohne Rätselraten.
     --gesperrt-text auf --gesperrt-flaeche ergibt 4,3:1. */
  --gesperrt-flaeche: #dfe2e4;
  --gesperrt-rand: #bfc7cc;
  --gesperrt-text: #60696f;

  /* Linien / Flächen */
  --line: #e6eaec;
  --line-2: #eef1f2;
  --bg: #f5f7f7;
  --card: #ffffff;

  /* Statusfarben; --green nur für Flächen/Akzente (3.3:1 auf Weiß),
     für Text auf Weiß --green-d verwenden (5:1, WCAG AA) */
  --green: #16a34a;
  --green-d: #15803d;
  --green-bg: #e7f6ec;
  --amber: #e0890b;
  /* --amber ist nur für Flächen/Akzente (auf Weiß ~2.6:1). Für Text auf Weiß bzw.
     auf --amber-bg --amber-d verwenden (~5:1 auf --amber-bg, WCAG AA). */
  --amber-d: #a15409;
  --amber-bg: #fcf1dc;
  --red: #dc2626;
  /* --red nur für Flächen/Akzente (4.8:1 auf Weiß); für Text auf --red-bg
     --red-d verwenden (~5.5:1, WCAG AA). */
  --red-d: #b91c1c;
  --red-bg: #fceaea;
  /* Violett: "anderer Weg" (Pill-Typ alternative, z. B. Warteliste). Die uebrigen
     Ampelfarben waren belegt; violett hat keine Ampelbedeutung und passt damit zu
     einem Zustand, der weder Warnung noch Erfolg ist.
     --violet-d auf --violet-bg erreicht 6,0:1 (WCAG AA verlangt 4,5:1). */
  --violet: #7c3aed;
  --violet-d: #6d28d9;
  --violet-bg: #f0eafd;
  --blue: #2563eb;
  --blue-d: #1d4ed8;
  --blue-bg: #e8effd;

  /* Leichte Statusflächen und passende Kachelränder. Aufgehellte Fassungen der
     -bg-Töne: sie tragen ganze Kacheln in Rastern (Kurstag-Kalender), wo --amber-bg
     und --green-bg bei einem wöchentlichen Rhythmus zu Spalten verschmelzen. */
  --amber-bg-2: #fdf7ec;
  --amber-rand: #f2e2c4;
  --green-bg-2: #f1f9f4;
  --green-rand: #cfe7d9;

  /* Aufgehelltes Gruen fuer Statusmarken auf dunklem Grund - auf --teal-d bleibt
     --green-d unlesbar */
  --green-hell: #6ee7a0;

  /* Überlagerter Bereich zweier Raumbelegungen im Belegungsplan. Wird NUR als
     schmaler Streifen am Balkenrand benutzt, nicht als Fläche unter dem Text -
     als Füllung fiele der Kontrast des Balkentexts unter 4,5:1. */
  --rr-ueberschneidung: rgba(220, 38, 38, 0.55);

  /* Fläche eines gesperrten, nicht bedienbaren Elements (zwischen --line-2 und --bg) */
  --neutral-bg: #f4f6f7;

  /* Maße. --rail-open in rem, damit die Navigationsleiste mit der Schriftgröße
     wächst/schrumpft (bei großem Font mehr Platz für die Beschriftung). */
  --rail: 72px;
  --rail-open: 15.75rem;
  /* Höhe der sticky Topbar - als Offset für weitere sticky Elemente darunter.
     Mobil etwas kleiner (siehe layout/topbar.css). */
  --topbar-h: 63px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 40, 44, 0.04), 0 4px 16px rgba(16, 40, 44, 0.05);

  /* Typografie - Schriftgrößen in rem, damit sie der im Browser eingestellten
     Standard-Schriftgröße folgen (Barrierefreiheit, WCAG 1.4.4). Die Wurzel (html)
     bleibt bewusst ohne feste font-size = Browser-Standard (i. d. R. 16px).
     0.875rem entspricht 14px bei 16px-Standard. */
  --font-sans: "Roboto", "Calibri", system-ui, -apple-system, "Segoe UI", helvetica, arial, sans-serif;
  --fs-base: 0.875rem;
  --lh-base: 1.45;
}