/*
  Design-Variablen
  Hier stehen alle Farben, Schriften, Abstände und Rundungen an einem Ort.
  Für Designänderungen reicht es meist, nur diese Datei anzupassen.
*/

:root {
  /* Farben */
  --color-bg: #F4F4F2;          /* Hintergrund der App */
  --color-surface: #FFFFFF;     /* Karten, Leisten, Dialoge */
  --color-border: #D2D2CE;      /* Linien und Rahmen */
  --color-text: #1F1F1F;        /* Haupttext */
  --color-text-muted: #5C5C5C;  /* Nebentext */
  --color-accent: #2F5BEA;      /* Buttons, aktive Filter */
  --color-on-accent: #FFFFFF;   /* Text auf Akzentfarbe */
  --color-warning-bg: #FFF4E5;  /* „Läuft bald ab“ */
  --color-warning: #9A3412;

  /* Schrift */
  --font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-s: 13px;
  --font-size-m: 15px;
  --font-size-l: 22px;
  --font-size-xl: 40px;

  /* Abstände */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 48px;

  /* Rundungen */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
}