/* Farbsatz - die EINZIGE Datei mit Farbwerten (docs/oberflaeche.md
   Abschnitt 2). Jeder Wert ist eine CSS-Variable mit einem Namen nach
   Bedeutung; Vorlagen und Komponenten (triiga.css) nutzen nur diese Namen,
   nie einen Farbwert. Hell unter :root, dunkel unter prefers-color-scheme;
   nichts wird gespeichert. */

:root {
  color-scheme: light dark;

  --farbe-flaeche: #FFFFFF;       /* Seitenhintergrund */
  --farbe-flaeche-2: #F7F7F8;     /* Karten, Detailspalte, markierte Zeile */
  --farbe-text: #080809;          /* Haupttext */
  --farbe-text-leise: #6B6B73;    /* Daten, Hinweise, Spaltenkoepfe */
  --farbe-linie: #E4E4E7;         /* Trennlinien (nur Zier) */
  --farbe-feldrand: #8A8A93;      /* Rand von Eingabefeldern */
  --farbe-akzent: #D23B3A;        /* der eine wichtige Knopf */
  --farbe-akzent-schrift: #FFFFFF; /* Schrift auf dem Akzent */
  --farbe-marke: #EC504F;         /* nur Logo und Zier, nie Text */
  --farbe-erfolg: #15803D;        /* Haekchen bei fertig (immer mit Text) */
  --farbe-fehler: #B42318;        /* Warnzeichen + Fehlertext */
  --farbe-fokus: #080809;         /* Fokusring */
  --farbe-schleier-blatt: rgba(8, 8, 9, 0.28); /* Abdunkelung der Liste unter dem offenen Firmenblatt (Issue 105) */
  --farbe-schatten-blatt: rgba(8, 8, 9, 0.24); /* weicher Schatten des offenen Firmenblatts (Issue 105) */
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --farbe-flaeche: #0F0F10;
    --farbe-flaeche-2: #1C1C1E;
    --farbe-text: #F2F2F3;
    --farbe-text-leise: #A1A1A6;
    --farbe-linie: #2C2C2E;
    --farbe-feldrand: #76767E;
    --farbe-akzent: #D23B3A;
    --farbe-akzent-schrift: #FFFFFF;
    --farbe-marke: #EC504F;
    --farbe-erfolg: #4ADE80;
    --farbe-fehler: #F87171;
    --farbe-fokus: #F2F2F3;
    --farbe-schleier-blatt: rgba(0, 0, 0, 0.4);
    --farbe-schatten-blatt: rgba(0, 0, 0, 0.36);
  }
}