/* ===========================================================================
COLOUR (U-70) — the last layer that had two sources.
motion.css says how things move. surface.css says what they are made of.
This says what colour they are. Until now that last one was declared in
THREE places, and they had drifted exactly the way everything else in this
project drifted before it was pulled into one file:
role kids.html theme.css difference
ink #1B2A4A #06182a two different navies
muted #5C6B87 #586472 near-identical, not identical
faint #96A3BA #97a2ad near-identical, not identical
hair #EDE6DA #e6e9ed one warm, one cool
ground #FFFDF8 #fbfbfd one warm, one cool
And two outright collisions, both the `--r` bug wearing a different hat:
· `--card` was a COLOUR in the child app (#FFFFFF) and a SHADOW in
theme.css (var(--shadow-1)). Same token name, incompatible types.
· the parent dashboard carried a THIRD copy of the child palette with
DIFFERENT dark variants — so --sun-d meant #E08C00 on one page and
#B87400 on another, for the same brand colour with the same job.
THE WARM CHILD APP IS NOW A NAMED CHOICE, NOT A SECOND SYSTEM. It really
should feel warmer than a settings screen; what it should not do is get
there by owning a parallel set of neutrals nobody can compare. `.warm` is
one override of five values, declared once, with a reason. Removing it makes
the child app cool — which is also what makes U-69's open question ("is it
still warm enough?") cheap to answer in either direction.
======================================================================== */
:root{
/* LIGHT, AND ONLY LIGHT (U-79).
------------------------------------------------------------------------
There was a dark mode. Nobody asked for it. I inferred it in U-75 from a
screenshot of Apple's Account sheet that happened to be dark, decided that
"every reference we measured against was one he never sees", and built it —
then spent U-76 and U-77 fixing things that were only broken BECAUSE of it:
white pills carrying white text, a grey bar across the top, unreadable
tints. Three tickets of repair on a feature that was my own guess.
Damian, plainly: "die Anwendung ist leider immer noch dunkel."
So it is gone — all eight @media blocks, in this file and in surface.css.
`color-scheme: light` tells the browser not to darken form controls,
scrollbars and the like on a dark-mode device, which is the part that would
otherwise leak through anyway; every page carries the matching meta.
Restoring it is `git revert` of the U-79 commit, not archaeology — the same
rule U-69 set for the palette. But it should not come back without someone
asking for it. */
color-scheme: light;
/* --- the neutral ramp --------------------------------------------------
One source. These are the studio's, because they are the colder, darker
navy Apple uses for label text and because six of the seven surfaces were
already on them. */
--ink:#06182a;
--muted:#586472;
--faint:#97a2ad;
--hair:#e6e9ed;
--hair2:#eef1f4;
/* --- ground and surface ------------------------------------------------
THE GROUND MUST BE A STEP DOWN FROM THE THINGS ON IT. iOS never puts a
white card on white: its grouped background is #F2F2F7 against #FFFFFF, a
ratio of 1.116, and that separation IS the structure — it is what makes a
card look like a card rather than a rectangle drawn on nothing.
U-69 got this backwards. "Make the ground quiet" was implemented as "make
it the same as the cards", which left #FFFDF8 against #FFFFFF: 1.017,
roughly a seventh of the difference iOS uses. The doors were floating on
nothing, and that flatness is exactly what Damian saw. */
--bg:#F2F2F7; /* the ground — iOS grouped background */
--bg2:#E9E9EF; /* a step further down, for insets */
--surface:#ffffff; /* anything sitting ON the ground */
/* --- the accent --------------------------------------------------------
One. Links, focus, quiet emphasis. A second accent is how a palette
becomes a paintbox. */
--accent:#2f4a6b;
--accent-ink:#ffffff;
--accent-wash:rgba(47,74,107,.07);
--accent-line:rgba(47,74,107,.28);
/* --- meaning -----------------------------------------------------------
Green means it worked, red means it did not, amber means look at this.
They are not decoration and must never be used as one. */
--ok:#146b46;
--bad:#9f2a24;
--alert:#E0492F;
/* --- the child app's own colours ---------------------------------------
Each one NAMES something: a door, an answer, a child's avatar. They live
here rather than in kids.html because the parent dashboard shows the same
children and the same categories, and two copies is how --sun-d came to
mean two different oranges.
Every `-d` variant is the one that carries WHITE — text or a drawn shape —
so each was chosen by contrast rather than by eye. The threshold is 3:1,
what a graphical object needs; the lighter of the two candidates was taken
wherever it cleared, because darker than necessary reads as stern. */
--sun:#FFB020; --sun-d:#B87400; /* 3.79:1 — the lighter #E08C00 was only 2.65 */
--sky:#2BADF0; --sky-d:#1587C4; /* 3.97:1 */
--grass:#2FBF71; --grass-d:#1E9A56; /* 3.61:1 */
--berry:#FF5C8A; --berry-d:#E03668; /* 4.29:1 */
--grape:#8B5CF6; --grape-d:#6D3EE0; /* 6.15:1 */
--flame:#FF6B35; --flame-d:#E0631F; /* 3.52:1 — #FF6B35 carries white at only 2.84 */
/* The two answers, and the only green and red on a child's screen. */
--yes:#2FBF71;
--no:#D93A22; /* 4.59:1, the dark end the old gradient already reached */
/* Rollen, die die Nacht braucht (U-135) und die hier auf das zeigen, was
ohnehin galt — damit die Studio-Seiten sich nicht aendern. */
--raised:var(--surface);
--on-yes:#ffffff; --on-no:#ffffff;
--teal-fill:#2E6E70; --on-teal:#ffffff;
--robi-face:#ffffff; --mark-ink:#ffffff;
/* --- elevation tints ---------------------------------------------------
Kept under their old names because page rules still reference them; the
shape of depth itself is surface.css's --e-1…--e-4. */
--shadow-1:0 1px 2px rgba(6,24,42,.04);
--shadow-2:0 1px 2px rgba(6,24,42,.04), 0 12px 28px -16px rgba(6,24,42,.24);
--shadow-3:0 40px 90px -30px rgba(6,24,42,.45);
--lift:var(--shadow-2);
}
/* ===========================================================================
WARM — the child app, and the one deviation the system allows.
A nine-year-old's screen should not feel like a settings pane, and paper
that is very slightly warm is most of how that happens without a single
decoration. Five values, that is all it takes; everything else — the
accent, the meanings, the brand colours — is shared with every other
surface.
Set on . Removing the class cools the child app completely, which is
the cheapest possible way to test U-69's remaining question.
`html.warm`, NICHT `.warm` (U-147). `.warm` und die spaeteren `:root{}`-Bloecke
dieser Datei (--wash-*, --tint-*, --fill/--on-fill, --bad-solid) haben
dieselbe Spezifitaet (0,1,0) — und im Browser gewinnt dann die SPAETERE
Deklaration. --fill war auf der Elternseite deshalb seit U-88 nie Orange,
sondern das :root-Marineblau; der Cascade-Parser der Tests (css-modes.ts)
modelliert das nicht und hat Orange gemessen. Sichtbar war es als
marineblaue „Spiel oeffnen"-Pille auf orangem Papier. (0,1,1) gewinnt gegen
jeden :root-Block, egal wo er steht — dieselbe Loesung wie html.night.
======================================================================== */
html.warm{
/* U-88: DIE TINTE IST BRAUN, NICHT MEHR MARINEBLAU.
------------------------------------------------------------------------
Bis hierher war die Kinder-App ein warmer Grund mit kaltem Inhalt: ein
oranges Papier, auf dem marineblaue Schrift stand und weisse Karten lagen.
Das ist die Aufteilung eines Arbeitsgeraets, dem man Farbe untergeschoben
hat — die Waerme lag NEBEN dem, was das Kind liest, nicht darin.
Der Entwurf (design/stimmt-das-app-v2.jsx) dreht das um: die Tinte selbst
wird braun, die Karten werden warmes Papier statt Weiss. Gemessen, nicht
geschaetzt — und der Grund #FFDFB8 bleibt exakt, wie U-79 ihn nach drei
Anlaeufen festgelegt hat (dE 0,0).
ink #1B2A4A -> #3E2A16 dE 38,5 10,66:1 auf Grund · 12,95:1 auf Karte
muted #5C6B87 -> #7D6046 dE 40,7 4,54:1 auf Grund · 5,52:1 auf Karte
`--muted` wurde gegen den GRUND geloest, nicht gegen die Karte. Der Grund
ist der haertere Fall, und der Entwurfswert #937152 kam dort nur auf 3,49:1
— unter den 4,5, die Fliesstext braucht. Gegen die Karte allein zu messen
haette einen Wert durchgelassen, der auf der Haelfte der Flaechen versagt. */
--ink:#3E2A16;
--muted:#7D6046;
/* NUR fuer grosse Schrift und Formen: 3,54:1 auf dem Grund. Alles, was ein
Kind wirklich lesen muss, nimmt --muted. Der Entwurf hatte hier ein
`dim: rgba(62,42,22,.35)` mit 1,95:1 — und trug damit ausgerechnet die
Zeile auf der GESCHLOSSENEN Tuer, also den Satz, der einem Kind erklaert,
warum es gerade nicht spielen kann. Die leiseste Farbe am wichtigsten
Satz. `dim` ist deshalb ersatzlos gestrichen. */
--faint:#8B7257;
/* Als Alpha, nicht als Hex: dieselbe Linie liegt auf dem Grund UND auf der
Karte, und ein fester Wert kann nur auf einem von beiden stimmen.
1,283:1 auf dem Grund, 1,297:1 auf der Karte. */
--hair:rgba(62,42,22,.14);
--hair2:rgba(62,42,22,.07);
/* Warmes Papier statt Weiss. Trennung vom Grund 1,22:1 — iOS trennt seine
gruppierten Flaechen bei 1,116, also weiterhin eine echte Stufe und keine
Andeutung. (Der Entwurf hatte #FFF9EF fuer Kinderkarten und #FFFDF8 fuer
Elternbloecke. Zwei Kartenfarben, die niemand auseinanderhalten kann, sind
genau die Drift, gegen die es diese Datei gibt — es ist eine.) */
--surface:#FFF9EF;
/* ORANGE UND GRÜN (U-79) — and it took three attempts to get here.
Attempt one moved the ground from #FFFDF8 to #F8F3E7 and Damian said,
correctly, that it looked the same. It did: 7, 10 and 17 out of 255, both
under 7 % saturation, which the eye reads as white. I had measured the
SEPARATION from the cards and forgotten to measure the CHANGE.
Attempt two was the warm sand #F0E4CC at 15 %. Right direction, still not
the app he wanted — and then three tickets went into a DARK MODE that he had
never asked for and I had inferred from one screenshot. His answer:
"die Anwendung ist leider immer noch dunkel. ich denke hier wäre eine
Mischung aus ein helleres Orange und ein helleres Grün richtig."
So: two colours, both measured, and this time the CHANGE is measured too.
ground #FFDFB8 ΔE 11.3 from the old sand — past "obviously different",
28 % saturation, ink 11.2:1, cards separate at 1.273
band #DDEBBE ΔE 16.9 from the ground, ink 11.3:1, cards at 1.257
The band and the ground sit at nearly the same LIGHTNESS (1.012:1) and are
told apart by hue alone. That is normally the thing to fix — orange against
green is the classic red-green confusion — so it was simulated rather than
assumed: under deuteranopia the pair separates at 1.186:1, BETTER than for
typical vision, because the simulation maps the two hues to different
lightnesses. No repair needed, and now nobody has to wonder.
Flat, no gradient, and deliberately not the answer for a settings screen. */
--bg:#FFDFB8;
--bg2:#F4CFA1; /* eine Stufe tiefer, fuer Eingelassenes — 1,15:1 unter dem Grund */
/* --- TEAL: die zweite Flaechenfarbe, und sie ist eine FIGUR --------------
Hier stand `--band:#DDEBBE`, das gruene Kopfband. Es geht, und was es
ersetzt, ist der eigentliche Gewinn des Entwurfs: Robi hat jetzt einen
Koerper, und der ist tuerkis. Damit traegt eine FIGUR den zweiten Farbton
statt einer Flaeche — ein Kind, das noch nicht liest, erkennt eher
jemanden wieder als einen Streifen.
Damian hat das so entschieden: das Gruen faellt weg, das Teal uebernimmt
seine Rolle. (Zurueckholen ist ein `git revert` dieses Commits, dieselbe
Regel wie bei U-69s Palette und U-79s Dunkelmodus.)
--teal Flaeche und Robis Koerper. Traegt die Tinte mit 4,60:1, ist
also selbst eine Flaeche, auf der Text stehen darf.
--teal-d Umriss, Ohren, Fuesse — und alles Gefuellte, das helle Schrift
traegt: 5,60:1 mit --on-fill, 4,61:1 gegen den Grund.
Robis Koerper liegt bei 2,32:1 gegen den Grund und wird ABSICHTLICH nicht
nachgedunkelt. Die 3:1 gelten fuer grafische Objekte, die man verstehen
MUSS, um das Ding zu bedienen; Robis Silhouette traegt ohnehin --teal-d mit
4,61:1. Eine Figur dunkler zu machen, damit eine Regel fuer Bedienelemente
zufrieden ist, waere Messen um des Messens willen. */
--teal:#4FA3A5;
--teal-d:#2E6E70;
/* --- ORANGE: der Akzent, und warum es zwei davon gibt -------------------
Der Entwurf hat ein Orange: #F26B1D, und darauf #FFF9EF. Das sind 2,91:1
— unter den 3,0, die selbst GROSSE Schrift braucht, und der Knopf traegt
auch 17px-Text („Los"), womit 4,5 gelten. Jeder Hauptknopf der App waere
damit unlesbar gewesen.
Kein Grund, das Orange aufzugeben: es ist derselbe Fall wie --flame weiter
oben (#FF6B35 traegt Weiss nur mit 2,84:1), und die Antwort ist dieselbe
wie ueberall in dieser Datei — ein heller Ton fuer FORMEN, ein gemessener
dunkler fuer alles, was Schrift traegt. Farbton und Saettigung bleiben, nur
die Helligkeit wandert.
--action #F26B1D Formen, Marken, Zierrat. 2,39:1 gegen den Grund,
was fuer Dekoration reicht und fuer Text nicht.
--action-d #C34F0B alles Gefuellte mit Schrift darauf. 4,51:1.
(Geprueft und verworfen: die Tinte #3E2A16 AUF dem hellen #F26B1D kommt auf
4,46:1. Vier Hundertstel zu wenig — und ein Knopf, der die Regel knapp
reisst, ist genau die Sorte Ausnahme, die spaeter jemand als Praezedenzfall
zitiert.) */
--action:#F26B1D;
--action-d:#C34F0B;
/* Der starke Vollton der Kinder-App IST das Orange. `--fill` ist die Rolle
„gefuellte Hauptflaeche" (U-77), und in dieser App fuellt Orange, nicht
Marineblau. Genau ein Aufrufer in kids.html, fuenf im Elternbereich. */
--fill:#C34F0B;
--on-fill:#FFF9EF; /* 4,51:1 */
/* Ein Akzent, nicht zwei — dieselbe Regel wie im :root darueber. */
--accent:#C34F0B;
--accent-ink:#FFF9EF;
--accent-wash:rgba(195,79,11,.08);
--accent-line:rgba(195,79,11,.30);
/* --- DIE ZWEI ANTWORTEN -------------------------------------------------
Als FUELLUNG (die Knoepfe sind 22px fett, also gelten 3,0) reichen die
Werte des Entwurfs: 3,24:1 und 4,21:1 mit --on-fill darauf. Als TEXT in
normaler Groesse — die Zeile der Aufloesung — reichen sie nicht, dafuer
gibt es die -d-Variante mit 4,52:1 und 4,51:1.
WICHTIG, und es ist keine Farbfrage: die beiden Knoepfe liegen 1,30:1
auseinander, unter Deuteranopie nur noch 1,07:1. Fuer ein rotgruenblindes
Kind sind das zwei gleich helle Bloecke. Sie tragen deshalb ZUSAETZLICH
ein Zeichen und Text („Stimmt!" / „Stimmt nicht"), und diese Zeichen sind
nicht Zierrat, sondern der eigentliche Unterschied. Wer sie spaeter
wegkuerzt, nimmt die Bedienbarkeit mit. */
--yes:#2E9E63; --yes-d:#268352; /* 4,50:1 als Text auf der Karte */
--no:#D5472C; --no-d:#CD4329; /* 4,52:1 als Text auf der Karte */
--bad-solid:#CD4329; --on-bad-solid:#ffffff; /* 4,74:1 auf Weiss, fuer 11px-Badges */
/* Rollen, die die Nacht braucht (U-135). Hier zeigen sie auf das, was vorher
an derselben Stelle stand: die Karte, --on-fill, --teal-d. Kein zweiter
Kartenton — --raised IST die Karte, solange es hell ist. */
--raised:var(--surface);
--on-yes:#FFF9EF; --on-no:#FFF9EF;
--teal-fill:#2E6E70; --on-teal:#FFF9EF; /* 5,60:1 */
--robi-face:#FFF9EF; --mark-ink:#FFF9EF;
}
/* ===========================================================================
DARK (U-75)
Damian sent a screenshot of Apple's own Account sheet and said "this is how
Apple design looks like". The single loudest thing in it was not a radius or
a chevron: it was DARK. His device is in dark mode and this application was
nailed to light — which means every reference we had been measuring against
was one he does not actually see.
Two things change in dark that are not just "swap the values":
DEPTH STOPS COMING FROM SHADOW. On a black ground a shadow is invisible; a
card reads as raised because it is LIGHTER than what is behind it. So the
ground goes to black and the surfaces come UP, which is the opposite
direction from light mode, and the elevation scale gets quieter rather than
stronger.
THE SEPARATOR IS NOT THE BORDER. Apple's grouped list in dark has no outline
at all — a filled card with hairlines only BETWEEN rows. A border would draw
a box around something that is already obviously a group.
Values are Apple's own semantic set, checked rather than eyeballed: label
17.0:1 on the card, secondary 6.6:1, tertiary 3.4:1 (large text and shapes
only), separator 1.5:1 which is a line and not text.
======================================================================== */
/* ===========================================================================
WASHES — the tinted states, which dark mode cannot simply invert.
A dozen rules carried light tints by hand: #FFF6E6 for a warning, #F2FAFF
for something selected, #FFEDE9 for something that went wrong. On black each
of those is a lamp. They are semantic, so they become tokens with a dark
counterpart rather than a per-page guess.
======================================================================== */
:root{
--wash-warn:#FFF6E6; --wash-warn-ink:#7A4A0A;
--wash-bad:#FFEDE9; --wash-bad-ink:#7A2320;
--wash-good:#E9F9F0; --wash-good-ink:#14603A;
--wash-info:#F2FAFF; --wash-info-ink:#0C4A6E;
--wash-flat:#F1F3F6;
}
/* ===========================================================================
THE ICON TILES (U-76)
The three doors are told apart by a coloured tile behind their glyph. In
light that is a pale pastel, which is right. In dark a pastel is a bright
patch on a dark card — the exact "lamp" problem the washes had, and the first
thing wrong with the screenshot Damian sent.
iOS does NOT pale its tinted icon tiles in dark; it keeps the hue and lets it
sit deep. So these are the brand colour at low opacity over the card, which
reads as a blue, an amber and a pink square rather than three grey-white
ones — and the glyph on top stays legible because the tile is darker than the
text, not lighter.
======================================================================== */
:root{
--tint-ask:#E3F3FD;
--tint-quiz:#FFF0DC;
--tint-draw:#FFE7EE;
/* The allowance pill sits ON the tile colour, so it needs its own ink. */
--tint-ink:var(--muted);
}
/* ===========================================================================
FILL vs INK (U-77) — a colour name is not a role, and this is the second
time that bill has come due.
`--navy` was the app's dark navy: text AND the primary button, because in
light mode those are the same value. Dark mode split them and the token could
not follow. It was mapped to white — correct for text, and it turned four
filled things into WHITE BLOBS with white labels on them: the "Spiel öffnen"
pill, the selected segment, the account avatar, the progress bar.
This is exactly the `--card` bug from U-70 one layer up: one name holding two
jobs that happen to agree in one mode. `--navy` is gone. Text asks for
`--ink`; anything filled asks for `--fill` and puts `--on-fill` on top.
======================================================================== */
:root{
--fill:#06182a; /* the strong solid: primary button, brand mark */
--on-fill:#ffffff; /* 17.9:1 */
}
/* A loud failure keeps its own pair. `--bad` is a MARK colour and flips
lightness by mode so it can be read as text on either ground — which makes
it useless as a fill: #FF6B5E under white is 2.79:1. The solid stays dark in
both modes and carries white. */
:root{ --bad-solid:#9f2a24; --on-bad-solid:#ffffff; } /* 7.42:1 */
/* ===========================================================================
STREUZEICHEN (U-78) — die Antwort auf U-69s offene Frage
U-69 nahm der Kinder-App die Farbe weg und liess eine Frage offen, die
ausdruecklich eine ABBRUCHBEDINGUNG war: "fuehlt es sich ohne Farbe noch
warm an? Wenn nicht, stop und gib etwas zurueck."
Die Antwort kam von NEW kinderleicht (i-NOVATiON, Landkreis Neustadt
a.d. Aisch) — der einzige Griff auf dieser Seite, der uebernommen zu werden
verdient. Ihr Grund ist #F0E8DD, unser warmer Sand ist #F0E4CC: 1,037:1
auseinander, zwei Teams auf derselben Farbe. Und darauf liegen bei ihnen ein
paar winzige Marken. Die Waerme kommt aus den MARKEN, nicht daraus, dass
Flaechen eingefaerbt werden — genau das, was U-69 gesucht hat, ohne es zu
finden.
Wie leise ist leise? Nicht nach Gefuehl — aber auch nicht mehr nach der
Haarlinie. U-78 hat die Marken an die Haarlinie gebunden („so leise wie das
Leiseste, was die App schon zeigt"), und das war nur wahr, solange die
Haarlinie zufaellig extrem blass war: #E4DCCB kam auf 1,071:1 gegen den
Grund. U-88 leitet die Haarlinie aus der braunen Tinte ab, und die liegt bei
1,283:1. Haette man die Regel woertlich mitgezogen, waeren die Deckkraeften
von .06–.19 auf .22–.60 gesprungen: aus fast unsichtbaren Marken waere
sichtbares Konfetti geworden.
Die Regel war also von Anfang an eine Kopplung zweier Dinge mit
entgegengesetzter Aufgabe — eine Haarlinie SOLL man sehen, eine Marke soll
man nicht sehen. Sie sind jetzt entkoppelt. Das Ziel ist der Wert, der
tatsaechlich geprueft und angenommen wurde: rund 1,07:1 gegen den Grund,
gemessen 1,068 bis 1,075. Der Grund #FFDFB8 ist unveraendert, also sehen die
Marken exakt aus wie bisher — nur stimmt der Satz darueber jetzt.
Die Deckkraft ist pro Farbton ausgerechnet, weil Gelb bei gleicher Deckkraft
viel lauter ist als Violett: sun braucht 19 %, grape nur 6 %. Tinte ueber
einer Marke liest mit 8,31:1 bis 8,53:1 — der Grund traegt Text also
unveraendert. (Frueher stand hier 10,4:1; das galt fuer die marineblaue
Tinte, die es nicht mehr gibt.)
Kein Verlauf. Marken sind FORMEN, und U-69s Regel gilt weiter: der Halo um
den Aufnahme-Orb ist der einzige Verlauf der Anwendung.
DIE MARKEN bewegen sich nicht. Das galt in U-78 fuer die ganze Seite, und
Damian hat es in U-88 fuer EINE Sache aufgehoben: Robi atmet und blinzelt
jetzt dauerhaft. Der Satz wird hier nicht stillschweigend geloescht, sondern
praezisiert, weil der Grund von damals fuer die Marken weiter gilt und fuer
Robi nicht:
Eine Marke, die sich regt, konkurriert mit dem, was ein Kind anschauen soll —
sie ist Hintergrund und hat keinen Anlass, Aufmerksamkeit zu holen. Robi ist
das Gegenteil: er IST das, was angeschaut werden soll, und ein Gesicht, das
sich nie regt, liest sich als Bild von jemandem statt als jemand. Das
Blinzeln kostet 4,5 Sekunden Abstand und der Atem 3,4 Sekunden Weg von
5 Pixeln; beides steht unter `prefers-reduced-motion` still.
Die Regel ist also nicht weg, sie ist genauer: was Hintergrund ist, haelt
still — was jemand ist, darf leben.
Zwei Lagen mit 400 und 300 px, damit die Wiederholung nicht lesbar wird —
das kleinste gemeinsame Vielfache liegt bei 1200 px, also weit hinter jedem
Telefonbildschirm. Nur `.warm`, also nur die Kinder-App: Konfetti auf dem
Elternbereich oder in Flow waere ein Arbeitsgeraet mit Kinderzimmertapete. */
:root{
/* Re-tuned for the orange ground (U-79), values unchanged by U-88. The alphas
are not decoration: each is the value at which that hue lands on ~1.07:1
against #FFDFB8 — measured 1.068 (grape) to 1.075 (sun). Yellow needs 19 %
to reach what violet reaches at 6 %, so a single shared opacity would make
the yellow marks shout and the violet ones vanish. Ink over any mark reads
at 8.31:1 or better. */
--scatter-a:url("data:image/svg+xml,");
--scatter-b:url("data:image/svg+xml,");
}
/* ===========================================================================
NACHT (U-135) — die Kinder-App auf dunkler Buehne, und diesmal BESTELLT.
U-79 hat den Dunkelmodus entfernt und festgehalten: „Zurueckholen ist ein
git revert dieses Commits — aber nicht ohne dass jemand danach fragt." Am
12.09.2026 hat Damian danach gefragt: die Kinder-App bekommt den Look einer
Streaming-App, und dazu gehoert die dunkle Buehne. Das hier ist also kein
Revert und keine Vermutung, sondern die Umkehrung einer Entscheidung durch
den, der sie getroffen hat.
DREI DINGE SIND ANDERS ALS IN U-75, und sie sind der Grund, warum die
Reparaturen von U-76/U-77 diesmal nicht anfallen:
1. EINE KLASSE, KEIN MEDIA-QUERY. `html.night` steht auf der Kinder-App,
`html.warm` bleibt auf der Elternseite. Das Geraet entscheidet nichts;
ein Media-Query auf den Geraetemodus kommt in dieser Datei weiterhin
nicht vor, und quiet.test.ts prueft das weiter. Zwei Seiten, zwei
Klassen, kein Modus.
2. JEDE FLAECHE, DIE SCHRIFT TRAEGT, HAT IHRE EIGENE TINTE. Genau daran ist
U-77 gescheitert (weisse Pillen mit weisser Schrift): --on-fill war Weiss,
weil die Fuellung in Hell dunkel war. Bei Nacht ist das helle Orange die
Fuellung, und die Tinte darauf ist die Buehne selbst: 6,15:1. Dasselbe
fuer die beiden Antworten (--on-yes, --on-no) und Robis Teal (--on-teal).
--action-d bleibt als Markenton, traegt aber keine Schrift mehr.
3. TIEFE KOMMT NICHT AUS DEM SCHATTEN. Auf #17110C ist ein Schatten
unsichtbar; eine Karte liegt oben, weil sie HELLER ist als der Grund
(die Notiz aus U-75 oben, die ueberlebt hat). Grund 1,11:1 unter der
Karte, Karte 1,13:1 unter --raised. Die --e-*-Schatten aus surface.css
bleiben stehen und tun bei Nacht einfach fast nichts.
Der Grund ist Farbton 27°, Saettigung 48 %, Helligkeit 9 %: eine Nacht,
und immer noch Orange — nicht das neutrale Schwarz einer Streaming-App,
sondern die eigene Tinte (#3E2A16) noch drei Stufen tiefer.
GEMESSEN (WCAG, gegen den Grund / die Karte):
ink #FFF9EF 17,87 / 16,15 muted #B9A58E 7,88 / 7,12
faint #8A7A66 4,51 / 4,07 nur grosse Schrift und Formen,
dieselbe Regel wie in .warm
hair cream .14 1,46 / 1,52 Apples Trennlinie liegt bei 1,5
on-fill auf fill 6,15 on-yes auf yes 7,85
on-no auf no 4,38 grosse fette Schrift, wie in .warm
yes-d / no-d als TEXT auf der Karte 10,74 / 8,23
teal auf Grund 6,34 Robis Koerper traegt jetzt die
teal-d auf Grund 3,19 Silhouette, der Umriss ist Detail
teal-d auf robi-face 5,60 deshalb bleibt das Gesicht CREME
mark-ink auf sky-d / flame-d / grape-d / teal-d 3,79 / 3,36 / 5,87 / 5,60
wash-*-ink auf wash-* 9,2 bis 10,1
grape-d als TEXT auf der Karte 2,75 FAELLT — kids.html malt Text nie
mehr in --grape-d
ZWEI NEUE ROLLEN, weil zwei Dinge auch bei Nacht hell bleiben muessen:
--robi-face die Platte hinter Robis Augen. Sie war `--surface`, und
`--surface` ist bei Nacht dunkel — Robi haette ein schwarzes
Gesicht mit dunklen Augen darauf.
--mark-ink die Buchstaben EN/ES/FR in den Sprechblasen und das „?" der
Frag-Tuer (topics.js). Auch sie waren `--surface`.
Beide sind in :root und .warm auf die dortige Karte gesetzt, damit nichts
anderes sich aendert. */
html.night{
color-scheme:dark;
--ink:#FFF9EF;
--muted:#B9A58E;
--faint:#8A7A66;
--hair:rgba(255,249,239,.14);
--hair2:rgba(255,249,239,.07);
--bg:#17110C;
--bg2:#100B08; /* eine Stufe tiefer, fuer Eingelassenes */
--surface:#241B13;
--raised:#2F251B; /* die zweite Stufe nach oben: Leisten, Pillen auf Karten */
--accent:#F26B1D;
--accent-ink:#17110C;
--accent-wash:rgba(242,107,29,.12);
--accent-line:rgba(242,107,29,.40);
--fill:#F26B1D;
--on-fill:#17110C; /* 6,15:1 — bei Nacht IST das helle Orange die Fuellung */
--action:#F26B1D;
--action-d:#C34F0B; /* Markenton; traegt bei Nacht keine Schrift */
--yes:#2FBF71; --on-yes:#17110C; --yes-d:#7EE2A8;
--no:#D93A22; --on-no:#FFF9EF; --no-d:#FF9A85;
--teal:#4FA3A5;
--teal-d:#2E6E70;
--teal-fill:#4FA3A5; /* gefuellt mit Schrift darauf: der Namens-Punkt, das gewaehlte Alter */
--on-teal:#17110C; /* 6,34:1 */
--robi-face:#FFF9EF;
--mark-ink:#FFF9EF;
--bad-solid:#CD4329; --on-bad-solid:#FFF9EF; /* 4,52:1 */
/* Waschungen: tiefer Farbgrund, helle Farbtinte — iOS macht es bei Nacht
genauso, statt die Pastelltoene aufzuhellen (das war U-76s Lampe). */
--wash-warn:#3A2A12; --wash-warn-ink:#FFD08A;
--wash-bad:#3D1712; --wash-bad-ink:#FFB3A5;
--wash-good:#12331F; --wash-good-ink:#9BE7B9;
--wash-info:#0F2A3A; --wash-info-ink:#A8DCF5;
--wash-flat:#2F251B;
--tint-ask:#10344A; --tint-quiz:#3A2609; --tint-draw:#3E1626;
--tint-ink:var(--muted);
/* Keine Streuzeichen: auf einer Buehne waeren die Marken Staub. Die Regel
in kids.html bleibt (`background-image:var(--scatter-a),var(--scatter-b)`),
die Lagen sind hier schlicht leer. */
--scatter-a:none;
--scatter-b:none;
}
/* ===========================================================================
SCHIEFER (U-154) — der Elternbereich hat seine eigene Buehne.
Damian: „auch bei Spotify hat nicht jeder Bereich dieselbe Farbe." Das
Spiel liegt auf der warmen Nacht (Tinte, drei Stufen tiefer); die Seite
der Erwachsenen liegt auf kuehlem Schiefer (Farbton 210°, Helligkeit 9 %),
und ihr Akzent ist Robis Teal statt des Aktions-Orange — dieselbe Familie,
erkennbar ein anderer Raum. Dieselben drei Regeln wie bei der Nacht: eine
Klasse, jede Fuellung mit eigener Tinte, Tiefe aus Helligkeit.
GEMESSEN (WCAG, gegen den Grund / die Karte):
ink #F2F5F7 16,92 / 15,00 muted #A9B3BC 8,70 / 7,71 (raised 6,64)
faint #7E8994 5,20 hair ink .14 ~1,5
Grund unter Karte 1,13, Karte unter raised 1,16
on-fill auf fill (Teal) 6,28 Teal auf Grund 6,28
on-no auf no 4,19 (grosse fette Schrift) mark-ink auf teal-d 5,36 */
html.slate{
color-scheme:dark;
--ink:#F2F5F7;
--muted:#A9B3BC;
--faint:#7E8994;
--hair:rgba(242,245,247,.14);
--hair2:rgba(242,245,247,.07);
--bg:#0F1418;
--bg2:#0A0E11;
--surface:#1A2026;
--raised:#242C34;
--accent:#4FA3A5;
--accent-ink:#0F1418;
--accent-wash:rgba(79,163,165,.12);
--accent-line:rgba(79,163,165,.40);
--fill:#4FA3A5;
--on-fill:#0F1418;
--action:#F26B1D;
--action-d:#C34F0B;
--yes:#2FBF71; --on-yes:#0F1418; --yes-d:#7EE2A8;
--no:#D93A22; --on-no:#F2F5F7; --no-d:#FF9A85;
--teal:#4FA3A5;
--teal-d:#2E6E70;
--teal-fill:#4FA3A5;
--on-teal:#0F1418;
--robi-face:#FFF9EF;
--mark-ink:#FFF9EF;
--bad-solid:#C43F25; --on-bad-solid:#F2F5F7; /* 4,70:1 — auf dem Schiefer eine Stufe tiefer als bei Nacht */
--wash-warn:#3A2A12; --wash-warn-ink:#FFD08A;
--wash-bad:#3D1712; --wash-bad-ink:#FFB3A5;
--wash-good:#12331F; --wash-good-ink:#9BE7B9;
--wash-info:#0F2A3A; --wash-info-ink:#A8DCF5;
--wash-flat:#242C34;
--tint-ask:#10344A; --tint-quiz:#3A2609; --tint-draw:#3E1626;
--tint-ink:var(--muted);
--scatter-a:none;
--scatter-b:none;
}