/*
 * Design-Grundwerte (Design-Tokens)
 * ----------------------------------
 * Alle Farben, Schriftgrößen, Abstände und Rundungen stehen hier an einer Stelle.
 * Wer einen Wert ändert, ändert ihn in der ganzen Anwendung.
 * Die Farben hier sind das helle Farbschema und dienen als Rückfall. Maßgeblich sind die Werte in
 * wissen/farben.py (ausgeliefert als /farben.css): hell, dunkel, hoher Kontrast, Farbschwäche und
 * die Akzentfarbe des Amts, die die Verwaltung unter „Inhalt & Design“ wählt.
 */

:root {
  /* Farben */
  --akzent: #1D5C74;
  --akzent-dunkel: #123E4F;
  --akzent-hell: #E3EBEE;
  --auf-akzent: #FFFFFF;

  --text: #1A2230;
  --text-leise: #4F5866;
  --text-mittel: #2C3644;
  --grund: #F4F5F2;
  --flaeche: #FFFFFF;
  --flaeche-leise: #F8F9F7;
  --linie: #DADDD6;
  --linie-leise: #E6E8E3;
  --rahmen-eingabe: #7D858F;
  --neutral-hell: #ECEEEA;

  --gut-text: #1A5631;
  --gut-hell: #E4F2E8;
  --achtung-text: #7A4106;
  --achtung-hell: #FBF0E1;
  --fehler-text: #8A2A1F;
  --fehler-hell: #F6E3E1;
  --auf-fehler: #FFFFFF;
  --schatten: rgba(20, 30, 40, 0.14);
  --immer-hell: #FFFFFF;

  /* Kopfzeile in der Akzentfarbe (berechnet in wissen/farben.py, kopf_je_schema) */
  --kopf-flaeche: #1D5C74;
  --kopf-text: #FFFFFF;
  --kopf-linie: #1D5C74;
  --kopf-suche-rand: #FFFFFF;
  --kopf-hover: #184D61;
  --kopf-aktiv: #144051;

  /* Merken: gelber Stern mit dunklem Rand (Rand mindestens 3:1 Kontrast zum Hintergrund).
     Bewusst anders als Braun/Orange („Achtung“, z. B. fällige Prüfung). */
  --merken: #F7C600;
  --merken-rand: #8A6A00;
  --merken-hell: #FFF7D1;

  /* Schrift */
  --schrift: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --groesse-seitentitel: 30px;
  --groesse-abschnitt: 20px;
  --groesse-kartentitel: 17px;
  --groesse-text: 16px;
  --groesse-klein: 14px;
  --groesse-meta: 13px;

  /* Abstände (Raster in 4er-Schritten) */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;
  --abstand-7: 40px;

  /* Rundungen */
  --rund-klein: 8px;
  --rund-karte: 12px;
  --rund-voll: 999px;

  /* Bedienung: alles Anklickbare ist mindestens so groß */
  --mindestgroesse: 44px;
}

/* Abgeleitete Akzenttöne passen sich automatisch an die Akzentfarbe an,
   wenn der Browser das kann. Sonst gelten die festen Werte oben. */
@supports (color: color-mix(in srgb, red 50%, white)) {
  :root {
    --akzent-hell: color-mix(in srgb, var(--akzent) 14%, var(--flaeche));
    --akzent-dunkel: color-mix(in srgb, var(--akzent) 75%, var(--text));
  }
}