/* Agency OS — Design-Tokens an einer Stelle.

   Warum getrennt von `style.css`: die Tokens sind die *Bedeutung* (Farbe, Abstand,
   Größe), `style.css` ist die *Anwendung*. Wer das Aussehen ändern will, ändert
   hier — und muss nicht in 800 Zeilen Regelwerk suchen.

   Die Akzentfarbe ist bewusst dieselbe Familie wie in den Nachbardiensten: alle
   Werkzeuge sollen als ein Haus erkennbar sein.
*/
:root {
  --farbe-grund: #0E1013;
  --farbe-flaeche: #15181E;
  --farbe-flaeche-2: #1B1F27;
  --farbe-rand: #262B35;
  --farbe-rand-hell: #333A47;

  --farbe-text: #E8EAF0;
  --farbe-text-leise: #9BA3B4;
  --farbe-text-still: #6E7686;

  --farbe-akzent: #F1204A;
  --farbe-akzent-hell: #FF5573;
  --farbe-akzent-still: rgba(241, 32, 74, 0.14);

  --farbe-ok: #2FBF71;
  --farbe-warn: #E8A33D;
  --farbe-fehler: #F1204A;
  --farbe-info: #4C8DF6;

  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;
  --abstand-7: 48px;

  --radius-klein: 6px;
  --radius: 10px;
  --radius-gross: 16px;

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --groesse-klein: 12.5px;
  --groesse: 14px;
  --groesse-gross: 16px;
  --groesse-titel: 20px;
  --groesse-hero: 30px;

  --schatten: 0 10px 30px rgba(0, 0, 0, 0.45);
  --schatten-klein: 0 2px 8px rgba(0, 0, 0, 0.35);
  --ring: 0 0 0 3px rgba(241, 32, 74, 0.35);
}

/* Helle Fassung: dieselben Namen, andere Werte — die Oberfläche muss davon
   nichts wissen. */
@media (prefers-color-scheme: light) {
  :root {
    --farbe-grund: #F4F5F7;
    --farbe-flaeche: #FFFFFF;
    --farbe-flaeche-2: #F0F1F4;
    --farbe-rand: #DDE0E6;
    --farbe-rand-hell: #C8CCD6;
    --farbe-text: #14171D;
    --farbe-text-leise: #565D6B;
    --farbe-text-still: #7A8291;
    --schatten: 0 10px 30px rgba(20, 23, 29, 0.12);
    --schatten-klein: 0 2px 8px rgba(20, 23, 29, 0.08);
  }
}