/* Design-Tokens (ADR-0013, F5 = durchgängig poliert).
   Vereins-Akzent via --ari-akzent-h/-s/-l instanzweit konfigurierbar. */
:root {
  /* Farbe */
  --ari-akzent-h: 210;
  --ari-akzent-s: 70%;
  --ari-akzent-l: 42%;
  --ari-akzent: hsl(var(--ari-akzent-h) var(--ari-akzent-s) var(--ari-akzent-l));
  --ari-akzent-hover: hsl(var(--ari-akzent-h) var(--ari-akzent-s) calc(var(--ari-akzent-l) - 6%));
  --ari-akzent-kontrast: #ffffff;

  --ari-flaeche: #ffffff;
  --ari-flaeche-2: #f4f5f7;
  --ari-text: #1a1d21;
  --ari-text-2: #5c636e;
  --ari-rand: #d4d8de;
  --ari-fehler: #b3261e;
  --ari-erfolg: #1e7d3c;
  --ari-warnung: #9a6700;
  --ari-fokus: hsl(var(--ari-akzent-h) var(--ari-akzent-s) 55% / 0.45);

  /* Typografie */
  --ari-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ari-font-groesse: 1rem;
  --ari-font-klein: 0.875rem;
  --ari-font-gross: 1.25rem;
  --ari-font-titel: 1.5rem;

  /* Abstände und Formen */
  --ari-abstand-1: 0.25rem;
  --ari-abstand-2: 0.5rem;
  --ari-abstand-3: 1rem;
  --ari-abstand-4: 1.5rem;
  --ari-abstand-5: 2.5rem;
  --ari-radius: 8px;
  --ari-radius-klein: 4px;
  --ari-schatten: 0 1px 3px rgb(0 0 0 / 0.12);
  --ari-schatten-hoch: 0 6px 24px rgb(0 0 0 / 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ari-flaeche: #17191c;
    --ari-flaeche-2: #212429;
    --ari-text: #e8eaed;
    --ari-text-2: #9aa2ad;
    --ari-rand: #3a3f46;
    --ari-akzent-l: 58%;
    --ari-akzent-kontrast: #0d1013;
  }
}

body {
  margin: 0;
  font-family: var(--ari-font);
  font-size: var(--ari-font-groesse);
  color: var(--ari-text);
  background: var(--ari-flaeche-2);
}