/*
 * Theme „Ellerhoop“ (Theme 01) – nach ellerhoop.de, betrachtet am 27.09.2026.
 * Nur Design-Tokens: Ein weiteres Theme legt einen Ordner themes/<name>/ mit eigener tokens.css an
 * und wird per Konfiguration „theme“ gewählt. app.css verwendet ausschließlich diese Variablen.
 * Kontrastwerte siehe docs/annahmen.md (Nr. 10).
 */
@font-face { font-family: "Red Hat Text"; src: url("/fonts/red-hat-text/RedHatText-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("/fonts/red-hat-text/RedHatText-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("/fonts/red-hat-text/RedHatText-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("/fonts/red-hat-text/RedHatText-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Marke */
  --brand-dark: #557c2d;        /* Überschriften, Hauptschaltflächen (Weiß darauf 4,9 : 1) */
  --brand-text: #4d7029;        /* grüne Schrift auf hellen Flächen (≥ 5 : 1) */
  --brand-light: #b3cf44;       /* Akzente, Punkte, Rahmen – nie weiße Schrift darauf */
  --brand-tint: #eef3dc;        /* aktive Navigation, „bestätigt“-Fläche */
  --on-brand: #ffffff;

  /* Flächen und Text */
  --surface-base: #ffffff;
  --surface-muted: #f4f4f4;
  --border: #d9d9d6;
  --text: #333333;
  --text-muted: #666666;

  /* Status (immer zusätzlich mit Text/Symbol, nie nur Farbe) */
  --status-ok-bg: var(--brand-tint);
  --status-ok-fg: var(--brand-text);
  --status-pending-bg: #f8ecd6;
  --status-pending-fg: #7a5000;
  --status-danger-bg: #f8e1de;
  --status-danger-fg: #9b2c20;
  --status-neutral-bg: var(--surface-muted);
  --status-neutral-fg: #555555;

  /* Schrift */
  --font-body: "Red Hat Text", sans-serif;
  --font-size: 1rem;
  --line-height: 1.5;

  /* Abstände und Formen */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --radius: 8px;
  --radius-pill: 999px;
  --focus: 3px solid #1f5fbf;
  --content-width: 76rem;
  --sidebar-width: 14rem;
}