/* Design-Tokens: alle Farben, Schriften und Abstände an einem Ort (siehe SPEC Abschnitt 5) */

:root {
  --grund: #F2F1EC;
  --text: #1E2422;
  --gedaempft: #5A635C;
  --haupt: #00675A;
  --auf-haupt: #FFFFFF;
  --akzent-text: #6E5C2A;
  --akzent-grund: rgba(203, 181, 123, 0.30);
  --warnung: #7A2E3A;
  --warnung-bogen: #9E3B4A;
  --linie: rgba(30, 36, 34, 0.10);
  --spur: rgba(30, 36, 34, 0.08);
  --flaeche-a: #9CC7B6;
  --flaeche-b: #CBB57B;
  --karte: rgba(255, 255, 255, 0.55);
  --karte-rand: rgba(255, 255, 255, 0.75);
  --karte-fest: #F8F8F4;
  --blur: 18px;

  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --radius-gross: 22px;
  --radius: 16px;
  --radius-klein: 12px;
  --abstand: 16px;
  --rand: 20px;
  --tipp: 44px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) {
    --grund: #0B1A1A;
    --text: #F2F1EC;
    --gedaempft: #A3B1AC;
    --haupt: #5FC2B0;
    --auf-haupt: #0B1A1A;
    --akzent-text: #9FE0D2;
    --akzent-grund: rgba(95, 194, 176, 0.16);
    --warnung: #8C3A47;
    --warnung-bogen: #E08E9B;
    --linie: rgba(242, 241, 236, 0.12);
    --spur: rgba(242, 241, 236, 0.10);
    --flaeche-a: #0F5A55;
    --flaeche-b: #2C3729;
    --karte: rgba(255, 255, 255, 0.06);
    --karte-rand: rgba(255, 255, 255, 0.10);
    --karte-fest: #132826;
  }
}

:root[data-darstellung="dunkel"] {
  --grund: #0B1A1A;
  --text: #F2F1EC;
  --gedaempft: #A3B1AC;
  --haupt: #5FC2B0;
  --auf-haupt: #0B1A1A;
  --akzent-text: #9FE0D2;
  --akzent-grund: rgba(95, 194, 176, 0.16);
  --warnung: #8C3A47;
  --warnung-bogen: #E08E9B;
  --linie: rgba(242, 241, 236, 0.12);
  --spur: rgba(242, 241, 236, 0.10);
  --flaeche-a: #0F5A55;
  --flaeche-b: #2C3729;
  --karte: rgba(255, 255, 255, 0.06);
  --karte-rand: rgba(255, 255, 255, 0.10);
  --karte-fest: #132826;
}