/* Zantillion Hub — the dark palette (Phase 28, session 5). An OVERLAY, not a second stylesheet. It is linked after tokens.css with a `media` attribute the server computes (docs/adr/0008), so it applies exactly when the dark theme is active and is inert otherwise — which is why there is no `[data-theme]` selector anywhere in here, and no CSS rule in the repo may key off that attribute: it would work for the two explicit values and silently not for "follow the system". Two rules this file lives by, both pinned by tests: * it declares NOTHING but the palette — one `:root`, every name already defined in tokens.css, plus `color-scheme`. A layout rule that applies only in dark is a layout bug nobody will see for months. * every colour token in tokens.css appears here. A token left out renders in its LIGHT value on a dark surface, which is the characteristic failure of an overlay and the one nobody notices until a user does. The direction, decided before any value (the spec calls it "the same paper, lit two ways"): this is NOT Linear's cool near-black. The warm neutral ramp is the app's identity, so it rotates to the dark end rather than changing hue, and the slate blue is lifted rather than replaced. The order below mirrors tokens.css line for line, so the two files can be read side by side. THE THREE INVERSIONS worth knowing before editing anything here: 1. Quiet means DARKER on light and LIGHTER on dark. A hover fill, a raised control and a "louder" ink all move the opposite way from their light twins. `--disabled-fill` is the deliberate exception: a disabled control must not read as lifted, so it sinks. 2. `--on-accent` / `--on-done` become dark ink. White on the lifted accent measures 1.9:1; #191816 measures 7.47. This is the pair that is invisible to get wrong in light, where all four of --card, --field-bg, --control-bg and --on-accent are #fff. 3. The mark/ink hierarchy inverts with everything else: in light an ink is DARKER than its mark, here it is LIGHTER. --faint-ink stays a measured step quieter than --muted-ink, as it is in light. Every ratio in the comments was computed with the same arithmetic test_a11y_contract.py uses, and the tests re-derive them rather than trusting these notes. */ :root{ /* Surfaces. Separation bg/panel 1.069, panel/card 1.061, card/border 1.309 — the hairline keeps the weight it has in light (1.297), because a dark surface needs at least as much help to show an edge. */ --bg:#1a1917; --panel:#211f1c; --card:#262420; --border:#3a3733; --line:#2e2b27; /* 14.24 / 13.32 / 12.55 on bg / panel / card. */ --text:#eae7e1; --muted:#6f6b64; --faint:#585449; --accent:#86abd9; --accent-tint:#86abd914; --accent-ring:#86abd955; --next-bg:#86abd90e; --done:#72ab7d; --amber:#8f6b31; --error:#e08a72; /* --amber is still the *mark* (3.18 on --card, deliberately under the 4.5 floor so the mark/ink distinction survives the rotation). A simple lift of light's #b9883e measures ~6.3, which would put a mark above the text floor and collapse that distinction in dark only. The ink is 6.80 on --card. */ --amber-ink:#d5a35c; /* 6.73 / 6.30 / 5.93. */ --muted-ink:#a3a099; /* 5.96 / 5.58 / 5.26, and the reason it is not the 4.75 the spec's table carried: a *tint* over a surface is lighter than the surface, and the browser found the case — the selected module's count is --faint-ink on --accent-tint over --panel, where 4.75-on-card fell to 4.08. The spec's own note said this token was the one to re-measure if a surface moved; a tint on top of one is exactly that. 4.56 on the worst band now. Still a measured step quieter than --muted-ink (5.26 against 5.93 on --card), so the faint-under-muted hierarchy survives the fix. */ --faint-ink:#9a968e; /* Inversion 2. 7.47 on --accent, 6.62 on --done. */ --on-accent:#191816; --on-done:#191816; /* And the one that does NOT invert with them, which is why it was split off: an avatar's background is User.avatar_color, six saturated hexes from the model rather than from this palette, so the circle is identical in both themes. Dark ink on it would measure 3.6 against white's 6.0. */ --on-avatar:#fff; /* Lighter than --accent, not darker: on a dark surface the filled button's "more energy" state is the brighter one. Still 8.96 against --on-accent. */ --accent-press:#9cbbe1; --border-input:#3d3a35; --text-soft:#cfccc5; --error-band:#2e211d; --amber-band:#292318; --amber-band-border:#453a27; /* A dark surface does not read as lifted from a soft shadow, which is why a shadow is one token including its geometry: every one below is deeper and wider than its light twin, not merely re-tinted. */ --shadow-island:0 10px 28px rgba(0,0,0,.5); /* Surfaces under and beside --card. Inversion 1 throughout: --surface-quiet recedes below the card, the hovers lift above it. */ --surface-quiet:#221f1d; --surface-quiet-hover:#2a2723; /* A field sinks, a control lifts — the three that are all #fff in light. */ --field-bg:#1d1b19; --control-bg:#2e2b27; --control-bg-hover:#38342f; --chips-bg:#1c1b19; --track:#332f2a; --hover-panel:#2b2824; --hover-card:#302d28; --press-fill:#38342e; /* The exception to inversion 1: a disabled control sinks while a hovered one lifts. Same value as --hover-card in light, and necessarily different here — which is the whole reason they were split into two tokens in 4.2. */ --disabled-fill:#201e1b; /* Hairlines. */ --border-card:#35322d; --border-quiet:#302d28; --border-chip:#38352f; --border-control:#403c37; --border-control-hover:#4c4841; /* Still two dashed hairlines and still ~10/255 apart, for the reason tokens.css records: a drop target invites a file onto it, an empty state and a not-yet-built card are quietly absent. */ --border-hover:#3d3934; --border-dashed:#474239; --border-placeholder:#3b3730; --border-disabled:#37342f; --border-locked:#3a3428; --barline:#403c34; --scrollbar-thumb:#45413b; /* The quiet inks. --label-ink clears AA here (5.32 on --card) and does in light too since this session; the four below it do NOT, in either theme, and that is the decision recorded in the ledger: they say "done" and "blocked", an inactive control is exempt from the contrast floor, and making them legible would make a finished task look unfinished. Their ratios mirror their light twins within ~0.5 rather than being invented fresh. */ --label-ink:#9b978f; --caret-ink:#6a665f; --chip-ink:#a09c94; --done-text-ink:#6f6c65; --done-strike:#4a4740; --disabled-ink:#4f4b45; --disabled-text-ink:#615d57; --tag-blocked-ink:#6f695f; --tag-blocked-bg:#2c2924; /* Semantic marks and the bands they sit in. **Every alpha is light's**, and that is a rule rather than a coincidence: the alpha is the design (how loud a selection is), the hue is the theme. Inventing new percentages here produced the one bug this palette shipped in review — a 12% accent tint lifted the selected module's surface far enough to put its count under AA. What does have to be re-measured is the *reading*: in light a tint darkens its surface, in dark it lightens it, so --done on its own tint is 4.88 here against 5.02 in light. */ --done-tint:#72ab7d1a; --done-band:#72ab7d12; --done-band-border:#72ab7d33; --accent-tint-hover:#86abd924; --danger-ink:#e09a80; --danger-tint:#e09a8014; --danger-border:#4a352d; --danger-bg-hover:#33241e; --danger-border-hover:#5e4238; --error-band-border:#4a342c; --amber-badge-ink:#d9b96a; --amber-badge-tint:#332a1c; --warn-band:#2b2419; --warn-band-ink:#d8b678; /* A glyph, not text: it marks a document the folder rules expected and did not find. 3.48 on --surface-quiet — above the 3:1 floor for a meaningful graphical object, below the text floor, which is the register it should read in. Its light twin sits at 2.41 and is recorded, not fixed. */ --tick-missing:#8e6f30; /* The checklist's phase scale. Five of the six marks need no dark twin at all and that is a result, not laziness: they are mid-tone hues, so they clear the 3:1 graphical floor on a dark surface as readily as on a light one (4.4-6.9 on --card). Only `daten`, the deepest blue, sits at 2.7 and lifts. The inks all lift, because on a dark band it is the *light* end that reads. Each ink is measured on its own tint over --card and --panel, both ≥4.5. */ --phase-doku:#7a8aa8; --phase-doku-ink:#8a96b0; --phase-doku-tint:#7a8aa81a; --phase-daten:#4070a8; --phase-daten-ink:#6c98ca; --phase-daten-tint:#4070a81a; --phase-kontrolle:#9a7fa8; --phase-kontrolle-ink:#a68fb2; --phase-kontrolle-tint:#9a7fa81a; --phase-reporting:#a88a6a; --phase-reporting-ink:#ae9375; --phase-reporting-tint:#a88a6a1a; --phase-kommentare:#aeaea6; --phase-kommentare-ink:#aeaea6; --phase-kommentare-tint:#aeaea61a; --phase-other:#9a9b96; --phase-other-ink:#9a9b96; --phase-other-tint:#9a9b961a; /* The dashboard's series palette, lifted where it had to be: --cat-1, -3, -4 and -5 measured 2.5-2.9 on --card, under the 3:1 a donut slice or a bar carries, and are 3.2-3.3 now. The amber, the teal and the remainder grey already cleared it and are untouched — a hue that works on both surfaces does not need a twin. Hue order is unchanged, because a series that changes colour between themes is a series nobody can talk about. */ --cat-1:#4375b0; --cat-2:#c99a4e; --cat-3:#218449; --cat-4:#9162a5; --cat-5:#bd4f38; --cat-6:#0b96a6; --cat-other:#9a9b9e; /* Overlays and shadows. Both scrims go deeper: they dim a dark page toward black, where in light they dim a light page toward grey. */ --scrim:rgba(0,0,0,.56); --overlay:rgba(0,0,0,.62); --shadow-menu:0 12px 34px rgba(0,0,0,.5); --shadow-modal:0 24px 70px rgba(0,0,0,.66); --shadow-drawer:0 16px 44px rgba(0,0,0,.56); --shadow-movebar:0 -8px 28px rgba(0,0,0,.46); --shadow-card-hover:0 8px 24px rgba(0,0,0,.42); --shadow-auth:0 12px 44px rgba(0,0,0,.5); --shadow-chip:0 1px 2px rgba(0,0,0,.4); --shadow-pill:0 2px 10px rgba(0,0,0,.45); --shadow-pinned-edge:6px 0 10px -6px rgba(0,0,0,.6); /* A fade now, not a shadow — see tokens.css: a 1px strip with a negative-spread box-shadow draws nothing, so the light side's fix carries the reasoning; this is only the dark value. */ --fade-more-right:rgba(0,0,0,.5); /* The map/heatmap gain-loss pair's dark half (Phase 40 E2), validated at ΔE 8.9 deutan — the card is darker here, so the pair needs more lift than the --cat hues above to clear the same separation the light side does. --map-scale, --map-band and --map-account follow it: tokens.css carries the reasoning for all five, this file only the dark values. */ --map-gain:#33a88a; --map-loss:#de5f4a; --map-scale:#5b8fd6; --map-band:#34312c; --map-account:#3e3a34; /* Not a colour and still a theme's business: brightness(.96) on a dark surface is a change of about two values, so the tap feedback the press rules exist for would simply not arrive. It goes the other way here. */ --press-dim:brightness(1.28); /* The other half of the Windows