/*
  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;         /* feine Linien */
  --color-border-strong: #BDBDB8;  /* Rahmen von Feldern und Buttons */
  --color-muted-bg: #EDEDEA;       /* Tags, aktive Navigation */
  --color-placeholder: #E4E4E0;    /* Platzhalter für Bilder */
  --color-text: #1F1F1F;           /* Haupttext */
  --color-text-soft: #3D3D3D;      /* Text in Tags */
  --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-border: #C2410C;
  --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;
}