/*
 * Design-Tokens für Lerndock.
 * Alle Farben, Abstände und Radien zentral hier – nirgends sonst Hex-Werte.
 *
 * Kontrast (WCAG 2.1, geprüft per tests/kontrast.test.mjs):
 * - Pflaume, Kurs-Akzente und --text-leise tragen Text (≥ 4,5 : 1 auf Weiß und Hintergrund).
 * - Salbei und Lavendel sind NUR Flächen-/Schmuckfarben, nie Textfarbe
 *   (Salbei 2,4 : 1, Lavendel 1,7 : 1 auf Weiß). Für Text in Grün: --salbei-text.
 */
:root {
  /* Markenfarben */
  --pflaume: #4B2E5C;
  --pflaume-dunkel: #3A2348;
  --salbei: #8FAE96;
  --salbei-text: #4A6B52;
  --lavendel: #C9BFE3;
  --lavendel-hell: #E9E4F3;
  --hintergrund: #F5F2F7;
  --flaeche: #FFFFFF;

  /* Text */
  --text: #2A1F31;
  --text-leise: #5E5368;
  --text-auf-farbe: #FFFFFF;
  --linie: #DDD5E6;

  /*
   * Kurs-Akzente: aus Pflaume/Salbei abgeleitet, kühle Töne,
   * kein Gelb/Rot/Orange/Braun. Je Kurs eine kräftige Farbe (trägt weißen Text)
   * und eine helle Tönung (Fläche, darauf Text in der kräftigen Farbe).
   */
  --kurs-1: #3F4FA0; /* Indigo        – 7,4 : 1 auf Weiß */
  --kurs-1-hell: #E6E8F5;
  --kurs-2: #3D6B4F; /* Waldsalbei    – 6,2 : 1 */
  --kurs-2-hell: #E3EEE6;
  --kurs-3: #22607E; /* Seeblau       – 6,9 : 1 */
  --kurs-3-hell: #E0ECF2;
  --kurs-4: #7A3E8E; /* Beerenviolett – 7,2 : 1 */
  --kurs-4-hell: #F1E6F5;

  /* Typografie */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-klein: 0.875rem;
  --schrift-normal: 1rem;
  --schrift-gross: 1.25rem;
  --schrift-titel: 1.6rem;

  /* Abstände und Formen */
  --abstand-xs: 4px;
  --abstand-s: 8px;
  --abstand-m: 16px;
  --abstand-l: 24px;
  --abstand-xl: 32px;
  --radius: 16px;
  --radius-klein: 10px;
  --schatten: 0 6px 20px rgba(75, 46, 92, 0.10);
  --fokus: 0 0 0 3px var(--hintergrund), 0 0 0 6px var(--pflaume);

  --navigation-hoehe: 64px;
  --inhalt-breite: 720px;
}