/* Die Farbtafel — für alle Anwendungen unter tools.upperattic.at.
 *
 * Hier stehen die Farben, Maße und Schriften, die keine Anwendung für sich
 * allein hat. Wer eine davon in einer App-Datei noch einmal hinschreibt,
 * schafft eine zweite Wahrheit, die beim nächsten Anstrich zurückbleibt.
 *
 * Zwei Fassungen, eine Gestaltung: Die dunkle tauscht allein die Variablen
 * aus. Welche gilt, sagt `data-thema` an der Wurzel; die Anwendung setzt es
 * beim Start und löst dabei „automatisch“ anhand der Einstellung des
 * Betriebssystems auf. Deshalb steht die dunkle Tafel hier nur einmal und
 * nicht ein zweites Mal in einer Medienabfrage.
 *
 * Die Anwendung benennt die Töne für ihren Zweck — `--personen`,
 * `--empfaenger`, `--firma` —, sie erfindet sie nicht. Ein `#rrggbb` in einer
 * App-Datei ist deshalb fast immer ein Fehler; die Ausnahme sind Farben, die
 * wirklich nur einmal vorkommen.
 */

/* --------------------------------------------------------------- Die Tafel */

/* `.tafel--hell` trägt dieselben Werte noch einmal — für einen Bereich, der
   hell bleiben muss, auch wenn die Anwendung dunkel steht. Das ist kein
   zweiter Block, sondern derselbe unter zwei Namen: Eine am Nachfahren
   gesetzte Variable schlägt die geerbte, gleich welcher Spezifität. Wer den
   Bereich so auszeichnet, holt sich `color-scheme` und die Schriftfarbe mit
   einer eigenen Zeile zurück — beides sind keine Variablen. */
:root,
.tafel--hell {
  --schrift: "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-text: Arial, Helvetica, sans-serif;
  --schrift-fest: "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  --grund: #f4f6f8;
  --flaeche: #ffffff;
  /* Eingabefelder liegen tiefer als die Karte, Knöpfe auf ihr. */
  --eingabe-grund: #ffffff;
  --linie: #d6dce2;
  --linie-stark: #b3bcc6;
  --text: #1c2530;
  --text-leise: #5a6672;
  /* Was auf einer gefüllten Fläche steht — Schrift auf einem der Töne. */
  --auf-farbe: #ffffff;

  --fehler: #b3261e;
  --warnung: #8a5a00;
  --merke: #1f5c8b;

  /* Die Töne. Sie sind gegen `--grund` und gegen `--flaeche` auf Lesbarkeit
     geprüft und untereinander auch für Farbfehlsichtige unterscheidbar. Blau
     führt: Wo eine Anwendung nur eine Farbe braucht, ist es diese. */
  --ton-blau: #2563a8;
  --ton-petrol: #0f7b7b;
  --ton-violett: #6b4bab;
  --ton-ocker: #8a5a00;
  --ton-gruen: #1f7a3d;
  --ton-magenta: #a13a7a;
  --ton-rot: #a4453c;
  /* Ohne eigenen Ton: für das, was neben den anderen steht und nicht
     mit ihnen um Aufmerksamkeit wirbt. */
  --ton-grau: #55606d;

  --primaer: var(--ton-blau);

  /* Der Ton **dieser** Anwendung — der ihres Sachgebiets auf der Übersicht,
     derselbe, den ihre `icon.svg` trägt: violett für die Rechtsprechung
     (`fr`, `uz`, `gh`, `pseudo`), blau für die Justizverwaltung (`ggg`,
     `gsl`, `rira`), petrol für `wissen`. Die Kopfleiste färbt Marke und Titel
     damit; alles übrige bleibt bei `--primaer`.

     Er steht hier mit Blau als Vorgabe, und jede Anwendung, die einen anderen
     führt, setzt ihn in ihrer eigenen CSS in einer einzigen Zeile um. Vor
     dieser Zeile trug `fr` ein violettes Zeichen neben einem blauen Titel,
     und `gh` behalf sich mit einer Sonderregel auf `.kopf__zeichen`. */
  --ton-app: var(--ton-blau);

  --rundung: 8px;
  --schatten: 0 1px 2px rgb(16 24 32 / 8%), 0 2px 8px rgb(16 24 32 / 4%);
  --schatten-schwebend: 0 4px 16px rgb(16 24 32 / 16%);
  --schatten-schirm: 0 12px 48px rgb(16 24 32 / 24%);
  --schleier: rgb(16 24 32 / 45%);

  /* Tippflächen: nie kleiner, auch nicht auf dem Bildschirm. */
  --tippflaeche: 40px;
}

/* Rollbalken, Auswahllisten und der Grund des Fensters folgen mit. Solange
   die Anwendung noch nicht gewählt hat, gilt die Einstellung des Systems. */
:root { color-scheme: light dark; }
:root[data-thema="hell"] { color-scheme: light; }
:root[data-thema="dunkel"] { color-scheme: dark; }

/* Ein hell gehaltener Bereich: Rollbalken und die geerbte Schriftfarbe folgen
   den Variablen nicht von selbst. */
.tafel--hell { color-scheme: light; color: var(--text); }

/* Bis das Attribut steht, ist nichts zu zeigen: Der Rumpf ist ohnehin leer,
   und ein gemalter heller Grund blitzte auf einem dunklen System kurz auf.
   Ohne den Rumpf färbt der Browser den Fensterhintergrund nach
   `color-scheme` — also von vornherein richtig. */
:root:not([data-thema]) body { visibility: hidden; }

/* ------------------------------------------------------------ Im Dunkeln */

:root[data-thema="dunkel"] {
  --grund: #14181e;
  --flaeche: #1d222a;
  --eingabe-grund: #161a21;
  --linie: #313945;
  --linie-stark: #5f6b78;
  --text: #e7ebf0;
  --text-leise: #a6b0bc;
  /* Auf hellen Flächen steht dunkle Schrift — auch im Dunkeln. */
  --auf-farbe: #10141a;

  /* Aufgehellt: Die dunklen Töne tragen auf dunklem Grund nicht. */
  --fehler: #f2857d;
  --warnung: #e3a339;
  --merke: #7cb8e6;

  --ton-blau: #7bb0ea;
  --ton-petrol: #46bdbd;
  --ton-violett: #b39bea;
  --ton-ocker: #e3a339;
  --ton-gruen: #5fc183;
  --ton-magenta: #e58cc0;
  --ton-rot: #ec8a80;
  --ton-grau: #9aa5b2;

  /* Ein Schatten aus hellem Grau ist auf dunklem Grund keiner. */
  --schatten: 0 1px 2px rgb(0 0 0 / 40%), 0 2px 8px rgb(0 0 0 / 24%);
  --schatten-schwebend: 0 4px 16px rgb(0 0 0 / 55%);
  --schatten-schirm: 0 12px 48px rgb(0 0 0 / 70%);
  --schleier: rgb(0 0 0 / 62%);
}