/* ERZEUGT AUS docs/entwurf/systemsheet.html — NICHT VON HAND AENDERN.
*
* node scripts/system-aus-sheet.mjs schreibt diese Datei
* node scripts/system-aus-sheet.mjs --pruefen meldet Drift
* node scripts/system-sync-test.mjs haengt in npm run check
*
* Warum die Umleitung ueber ein Blatt: dort steht zu jedem Wert seine
* Begruendung UND seine Nachrechnung. Das Blatt faerbt ein Farbpaar rot,
* sobald sein Kontrast reisst — eine CSS-Datei kann das nicht.
*/
/* === WILDTRACK SYSTEMTOKENS — erzeugt nach public/system.css ============ */
:root{
/* ---- 1 GRUND UND FLAECHE ------------------------------------------------
Drei Stufen, mehr nicht. Vier waeren nicht mehr unterscheidbar und laden
dazu ein, sich eine vierte auszudenken statt eine der drei zu benutzen.
`--grund` ist die Seite. `--flaeche` ist alles, was darauf liegt
(Kacheln, Bloecke, Listenzeilen). `--flaeche-2` ist das, was auf einer
Flaeche liegt — Eingabefelder, Reiter, Innenkanten.
Die Abstufung ist bewusst KLEIN (je rund 6 Helligkeitspunkte). Auf einem
Handy im Freien geht mehr Unterschied ohnehin verloren; die Trennung
traegt die Kante, nicht die Helligkeit. */
--grund: #080b09;
--flaeche: #10150f;
--flaeche-2: #19201a;
--flaeche-3: #232b24;
/* Die Kante trennt, wo die Helligkeit es nicht tut. */
--kante: rgba(236, 233, 221, .10);
--kante-satt: rgba(236, 233, 221, .20);
--kante-haar: rgba(236, 233, 221, .06);
/* ---- 2 SCHRIFT ----------------------------------------------------------
Drei Stufen, jede mit einer Aufgabe und einem nachgerechneten Kontrast
gegen `--flaeche`. Die Zahlen stehen im Blatt darunter und werden dort
bei jedem Oeffnen neu gerechnet — nicht abgeschrieben.
--text Fliesstext, Namen, Zahlen, alles Lesbare
--text-2 Beiwerk: Einheiten, Zeitangaben, Erklaerzeilen
--text-3 Versalien-Etiketten. NUR fuer Etiketten, nie fuer Saetze:
sie sind kurz, gesperrt und stehen nie allein fuer eine
Auskunft. Deshalb reicht dort die 3:1-Grenze fuer grossen
Text — bei Fliesstext waere derselbe Wert zu schwach.
`--text-3` hiess in der App `--ink-3` und war `#6b716a`: 4,12 : 1 auf
Papier und 3,90 : 1 auf Nacht — auf BEIDEN zu wenig. Es ist der
meistgenannte Einzelbefund des Befundlaufs (33 Nennungen).
WARUM `--text` UND NICHT `--ink`: `styles.css` fuehrt `--ink` seit jeher
als DUNKLE Schrift auf hellem Papier. Beide Dateien duerfen denselben
Namen nicht gegensaetzlich belegen — die spaeter geladene gewinnt still,
und niemand sieht, welche das gerade ist. Das Nachtregister bildet die
alten Namen unten auf diese ab. */
--text: #ece9dd;
--text-2: #a3aa9f;
--text-3: #838d82;
/* Schrift auf einer AKZENTFLAECHE. Ein heller Knopf traegt dunkle Schrift,
und die darf nicht `--grund` sein: auf Limette wirkt reines Schwarz hart
und flimmert an den Kanten. */
--auf-akzent: #0d1410;
/* ---- 3 AKZENTE: eine Farbe, eine Aufgabe -------------------------------
Wer eine fuenfte braucht, hat eine Aufgabe zu viel erfunden.
--lime Aktion. Der Knopf, den man drueckt. NUR das.
--gold Ertrag: Gems, Belohnung, Kiste.
--mint Signal: laeuft, verbunden, aktiv.
--rost Gefahr und Ablehnung.
--amber Warnung, Wartezustand, Frist laeuft.
Jede hat eine gedaempfte Fassung fuer Flaechen und Raender. Sie wird
GERECHNET (`color-mix` gegen den Grund), nicht danebengelegt — sonst
stehen bald zwei Gruentoene im System, die niemand auseinanderhalten
kann. Genau so sind die fuenf Fast-Duplikate von `--ink-3` entstanden. */
--lime: #c9ff42;
--gold: #f0c04a;
--mint: #77f2b1;
--rost: #ff7367;
--amber: #ffd06a;
--lime-flaeche: color-mix(in srgb, var(--lime) 14%, var(--flaeche));
--gold-flaeche: color-mix(in srgb, var(--gold) 14%, var(--flaeche));
--mint-flaeche: color-mix(in srgb, var(--mint) 14%, var(--flaeche));
--rost-flaeche: color-mix(in srgb, var(--rost) 14%, var(--flaeche));
--amber-flaeche: color-mix(in srgb, var(--amber) 14%, var(--flaeche));
--lime-kante: color-mix(in srgb, var(--lime) 42%, transparent);
--gold-kante: color-mix(in srgb, var(--gold) 42%, transparent);
--mint-kante: color-mix(in srgb, var(--mint) 42%, transparent);
--rost-kante: color-mix(in srgb, var(--rost) 42%, transparent);
--amber-kante: color-mix(in srgb, var(--amber) 42%, transparent);
/* ---- 4 ABSTAENDE: 4er-Raster, keine Zwischenwerte ----------------------
Beliebige Zwischenwerte erzeugen genau die leichte Unordnung, die ein
Layout billig wirken laesst — und sie sind einzeln nie falsch genug, um
aufzufallen. */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
/* ---- 5 RADIEN: drei, und der kleinste ist NICHT null -------------------
`--r-kante` hiess bis 05.08.2026 `--r-sharp: 0` und war buchstaeblich
scharfkantig. Neben der Karte — die 3,3 % Radius traegt — sah jede Kachel
wie ein Formularfeld aus. 2 px runden nichts, aber die Kante hoert auf zu
schneiden. Umbenannt statt umgewertet: ein Name, der `0` verspricht und
2 px liefert, ist die stille Falschangabe, die hier schon Tage gekostet
hat. */
--r-kante: 2px;
--r-soft: 3px;
--r-card: 3px;
--r-rund: 999px;
/* ---- 6 TYPOGRAFIE ------------------------------------------------------
Sechs Stufen. `--t-micro` traegt ausschliesslich Versalien-Etiketten und
ist deshalb so klein — als Fliesstext waere er unlesbar. */
--t-micro: .58rem;
--t-small: .74rem;
--t-body: .88rem;
--t-lead: 1.05rem;
--t-title: 1.5rem;
--t-display:2.4rem;
/* Sperrung fuer Versalien. Sie traegt einen grossen Teil der Anmutung und
muss ueberall gleich sein. */
--track-label: .16em;
/* ---- 7 MASSE -----------------------------------------------------------
`--ziel-min` ist die Untergrenze, ab der ein Finger zuverlaessig trifft.
Der Befundlauf zaehlt 19 Bedienelemente darunter. */
--nav-hoehe: 68px;
--ziel-min: 44px;
/* ---- 8 SCHATTEN --------------------------------------------------------
Auf dunklem Grund traegt ein schwarzer Schatten fast nichts. Was Tiefe
macht, ist die helle OBERKANTE — Licht faellt von oben. */
--hebung: inset 0 1px 0 rgba(236,233,221,.07), 0 2px 8px rgba(0,0,0,.5);
--hebung-2: inset 0 1px 0 rgba(236,233,221,.10), 0 8px 24px rgba(0,0,0,.6);
}
/* === ENDE SYSTEMTOKENS ================================================== */