desktop-mode / assets / css / variables.css

variables.css in OpenStation: Desktop Windows, Dock & Virtual Desktops for WP Admin 1.1.1, at assets/css/variables.css

1,638 lines 71.7 KB

Raw Download Zip

1	/**
2	* OpenStation — CSS Custom Properties.
3	*
4	* All design tokens for the desktop shell, carrying the OpenStation
5	* brand: https://nuriapenya.github.io/open-station-brand/
6	*
7	* ## The palette
8	*
9	* Pulse #f252fc neon identity accent
10	* Nebula #ec9bff soft identity accent
11	* Sirius #c2f1f1 aqua contrast accent
12	* Starlight #fffbff lightest — primary text on the station
13	* Void #0c0b0f darkest — the base everything sits on
14	* Obsidian #1a1721 surfaces: window bodies, cards, rows
15	*
16	* Shade ramp, Void to Starlight, for text hierarchy and lines:
17	* Astro #33303a · Silver #4d4a52 · Pewter #66636b ·
18	* Osmium #99969c · Ash #b3afb5 · Cloud #ccc8ce · Mist #e6e2e6
19	*
20	* The brand's own composition rule, followed here literally: "Void as
21	* the base, Obsidian for surfaces, Pulse and Nebula for identity
22	* moments, Sirius and Starlight for contrast, the Shade palette for
23	* text hierarchy and lines, meshes reserved for hero surfaces."
24	*
25	* ## Why these are declared at all
26	*
27	* Every rule in the tree reads its token as
28	* `var( --token, <literal> )`, and those literals are the look the
29	* shell had before the brand: WordPress-admin greys and blues. They
30	* are still there, still correct, and still what renders if this file
31	* fails to load. Declaring the tokens here is what puts the station on
32	* top of them — one declaration retints every surface that reads it.
33	*
34	* The way back is a theme, not an edit: Desktop Mode (Legacy)
35	* (`assets/desktop-themes/legacy/theme.json`) is a frozen snapshot of
36	* those pre-brand literals, and picking it in OS Settings → Themes
37	* restores the old look wholesale. A desktop theme's compiled selector
38	* weighs (0,2,0) against this file's `:root` (0,1,0) and loads after
39	* it, so any theme — Legacy or a third party's — outranks everything
40	* below.
41	*
42	* ## Semantic colours
43	*
44	* The brand defines no status palette, so danger / success / warning /
45	* info are derived rather than quoted: the hues the shell already used,
46	* lifted until they carry on a Void-to-Obsidian background, and where
47	* the brand does have a colour that means the right thing it is used
48	* instead — Sirius for info, and Holomesh's mint and warm for success
49	* and warning.
50	*/
51
52	/*
53	* ---- Typefaces -------------------------------------------------
54	*
55	* Geist and Geist Mono, the brand faces, self-hosted from
56	* `assets/fonts/` under the SIL Open Font License 1.1 (the licence
57	* text ships beside them in `OFL.txt`). Both are VARIABLE fonts: one
58	* file covers 100–900, which is why a whole typographic scale costs
59	* ~70 kB per family rather than one file per weight.
60	*
61	* `font-display: swap` paints fallback text immediately and swaps when
62	* the face arrives — on admin chrome that is almost always right,
63	* where `block` would hide every dock label until the download lands.
64	*
65	* The `url()`s are relative to THIS stylesheet, which is what keeps
66	* them correct however the plugin directory is renamed or wherever it
67	* is symlinked from.
68	*/
69	@font-face {
70	font-family: 'Geist';
71	src: url('../fonts/Geist-Variable.woff2') format('woff2');
72	font-weight: 100 900;
73	font-style: normal;
74	font-display: swap;
75	}
76
77	@font-face {
78	font-family: 'Geist Mono';
79	src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
80	font-weight: 100 900;
81	font-style: normal;
82	font-display: swap;
83	}
84
85	/*
86	* ---- Scope: the shell document, and nothing else -----------------
87	*
88	* `body.os-active` rather than `:root`, and that is
89	* load-bearing rather than tidy.
90	*
91	* This stylesheet is a dependency of `chromeless.css`, so it also
92	* loads INSIDE every iframe window — a real `wp-admin` document. A
93	* palette on `:root` would reach that document and repaint WordPress's
94	* own UI: `--wp-admin-theme-color` alone would turn Core's primary
95	* buttons, links and focus rings across every admin screen, with
96	* white button text landing on a colour it was never contrast-tested
97	* against.
98	*
99	* Iframe documents carry `body.os-chromeless` instead, so
100	* they match nothing here and every rule in the tree falls back to the
101	* literal it was always written with — the WordPress-admin values.
102	* **An admin page inside a window looks exactly as it does outside
103	* one.** That is deliberate: the station is the chrome around the
104	* page, not a reskin of the page.
105	*
106	* Specificity: (0,1,1). A desktop theme compiles to
107	* `body.os-desktop-theme-<slug>`, also (0,1,1) on the same
108	* element, and its stylesheet declares `os-variables` as a
109	* dependency — so it always prints after this file and wins the tie.
110	* Do not remove that dependency; see the note in
111	* `openstation_enqueue_desktop_theme_style()`.
112	*/
113	body.os-active {
114	/*
115	* ---- Desk --------------------------------------------------
116	*
117	* `Space`, the brand's quiet deep-space backdrop: a linear
118	* gradient from near-black through to a faint violet horizon.
119	*
120	* Note this is the desk's CSS default, not usually what you see:
121	* the wallpaper layer writes the ACTIVE wallpaper into this same
122	* property as an inline style, and the shipped default is the
123	* `Galaxy` artwork (`includes/wallpapers.php`). This value is what
124	* paints before that runs, and for anyone whose wallpaper is
125	* unavailable.
126	*/
127	--os-bg: linear-gradient(160deg, #010101 0%, #111114 58%, #1e1d23 100%);
128	/*
129	* Flat colour painted on the shell itself, behind every other
130	* layer including the wallpaper.
131	*
132	* The shell is `position: fixed` over the classic admin page, and
133	* that page is WHITE. Anything that leaves a layer unpainted for a
134	* single frame — a canvas wallpaper's context being disturbed, the
135	* compositor re-rasterising after a large GPU layer goes away —
136	* shows it. This is the floor that makes that impossible: the worst
137	* a dropped frame can now look like is Void.
138	*
139	* Deliberately a solid rather than `--os-bg`: it is never
140	* seen when things are working, so it should cost one flat fill,
141	* not a second gradient rasterisation on every shell repaint.
142	*/
143	--os-backstop: #0c0b0f;
144	--os-area-inset: 0;
145
146	/*
147	* ── The icon grid ────────────────────────────────────────────
148	*
149	* ONE grid, everywhere placements are laid out: the wallpaper,
150	* folder windows, and every canvas in the site folder. Before
151	* these tokens each surface carried its own pitch and its own
152	* tile width, and the two drifted apart — the desktop ended up
153	* with an 88px tile in a 96px cell whose 8px of air the tile's
154	* own padding ate, so icons touched edge to edge while the site
155	* folder had 20px between them.
156	*
157	* The cell is derived, never declared: `cell = tile + gap`. A
158	* gap you can see is the whole point, so it is the number that
159	* gets tuned; the pitch follows.
160	*
161	* The TypeScript side mirrors these in `src/desktop-files/grid.ts`
162	* (layout maths can't read CSS), and
163	* `tests/vitest/grid-metrics.test.ts` parses this file to prove
164	* the two agree. Change a number here and that test tells you
165	* exactly which constant to move with it.
166	*/
167	--os-tile-w: 88px;
168	/*
169	* A FIXED height, and it has to fit the tallest a tile can get:
170	* 8px padding + 48px icon well + 6px gap + two clamped label
171	* lines (2 × 12px × 1.2 = 28.8px) + 8px padding = 98.8px, so
172	* 104px with a little slack for font metrics.
173	*
174	* Fixed rather than minimum because the selection ring is drawn
175	* around the tile box: let the box follow its label and a row of
176	* selected icons is a ragged run of different-height rectangles,
177	* one per label that happened to wrap.
178	*/
179	--os-tile-h: 104px;
180	--os-grid-gap-x: 20px;
181	--os-grid-gap-y: 16px;
182	/* Gutter from the top / inline-start edge of any icon canvas. */
183	--os-grid-padding: 16px;
184	/*
185	* Image-led sections opt into a bigger tile (`tileSize: 'large'`)
186	* — a shop's products read as a catalogue, not a file list. Same
187	* gaps, bigger tile.
188	*/
189	--os-tile-w-large: 132px;
190	--os-tile-h-large: 160px;
191
192	/* Window chrome — Obsidian body inside a Starlight hairline. */
193	--os-window-bg: #1a1721;
194	--os-window-border: rgba(255, 251, 255, 0.12);
195	/*
196	* Window corner. Softer than the 8px the shell carried before, so
197	* a window reads as an object on the desk rather than a panel
198	* pinned to it.
199	*
200	* The tab strip's own radius is deliberately NOT tied to this one.
201	* A tab is 30px tall, so a corner anywhere near this size eats the
202	* whole straight edge and turns the tab into a capsule — it stops
203	* reading as a folder tab attached to the page, which is the one
204	* thing the tab has to say. `--os-tabs-radius` stays smaller and
205	* independent on purpose.
206	*/
207	--os-window-radius: 16px;
208	/*
209	* Shadows stay black and go deeper than they were: on a Void desk
210	* a soft grey shadow is invisible, and depth is the only thing
211	* separating a window from the sky behind it.
212	*/
213	--os-window-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
214	--os-window-shadow-focused: 0 12px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35);
215	/*
216	* Fill of the surface a window's content is revealed from once it
217	* finishes loading (OS Settings → Effects → "Window reveal").
218	*
219	* Obsidian, so a window uncovers from its own colour rather than
220	* flashing white on a dark desk. The surface has to be opaque or
221	* there is nothing to reveal FROM — the content would simply be
222	* visible the whole time and the clip animation would paint
223	* nothing. `transparent` is a legitimate value meaning "no
224	* covering surface"; the shell then skips the layer rather than
225	* animating something invisible.
226	*
227	* A reveal may override this for itself when the paint IS the
228	* reveal; `obturator` (Camera shutter) is the one built-in that
229	* does, because near-black blades are what make it a shutter.
230	*/
231	--os-window-reveal-surface: #1a1721;
232	/*
233	* Fill of the reveal's leading edge — the band that travels with
234	* the clip boundary and draws each reveal's shape (six lines on
235	* Blinds, an opening ring on Iris, a rotating spoke on Radar).
236	*
237	* `transparent` by default: the reveal reads as the page arriving,
238	* and a hard graphic edge on top of that is a deliberate look
239	* rather than the neutral one. A theme (or any stylesheet) opts in
240	* by giving this a colour — no JS and no per-reveal configuration
241	* needed, because the band follows whatever shape the active
242	* reveal has. While it computes to fully transparent the shell
243	* skips the layer altogether, so the default costs nothing.
244	*/
245	--os-window-reveal-edge: transparent;
246
247	/*
248	* ---- Title bar ---------------------------------------------
249	*
250	* Obsidian when focused, Void when not: the focused window's
251	* chrome sits one step up the Shade ramp while its unfocused
252	* neighbours sink toward the desk they are lying on. That is the
253	* entire focus signal, and it costs no colour — which matters,
254	* because the accent is spoken for.
255	*
256	* The pair used to be Astro-over-Obsidian, a step higher. It came
257	* down so a focused window's title bar and its tab strip are the
258	* SAME Obsidian, and the only thing lifting out of that surface is
259	* the tab itself. The step is the same size; the whole ramp moved.
260	*/
261	--os-titlebar-bg: #0c0b0f;
262	--os-titlebar-bg-focused: #1a1721;
263	--os-titlebar-color: #99969c;
264	--os-titlebar-color-focused: #fffbff;
265	--os-titlebar-height: 40px;
266	/* Hairline between page chrome and window chrome. */
267	--os-titlebar-divider: rgba(255, 251, 255, 0.12);
268	--os-titlebar-divider-unfocused: rgba(255, 251, 255, 0.06);
269
270	/*
271	* The status ring — leading mark of the title bar, where the app
272	* icon used to be. Four states: the resting ring is Starlight,
273	* work and success are both Pulse, failure is the danger colour.
274	*
275	* Pulse twice over is not an oversight. In flight and landed
276	* differ in FILL — an open ring breathing, then a solid disc with
277	* a check — and failure differs from both in fill AND glyph AND
278	* hue. Shape carries the distinction that colour alone cannot for
279	* a user who can't separate the two hues, and the accent stays the
280	* shell's own voice for "this is your station working".
281	*
282	* Failure resolves through `--os-ui-danger` and is the one value
283	* here that must not be quietened: a failure that whispers is a
284	* failure the user misses.
285	*
286	* The resting ring is one value in both title-bar states, not two:
287	* the ring reports a phase, and dimming it on an unfocused window
288	* would make `idle` say something different depending on which
289	* window you last clicked.
290	*/
291	--os-titlebar-activity-idle-color: #fffbff;
292	--os-titlebar-activity-color: var(--os-ui-accent, #2271b1);
293	--os-titlebar-activity-saved-color: var(--os-ui-accent, #2271b1);
294	--os-titlebar-activity-failed-color: var(--os-ui-danger, #d63638);
295	--os-titlebar-activity-size: 16px;
296
297	/*
298	* Title-bar control glyphs — minimise / maximise / close, the ⋯
299	* menu trigger, and the screen-meta cluster — in each of the two
300	* title-bar states.
301	*
302	* Both halves are named explicitly. The unfocused half would
303	* otherwise derive itself from `--os-titlebar-color` by
304	* a `color-mix()` that only runs while a desktop theme is active,
305	* and the focused half cannot derive at all: its glyphs sit on
306	* `-bg-focused`, and CSS has no contrast-safe function of a
307	* background colour.
308	*
309	* Close-button red is deliberately not in either set — it is
310	* semantic signal, not chrome, and both states resolve it through
311	* `--os-ui-danger`.
312	*/
313	--os-titlebar-btn-color: rgba(255, 251, 255, 0.55);
314	--os-titlebar-btn-color-hover: #fffbff;
315	--os-titlebar-btn-bg-hover: rgba(255, 251, 255, 0.1);
316	--os-titlebar-btn-bg-active: rgba(255, 251, 255, 0.16);
317	--os-titlebar-btn-focused-color: rgba(255, 251, 255, 0.72);
318	--os-titlebar-btn-focused-color-hover: #fffbff;
319	--os-titlebar-btn-focused-bg-hover: rgba(255, 251, 255, 0.14);
320	--os-titlebar-btn-focused-bg-active: rgba(255, 251, 255, 0.2);
321	--os-titlebar-btn-focused-outline: #f252fc;
322
323	/*
324	* The control cluster and each button face stay TRANSPARENT, so a
325	* themed title-bar texture runs edge to edge underneath them and
326	* the glyphs float on the artwork. A plate behind the controls is
327	* a choice a theme makes, not a default the framework imposes.
328	* The knobs for building one:
329	*
330	* Cluster --os-titlebar-controls-bg
331	* --os-titlebar-controls-image (+ -repeat,
332	* -size, -position)
333	* --os-titlebar-controls-radius
334	* --os-titlebar-controls-padding (inline)
335	* --os-titlebar-controls-gap
336	* Screen-meta cluster
337	* --os-titlebar-meta-bg / -image / -radius
338	* (radius falls through to the controls radius)
339	* Each face --os-ui-btn-bg / --os-ui-btn-bg-image / --os-ui-btn-radius
340	*/
341
342	/*
343	* Admin accent. Pulse, the brand's identity colour, and the value
344	* behind the `pulse` swatch that OS Settings → Appearance ships as
345	* its default (`includes/accents.php`). The accent picker writes
346	* the user's choice into this same property as an inline style, so
347	* this is the pre-JS value and the floor under every scheme block
348	* below.
349	*/
350	--wp-admin-theme-color: #f252fc;
351
352	/* Resize handle — larger hit area than visual glyph; corners
353	are transparent until hover so they don't compete with the
354	window's own drop shadow. */
355	--os-resize-size: 20px;
356	--os-resize-color: rgba(255, 251, 255, 0.18);
357
358	/*
359	* ---- The `--os-ui-*` UI palette ------------------------------
360	*
361	* The single vocabulary for every surface, text tone, border, and
362	* status colour inside window BODIES — the `<os-*>` component kit
363	* AND the feature stylesheets both read these. Setting one value
364	* retints everything that uses it, which is what makes a
365	* whole-OS repaint eleven declarations rather than a thousand.
366	*
367	* It reaches further than window bodies: the shell's own
368	* body-mounted overlays — toasts, confirm dialogs, context menus,
369	* and the command palette — read it too.
370	*
371	* Roughly 190 component-local tokens (`--os-ui-card-bg`,
372	* `--os-ui-table-header-bg`, …) fall through to these, e.g.
373	*
374	* background: var( --os-ui-card-bg, var( --os-ui-surface, #fff ) );
375	*
376	* so the ones named further down are only those whose own literal
377	* does NOT chain through the palette and would otherwise stay a
378	* light-mode value on a dark station.
379	*/
380
381	/* Surfaces — Obsidian on Void, one step up the ramp for elevated. */
382	--os-ui-surface: #1a1721;
383	--os-ui-surface-elevated: #33303a;
384	--os-ui-surface-sunken: #0c0b0f;
385	--os-ui-surface-raised: rgba(255, 251, 255, 0.06);
386	--os-ui-surface-subtle: rgba(255, 251, 255, 0.03);
387	--os-ui-bg: #1a1721;
388	--os-ui-bg-subtle: rgba(255, 251, 255, 0.03);
389
390	/*
391	* Fields — the surface an input paints, for markup in the LIGHT
392	* DOM.
393	*
394	* The kit's own controls don't need these: `<os-text-field>` and
395	* friends resolve `--os-window-bg` inside their shadow roots,
396	* which the window chrome sets. A plugin writing a plain
397	* `<input>` into a native window's body has neither, and the
398	* palette had no general answer — no `surface` variant means
399	* "input". What it had was `--os-ui-modal-field-bg`, which is a
400	* MODAL token: right value, wrong scope, and the sort of thing a
401	* plugin author finds by grepping for a colour that looks close.
402	*
403	* Consumers keep the pre-brand WordPress-admin literals as their
404	* fallbacks — `#fff`, `#8c8f94`, `#2c3338` — so an unstyled page
405	* lands on the classic admin's own field, not on nothing:
406	*
407	* background: var( --os-ui-field-bg, #fff );
408	* border: 1px solid var( --os-ui-field-border, #8c8f94 );
409	* color: var( --os-ui-field-fg, #2c3338 );
410	*/
411	--os-ui-field-bg: #33303a;
412	--os-ui-field-border: #4d4a52;
413	--os-ui-field-fg: #fffbff;
414
415	/* Text — Starlight down through the Shade ramp. */
416	--os-ui-fg: #fffbff;
417	--os-ui-fg-muted: #b3afb5;
418	--os-ui-fg-faint: #66636b;
419	--os-ui-text-muted: rgba(255, 251, 255, 0.6);
420	/*
421	* Text on a filled surface — and the name undersells it. Around
422	* forty rules read this token, and only about half of them sit on
423	* the accent: the rest are white-on-dark chips that never had a
424	* name of their own — the toast, the drag hint, the widget picker,
425	* the file-tile lock, the overview labels, every scrim-backed
426	* caption in OS Settings.
427	*
428	* So it is Starlight. Void reads better ON Pulse (5.9:1 against
429	* 2.9:1) and was the first choice here, but it turned all of those
430	* chips into black text on a near-black wash. One token cannot be
431	* both, and the dark-chip half is both larger and the half that
432	* fails catastrophically rather than merely weakly.
433	*
434	* The surfaces that really are a bright fill — ribbons and step
435	* chips — name their own dark text below, which is the escape
436	* hatch this token leaves open.
437	*/
438	--os-ui-fg-on-accent: #fffbff;
439
440	/* Lines. */
441	--os-ui-border: #33303a;
442	--os-ui-border-strong: #4d4a52;
443
444	/* Interaction — light washes, since the surface underneath is dark. */
445	--os-ui-hover: rgba(255, 251, 255, 0.06);
446	--os-ui-scrim: rgba(12, 11, 15, 0.72);
447
448	/*
449	* ---- Text selection ------------------------------------------
450	*
451	* Lagoon, the brand's violet-blue, at 60%. It is the one primary
452	* colour in the guidelines the shell had no job for, and this is
453	* the right job: violet-blue is what every OS has trained people
454	* to read as "selected", so it needs no learning.
455	*
456	* The alpha is where the accessibility is, and it is squeezed from
457	* both ends. A selection has to satisfy two constraints at once:
458	*
459	* 1. the selected TEXT stays readable on it — Starlight over
460	* Lagoon@60% is 5.1:1 on Obsidian, 5.5:1 on Void; and
461	* 2. the highlight is distinguishable from the unselected
462	* background — 3.4:1 and 3.5:1 respectively.
463	*
464	* Raising the alpha helps (2) and hurts (1); lowering it does the
465	* reverse. 60% is the middle of the band where both clear their
466	* bar on both surfaces. An accent wash cannot do this at all: the
467	* Pulse family only separates from the background above 75%, by
468	* which point it is a fill rather than a highlight.
469	*
470	* The text colour is Starlight — the colour body text already is.
471	* A selection that also RECOLOURS the text destroys every
472	* distinction the text was carrying: syntax highlighting, a red
473	* error, a muted timestamp. Highlighting is not restyling.
474	*/
475	--os-ui-selection-bg: rgba(159, 152, 255, 0.6);
476	--os-ui-selection-fg: #fffbff;
477
478	/* Accent — the identity moment. */
479	--os-ui-accent: #f252fc;
480	--os-ui-accent-strong: #ec9bff;
481	--os-ui-accent-soft: color-mix(in srgb, var(--os-ui-accent-dim) 14%, transparent);
482	/*
483	* Pulse, one step back — and the single knob for how loud the
484	* station is.
485	*
486	* Pulse is not a contrast problem: #f252fc carries 6.2:1 against
487	* Obsidian, better than most accents in a dark UI manage. What it
488	* is, is SATURATED — HSL 296, 97, 65 — and the places that hurt
489	* are the ones where it is spread rather than stated: a bloom
490	* behind a focused control, a 18% wash under a selected row, a
491	* fill wider than a chip. Ten of those on one panel and the whole
492	* surface hums.
493	*
494	* So the fix is not to move Pulse. It is to spend it where it is
495	* a statement and to spend THIS where it is atmosphere: the same
496	* hue with saturation and lightness pulled down together (S 77,
497	* L 53), which is what keeps it recognisably Pulse rather than a
498	* different purple. 4.6:1 on Obsidian, and Starlight over it goes
499	* from 2.8:1 to 3.8:1 — so the wash also stopped eating text.
500	*
501	* Everything ambient below resolves through it: the glows, the
502	* soft wash, the focus bloom. Turning the station up or down is
503	* one edit here.
504	*
505	* `--os-ui-accent` itself stays #f252fc. That one is the brand's,
506	* not ours — it is what the guidelines name and what
507	* `brand-palette.test.ts` pins, and moving it is a brand decision
508	* rather than a UI one.
509	*/
510	--os-ui-accent-dim: #d92ee3;
511
512	/*
513	* ---- The meshes ---------------------------------------------
514	*
515	* The brand ships five mesh gradients as SVG artwork. These are
516	* those same meshes transcribed into CSS: the base linear plus
517	* every radial glow, at the offsets, radii, colours and alphas
518	* the vector files declare, converted from the 1440×960 artboard
519	* into percentages so they scale to any box.
520	*
521	* Transcribed rather than referenced on purpose. A `url()` to an
522	* SVG cannot be animated, cannot be tinted, costs a request, and
523	* cannot resize its glows independently of the box — a mesh
524	* painted on a 40 px switch track would be one flat corner of the
525	* artwork. As gradient stacks they rasterise at whatever size the
526	* control happens to be, and `background-position` can slide them,
527	* which is the entire holographic effect: a foil that shifts as
528	* you tilt it.
529	*
530	* Layer order is inverted from the SVG. In SVG the last `<rect>`
531	* paints on top; in a CSS `background-image` list the FIRST layer
532	* is on top. So each mesh below reads bottom-glow-first and ends
533	* with its base linear.
534	*
535	* The brand's own rule — "meshes reserved for hero surfaces" — is
536	* why none of these is a surface colour. They are what the shell
537	* paints at an identity moment: a switch that is on, the primary
538	* action in a dialog, the filled part of a progress bar. See the
539	* `--os-ui-holo-*` block below for the tokens components actually
540	* read.
541	*/
542
543	/*
544	* Holomesh. Lavender base under eight glows — white, cyan, pink,
545	* warm, mint, white, pink, blue. The default holographic fill.
546	*/
547	--os-mesh-holo:
548	radial-gradient(ellipse 21.7% 39.6% at 96.5% 13.5%, rgba(159, 214, 255, 0.6) 0%, rgba(159, 214, 255, 0) 100%),
549	radial-gradient(ellipse 26.3% 57.2% at 83.3% 56.2%, rgba(243, 181, 236, 0.75) 0%, rgba(243, 181, 236, 0) 100%),
550	radial-gradient(ellipse 18.2% 47.3% at 73.6% 64.5%, rgba(255, 253, 255, 0.7) 0%, rgba(255, 253, 255, 0) 100%),
551	radial-gradient(ellipse 18.4% 34.1% at 29.8% 83.4%, rgba(147, 240, 198, 0.8) 0%, rgba(147, 240, 198, 0) 100%),
552	radial-gradient(ellipse 17.4% 35.7% at 23% 67.7%, rgba(248, 242, 182, 0.85) 0%, rgba(248, 242, 182, 0) 100%),
553	radial-gradient(ellipse 23.3% 45.9% at 45.2% 45.8%, rgba(245, 159, 232, 1) 0%, rgba(245, 168, 234, 0.55) 55%, rgba(245, 168, 234, 0) 100%),
554	radial-gradient(ellipse 29.9% 53.6% at 53.5% 7.3%, rgba(125, 239, 245, 0.9) 0%, rgba(142, 233, 247, 0.45) 60%, rgba(142, 233, 247, 0) 100%),
555	radial-gradient(ellipse 26.9% 70.7% at 29.8% 44.8%, rgba(255, 253, 255, 0.95) 0%, rgba(255, 253, 255, 0.5) 55%, rgba(255, 253, 255, 0) 100%),
556	linear-gradient(124deg, #afa2e8 0%, #b7abea 55%, #c3b8ef 100%);
557
558	/*
559	* Pulsemesh. The loud one — a blue-to-violet base torn open by
560	* magenta. Reserved for the moments Holomesh would undersell.
561	*/
562	--os-mesh-pulse:
563	radial-gradient(ellipse 39.1% 48.6% at 92% 94.5%, rgba(255, 253, 255, 0.95) 0%, rgba(255, 240, 252, 0.55) 50%, rgba(255, 240, 252, 0) 100%),
564	radial-gradient(ellipse 33.3% 50% at 61.1% 62.5%, rgba(251, 134, 236, 0.85) 0%, rgba(251, 134, 236, 0) 100%),
565	radial-gradient(ellipse 36.1% 54.2% at 10.4% 39.6%, rgba(250, 61, 248, 1) 0%, rgba(250, 61, 248, 0) 100%),
566	radial-gradient(ellipse 87.3% 104.8% at 10.6% 100%, rgba(240, 75, 245, 1) 0%, rgba(240, 75, 245, 0.75) 43%, rgba(240, 75, 245, 0) 100%),
567	radial-gradient(ellipse 36.1% 45.8% at 92.4% 12.5%, rgba(125, 239, 245, 0.95) 0%, rgba(125, 239, 245, 0) 100%),
568	radial-gradient(ellipse 43.1% 54.2% at 81.3% 34.4%, rgba(108, 143, 245, 0.6) 0%, rgba(108, 143, 245, 0) 100%),
569	linear-gradient(236deg, #8d9bf3 0%, #c878f0 100%);
570
571	/* Auromesh. Lavender through mint into cyan — the calm mesh. */
572	--os-mesh-auro: linear-gradient(80deg, #d1c6f8 9.5%, #cefada 50%, #b8ffff 90.5%);
573
574	/* Starmesh. A Starlight glow falling away into Cloud. */
575	--os-mesh-star:
576	radial-gradient(ellipse 72.7% 72.7% at 50% 12.5%, #fffbff 0%, #fffbff 67.8%, #ccc8ce 100%);
577
578	/* Miomesh. The mascot's own sweep. Mio's, and used sparingly. */
579	--os-mesh-mio: linear-gradient(90deg, #f252fc 7%, #aa67ff 48.3%, #a580ff 70.7%, #4b3eff 93%);
580
581	/*
582	* ---- Holographic controls -----------------------------------
583	*
584	* What a control reads when it wants to be holographic. Every
585	* `<os->` resolves these through a private `--_holo-` alias (see
586	* `src/ui/holo.ts`), so a desktop theme can re-point any of them
587	* and every control in the kit changes together.
588	*
589	* The holographic state is a MOMENT, not a skin. A control paints
590	* `--os-ui-holo-fill` when it is on, selected, primary or filled —
591	* the one instant it is speaking for the brand — and wears
592	* ordinary Obsidian the rest of the time. That is the difference
593	* between a station and a novelty; a panel where every control is
594	* iridescent has no identity moments left to spend.
595	*/
596
597	/* The fill itself. Holomesh, so the mesh is the default look. */
598	--os-ui-holo-fill: var(--os-mesh-holo);
599	/*
600	* Glyphs and text ON that fill. Void, not Starlight — every mesh
601	* in the brand is a LIGHT surface (its darkest stop, Holomesh's
602	* #afa2e8, still sits at 62% luminance), so Starlight on it is a
603	* white-on-lilac 1.4:1 that looks fine in a mock and is unreadable
604	* on a screen. Void carries at 8.6:1 against the same stop.
605	*/
606	--os-ui-holo-ink: #0c0b0f;
607	/*
608	* The hover film. A control that is NOT in its holographic state
609	* still hints at one under the pointer: a low-alpha sweep of the
610	* mesh's own hues, laid over whatever the surface already is.
611	*
612	* Alphas are deliberately in the 6–12% range. This lands on
613	* Obsidian, where anything stronger stops reading as a sheen and
614	* starts reading as a second, wrongly-coloured surface.
615	*/
616	--os-ui-holo-sheen: linear-gradient(
617	124deg,
618	rgba(159, 214, 255, 0.1) 0%,
619	rgba(236, 155, 255, 0.12) 34%,
620	rgba(242, 82, 252, 0.1) 58%,
621	rgba(147, 240, 198, 0.09) 100%
622	);
623	/*
624	* The iridescent hairline. Painted as a gradient on a padding-box
625	* mask rather than a `border-color`, because a border cannot hold
626	* a gradient and `border-image` loses the corner radius.
627	*/
628	--os-ui-holo-edge: linear-gradient(
629	124deg,
630	rgba(154, 242, 255, 0.7) 0%,
631	rgba(236, 155, 255, 0.85) 38%,
632	rgba(242, 82, 252, 0.7) 62%,
633	rgba(159, 152, 255, 0.6) 100%
634	);
635	/* Resting edge — the same hairline, quieted, for an idle control. */
636	--os-ui-holo-edge-quiet: linear-gradient(
637	124deg,
638	rgba(154, 242, 255, 0.22) 0%,
639	rgba(236, 155, 255, 0.28) 38%,
640	rgba(242, 82, 252, 0.22) 62%,
641	rgba(159, 152, 255, 0.2) 100%
642	);
643	/*
644	* The bloom around a holographic surface. Pulse, because on a Void
645	* desk the glow is what separates "lit" from "light-coloured".
646	*/
647	--os-ui-holo-glow: 0 0 0 1px color-mix(in srgb, var(--os-ui-accent-dim) 20%, transparent),
648	0 2px 10px color-mix(in srgb, var(--os-ui-accent-dim) 15%, transparent);
649	--os-ui-holo-glow-strong: 0 0 0 1px color-mix(in srgb, var(--os-ui-accent-dim) 30%, transparent),
650	0 4px 18px color-mix(in srgb, var(--os-ui-accent-dim) 26%, transparent),
651	0 1px 3px rgba(12, 11, 15, 0.6);
652	/*
653	* The unlit half — switch tracks, empty progress, the unchecked
654	* checkbox.
655	*
656	* This was a sunken Void well, and it was a mistake that measured
657	* badly: `rgba(12, 11, 15, 0.55)` composites to #121017 on an
658	* Obsidian panel, which is 1.07:1 against that panel. An off
659	* switch was, to a very good approximation, not drawn. WCAG 1.4.11
660	* asks for 3:1 on the boundary of a control, and this was not in
661	* the same postcode.
662	*
663	* So the well is LIFTED rather than sunk: a Starlight wash, which
664	* also means it tracks whatever surface a theme puts behind it
665	* instead of pinning a grey that only works on Obsidian. Every
666	* dark OS does the same thing with its switches for the same
667	* reason — on a dark UI the visible thing is the lighter one.
668	*
669	* The fill alone still only reaches ~1.6:1, which is a look
670	* rather than a boundary. The 3:1 comes from the edge below, and
671	* the two together are what make an off switch findable.
672	*/
673	--os-ui-holo-track: rgba(255, 251, 255, 0.16);
674	/*
675	* The unlit half's boundary. Pewter, and not a rounder-looking
676	* neighbour, because Pewter is the first step on the Shade ramp
677	* that reaches 3.00:1 against Obsidian — Silver manages 2.03 and
678	* Astro 1.37. This is the declaration that makes an off control
679	* satisfy WCAG 1.4.11.
680	*/
681	--os-ui-holo-track-edge: #66636b;
682	/*
683	* Focus. One ring for the whole kit — Pulse, offset, over a soft
684	* halo, so it reads on Obsidian, on a mesh, and on the near-white
685	* of a legacy theme alike.
686	*
687	* Note which layer dims and which does not. The RING is full Pulse
688	* and stays there: it is the only thing on screen saying where the
689	* keyboard is, and a focus indicator is the last place to trade
690	* legibility for calm. Only the bloom behind it comes down, from
691	* 45% to 30%, and onto the dim — which is the layer that was
692	* making a focused control look like it was on fire.
693	*/
694	--os-ui-focus-ring: 0 0 0 2px rgba(12, 11, 15, 0.9),
695	0 0 0 4px var(--os-ui-accent, #f252fc),
696	0 0 12px 2px color-mix(in srgb, var(--os-ui-accent-dim) 30%, transparent);
697	/*
698	* …and one for FIELDS, which is a different problem. A text input
699	* already has a border to thicken and it sits in a column of other
700	* inputs, so the ring above — designed to survive landing on a
701	* bright mesh — reads as an alarm on a settings form. This one
702	* tightens the field's own edge to Pulse and puts a soft halo
703	* outside it: unmistakable, and quiet enough to live in a stack of
704	* twelve.
705	*/
706	--os-ui-focus-ring-field: 0 0 0 1px var(--os-ui-accent, #f252fc),
707	0 0 0 4px color-mix(in srgb, var(--os-ui-accent-dim) 16%, transparent);
708
709	/*
710	* The selected row of a VERTICAL `<os-tabs>`: the sidebar in
711	* OpenStation Preferences, and any native window that lays its
712	* pages down the side rather than across the top.
713	*
714	* Three layers, and the split is the whole point. Colour repeated
715	* down nine rows is wallpaper, so the accent is spent as a
716	* two-pixel EDGE and the row itself gets only a wash that falls
717	* away: it appears where it is cheap to look at and expensive to
718	* ignore.
719	*
720	* `-edge` is the accent the user picked, flat. It used to be
721	* Miomesh, and a mesh does hold up at 2px where a radial one
722	* would crop to an arbitrary lilac — but the edge is the loudest
723	* thing on the page that says "this row", and a row that says it
724	* in Pulse while the controls beside it say it in the chosen
725	* accent reads as two systems.
726	*
727	* `-wash` and `-bloom` are AMBIENT accent, so both resolve through
728	* `--os-ui-accent-dim` like every other glow in the kit. Turning
729	* the station down is still one edit. The Starlight stop in the
730	* middle of the wash is what keeps the row from reading as a pink
731	* smear: it lifts the surface under the label rather than tinting
732	* it, and it is gone by the time the row ends.
733	*/
734	--os-ui-tab-edge: linear-gradient(
735	var(--os-ui-accent, #f252fc),
736	var(--os-ui-accent, #f252fc)
737	);
738	--os-ui-tab-wash: linear-gradient(
739	90deg,
740	color-mix(in srgb, var(--os-ui-accent-dim) 16%, transparent) 0%,
741	rgba(255, 251, 255, 0.04) 42%,
742	transparent 100%
743	);
744	--os-ui-tab-bloom: linear-gradient(
745	90deg,
746	color-mix(in srgb, var(--os-ui-accent-dim) 26%, transparent),
747	transparent
748	);
749
750	/*
751	* ---- Motion --------------------------------------------------
752	*
753	* Four durations and three curves, and every animated thing in the
754	* kit picks from them. Not for tidiness: a panel where the switch
755	* settles in 220ms, the segmented thumb in 300 and the tab
756	* underline in 150 does not read as three well-tuned controls, it
757	* reads as one surface that cannot keep time.
758	*
759	* The scale is roughly logarithmic because perceived duration is:
760	* 90 and 140 are distinguishable, 220 and 240 are not.
761	*/
762	/* A state flip with no travel — a colour, an opacity, a tick. */
763	--os-ui-motion-fast: 140ms;
764	/*
765	* How long the foil takes to tilt, and the kit's default. One
766	* duration for every holographic transition, so a panel full of
767	* controls moves as one surface rather than as thirty independent
768	* ones.
769	*/
770	--os-ui-holo-transition: 220ms;
771	/* Something crossing a distance: a thumb, a drawer, a card. */
772	--os-ui-motion-slow: 340ms;
773	/* An ambient loop — a shimmer, a drift. Long enough to ignore. */
774	--os-ui-motion-ambient: 12s;
775
776	/*
777	* The curves. `spring` overshoots ~9% and settles; it is what makes
778	* a knob feel thrown rather than moved, and it is wrong for
779	* anything that changes size (an overshooting width reads as a
780	* glitch, not as weight).
781	*/
782	--os-ui-ease-spring: cubic-bezier(0.32, 1.5, 0.55, 1);
783	/* Decelerating. The default for anything arriving. */
784	--os-ui-ease-out: cubic-bezier(0.22, 0.9, 0.28, 1);
785	/*
786	* Accelerating — the mirror of `out`, and the default for anything
787	* LEAVING. A surface that eases out on the way in and eases in on
788	* the way out is the difference between "dismissed" and "undone":
789	* decelerating into nothing reads as the thing hesitating, which
790	* is the wrong note when the user has already moved on.
791	*/
792	--os-ui-ease-in: cubic-bezier(0.4, 0, 1, 1);
793	/* Symmetric, for a loop that has to come back where it started. */
794	--os-ui-ease-loop: cubic-bezier(0.45, 0, 0.55, 1);
795
796	/*
797	* Status. Derived, not quoted — see the header note. Info takes
798	* Sirius and success takes Holomesh's mint because the brand
799	* already has a colour that means those things; danger and warning
800	* are the shell's own hues lifted until they carry on Obsidian.
801	*/
802	--os-ui-danger: #ff5a5a;
803	--os-ui-danger-hover: #ff8a8a;
804	--os-ui-success-fg: #93f0c6;
805	--os-ui-warning-fg: #f8f2b6;
806	--os-ui-warning: #f8f2b6;
807	--os-ui-warning-bg: rgba(248, 242, 182, 0.1);
808	--os-ui-warning-border: rgba(248, 242, 182, 0.24);
809	--os-ui-info-fg: #c2f1f1;
810	--os-ui-info-bg: rgba(194, 241, 241, 0.1);
811
812	/*
813	* ---- Component tokens the palette cannot reach --------------
814	*
815	* Each of these is read with a literal of its own rather than a
816	* `var( --os-ui-<palette> )` chain, so the palette above does not
817	* carry to it. Everything else in the kit is left alone and
818	* inherits.
819	*/
820
821	/*
822	* Dialogs, menus and flyouts.
823	*
824	* The `--os-ui-modal-*` names below are the escape hatch
825	* `<os-modal>` needs. Its dialog surface is dark whatever the
826	* admin colour scheme says, so it re-points `--os-ui-fg`,
827	* `--os-ui-fg-muted`, `--os-ui-border`, `--os-window-bg` and
828	* `--os-ui-button-bg-hover` on its own `:host` — and a declaration
829	* on the host outranks anything the host inherits, which is how
830	* the palette used to stop at the dialog's edge. It reads these
831	* instead, so the station owns the dialog again and the literals
832	* behind them stay as the no-stylesheet floor.
833	*
834	* The set has to cover a dark context COMPLETELY, and the four
835	* added last are the ones that proved it. A dialog re-pointing
836	* only its text colours is fine while the palette around it is
837	* dark too — every unre-pointed token happens to agree. Put a
838	* LIGHT palette outside it (any theme in the admin's own colours,
839	* Legacy included) and the halves come apart: `--os-ui-surface`
840	* stays white, so `<os-select>` inside the dialog painted a white
841	* trigger and the re-pointed `--os-ui-fg` wrote near-white text
842	* onto it. `--os-ui-hover` was a black wash over a dark row.
843	*
844	* So the rule for anything added here: if a token names a SURFACE
845	* or a wash on one, the dialog owns it. Leaving one out is not
846	* "inherit the theme", it is "disagree with the other five".
847	*/
848	--os-ui-modal-bg: #1a1721;
849	--os-ui-modal-text: #fffbff;
850	--os-ui-modal-text-muted: #b3afb5;
851	--os-ui-modal-border: #4d4a52;
852	--os-ui-modal-field-bg: #33303a;
853	--os-ui-modal-button-bg-hover: rgba(255, 251, 255, 0.14);
854	--os-ui-modal-surface: #1a1721;
855	--os-ui-modal-surface-elevated: #33303a;
856	--os-ui-modal-border-strong: #4d4a52;
857	--os-ui-modal-hover: rgba(255, 251, 255, 0.06);
858	--os-ui-confirm-dialog-bg: #1a1721;
859	--os-ui-context-menu-bg: #1a1721;
860	--os-ui-context-menu-separator-color: rgba(255, 251, 255, 0.1);
861	--os-ui-flyout-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
862	--os-ui-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.45);
863	--os-ui-ribbon-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
864
865	/* Tables. */
866	--os-ui-table-bg: #1a1721;
867	--os-ui-table-header-bg: #33303a;
868	--os-ui-table-border: rgba(255, 251, 255, 0.1);
869	--os-ui-table-column-border: rgba(255, 251, 255, 0.16);
870	--os-ui-table-row-hover: rgba(255, 251, 255, 0.06);
871	--os-ui-table-stripe: rgba(255, 251, 255, 0.03);
872	--os-ui-table-sticky-edge: 2px solid rgba(255, 251, 255, 0.14);
873
874	/* Notices and badges — tinted washes of their own status colour. */
875	--os-ui-notice-error-bg: rgba(255, 90, 90, 0.12);
876	--os-ui-notice-error-border: rgba(255, 90, 90, 0.28);
877	--os-ui-notice-success-bg: rgba(147, 240, 198, 0.12);
878	--os-ui-notice-success-border: rgba(147, 240, 198, 0.28);
879	--os-ui-notice-warning-bg: rgba(248, 242, 182, 0.12);
880	--os-ui-notice-warning-border: rgba(248, 242, 182, 0.28);
881	--os-ui-notice-info-bg: rgba(194, 241, 241, 0.12);
882	--os-ui-notice-info-border: rgba(194, 241, 241, 0.28);
883	--os-ui-notice-neutral-bg: rgba(255, 251, 255, 0.06);
884	--os-ui-notice-neutral-border: rgba(255, 251, 255, 0.14);
885	/*
886	* A link inside a notice reads Nebula, the same value `--os-link`
887	* gives every other shell link — NOT the accent.
888	*
889	* Undeclared, the base fell through to `--wp-admin-theme-color`,
890	* which OpenStation Preferences → Appearance writes inline on `<html>`
891	* from the accent picker. That made the one piece of text a notice
892	* most needs the user to read take whichever hue they chose for
893	* focus rings. An accent is an identity colour; legibility on a dark
894	* surface is not something it can promise, so the link stops asking
895	* it to. Hover lifts to Starlight, and both ends stay in the palette.
896	*
897	* These are consumed from a DOCUMENT-tree rule in `desktop.css`, not
898	* only from the component's own `::slotted( a )`. See the comment
899	* there: a slotted link is a document-tree element, so wp-admin's
900	* bare `a` rule outranks anything the shadow root says about it.
901	*/
902	--os-ui-notice-link: #ec9bff;
903	--os-ui-notice-link-hover: #fffbff;
904	--os-ui-badge-danger-bg: rgba(255, 90, 90, 0.16);
905	--os-ui-badge-success-bg: rgba(147, 240, 198, 0.16);
906	--os-ui-badge-warning-bg: rgba(248, 242, 182, 0.16);
907	--os-ui-badge-info-bg: rgba(194, 241, 241, 0.16);
908	--os-ui-badge-neutral-bg: rgba(255, 251, 255, 0.08);
909
910	/*
911	* Fills that must stay fills. Each of these paints a solid shape —
912	* a ribbon, a chip, a focused input's edge — and each was reading
913	* a token the palette turned into a 10%-alpha wash or into the
914	* body colour itself. A ribbon the same colour as the card behind
915	* it is not a subtle ribbon, it is a missing one.
916	*/
917	/*
918	* Text on the bright status fills. These are the surfaces the
919	* `--os-ui-fg-on-accent` note points at: a ribbon filled with Pulse,
920	* Sirius or Holomesh mint is a LIGHT surface, and Starlight on it
921	* disappears.
922	*/
923	--os-ui-ribbon-fg: #0c0b0f;
924	--os-ui-step-chip-fg: #0c0b0f;
925	/*
926	* The step chip is the right size and shape for the mesh: a small
927	* round fill, one per row, already carrying dark text. Its
928	* `--os-ui-step-chip-fg` above is Void, which is what the mesh
929	* needs anyway — the two decisions were made independently and
930	* agree, which is usually the sign a palette is holding together.
931	*/
932	--os-ui-step-chip-bg: var(--os-mesh-holo);
933
934	/*
935	* The default ribbon. One per tile, small, angled, and already
936	* paired with Void ink above — which is what a mesh needs anyway.
937	* The status ribbons below keep their flat colours: a ribbon that
938	* says "deprecated" should say it in warning yellow, not in brand.
939	*/
940	--os-ui-ribbon-bg: var(--os-mesh-holo);
941
942	--os-ui-ribbon-info: #c2f1f1;
943	--os-ui-ribbon-warning: #f8f2b6;
944	--os-ui-ribbon-neutral: #4d4a52;
945	--os-ui-crumb-bg: #33303a;
946	--os-ui-tag-input-input-border: #f252fc;
947
948	/*
949	* Pairs that have to stay distinguishable. Hover and pressed, or
950	* base and shimmer, both resolve through `--os-ui-hover` — one wash
951	* for two states reads as a dead control, so the second step of
952	* each pair is named.
953	*/
954	--os-ui-btn-bg-active: rgba(255, 251, 255, 0.12);
955	/*
956	* `<os-button>` ghost + secondary. Their resting wash and their
957	* hover wash BOTH fall through to `--os-ui-hover` — in two different
958	* rules, with two different literals behind them (6% and 10%), so
959	* declaring the palette collapsed them onto one value and the
960	* buttons stopped reacting to the pointer entirely. Primary is
961	* unaffected: it hovers with `filter: brightness()` over its
962	* accent fill rather than through this token.
963	*/
964	--os-ui-button-bg-hover: rgba(255, 251, 255, 0.14);
965	--os-ui-key-bg-hover: rgba(255, 251, 255, 0.1);
966	--os-ui-key-bg-pressed: rgba(255, 251, 255, 0.16);
967	--os-ui-table-skeleton-highlight: rgba(255, 251, 255, 0.14);
968
969	/* Code, logs, progress, ratings, avatars. */
970	--os-ui-code-border: 1px solid rgba(255, 251, 255, 0.1);
971	--os-ui-log-border: 1px solid rgba(255, 251, 255, 0.08);
972	--os-ui-log-row-border: 1px solid rgba(255, 251, 255, 0.06);
973	--os-ui-progress-track-bg: rgba(255, 251, 255, 0.1);
974	/*
975	* The filled part of a progress bar is the one surface in the kit
976	* that is already a hero: bounded, watched, and the only thing
977	* moving on screen. So it takes Holomesh, and the bar stretches
978	* the mesh as it grows — the hue travelling from lavender toward
979	* cyan IS the progress, which a flat accent could only report.
980	*
981	* Retinted here rather than in `<os-progress-bar>` because the
982	* component's own literal has to stay the pre-brand WordPress blue
983	* (it is the no-stylesheet floor, and it is what Legacy collected).
984	* The tone modifiers — success, warning, danger — still declare
985	* flat colours and still win: a failing job should read as red, not
986	* as brand.
987	*/
988	--os-ui-progress-fill: var(--os-mesh-holo);
989	--os-ui-rating-star: #f8f2b6;
990	--os-ui-rating-fill: linear-gradient(90deg, #f8f2b6 0%, #fffbff 100%);
991	--os-ui-avatar-dot-ring: #1a1721;
992	/* The avatar's hover halo. It was a fixed indigo — a hue no
993	palette in the station names — so it lit itself in a colour
994	nothing around it used. Pulse. */
995	--os-ui-avatar-halo: #f252fc;
996	/* Search-match highlight inside a label. A WASH, not a fill: the
997	text keeps its own colour, so the wash has to stay light enough
998	for Starlight to carry over it. */
999	--os-ui-search-highlight-bg: rgba(248, 242, 182, 0.3);
1000	--os-ui-color-accent: #f252fc;
1001	/*
1002	* The content graph's cluster hue is NOT retinted. Graph node
1003	* colours are composed artwork that encodes meaning — the docs list
1004	* them under "what stays fixed" — and moving this one to Nebula put
1005	* white cluster labels on a pale lilac chip at 1.9:1. It keeps its
1006	* own colour, and the label keeps carrying on it.
1007	*
1008	* The graph's toolbar is chrome, though, and it does follow. The
1009	* count pill on an ACTIVE filter chip is a 70%-white fill, and it
1010	* was carrying `--os-ui-accent-strong` numerals — Nebula on white,
1011	* ~1.7:1. It is one more bright fill naming its own dark text, the
1012	* same escape hatch `--os-ui-ribbon-fg` and `--os-ui-step-chip-fg`
1013	* take, and for the same reason.
1014	*/
1015	--os-ui-cg-chip-count-fg-active: #0c0b0f;
1016
1017	/*
1018	* ---- Typography --------------------------------------------
1019	*
1020	* Geist for everything human — headlines, UI copy, body text — and
1021	* Geist Mono for the instrument voice: labels, metadata, statuses,
1022	* code. Both faces are declared above; a stack without them still
1023	* reads correctly, which is why every entry ends in a generic
1024	* family.
1025	*
1026	* The chrome / body split is the one real decision here, and it is
1027	* the one real desktop environments make. Here both sides run
1028	* Geist: the station is one surface, and the title bar is not a
1029	* different product from the window under it.
1030	*
1031	* Note that iframe windows render a real wp-admin document in a
1032	* separate browsing context that this stylesheet does not reach —
1033	* these tokens style the shell and native windows.
1034	*/
1035	--os-font: 'Geist', system-ui, sans-serif;
1036	--os-titlebar-font: 'Geist', system-ui, sans-serif;
1037	--os-ui-font: 'Geist', system-ui, sans-serif;
1038	--os-ui-font-mono: 'Geist Mono', ui-monospace, monospace;
1039
1040	/*
1041	* ---- Desktop-theme texture family -------------------------
1042	*
1043	* These are DELIBERATELY not declared. Every rule that consumes
1044	* one reads it as `var( --name, <initial> )`, so an unset variable
1045	* resolves to the CSS initial value and costs exactly nothing.
1046	* Declaring them with `none` up here would be equivalent but would
1047	* imply they are part of the default palette — they are not. They
1048	* exist only while an uploaded or code-registered desktop theme is
1049	* active, and only the compiled theme stylesheet ever sets them.
1050	*
1051	* TITLEBAR --os-titlebar-image
1052	* --os-titlebar-image-repeat
1053	* --os-titlebar-image-size
1054	* TITLEBAR_FOCUSED --os-titlebar-image-focused
1055	* (falls back to the unfocused image)
1056	* WINDOW_FRAME --os-window-border-image-source
1057	* --os-window-border-image-slice
1058	* --os-window-border-image-width
1059	* --os-window-border-image-repeat
1060	* WINDOW_CORNER_* --os-window-corner-{ne,nw,se,sw}-image
1061	* --os-window-corner-size (shared)
1062	* --os-window-corner-inset (shared;
1063	* how far inside the rounded corner the
1064	* ornament sits. Defaults to the resize
1065	* handle's 3px overhang plus a share of
1066	* --os-window-radius, because the
1067	* window clips its descendants)
1068	* WINDOW_FRAME_FOCUSED
1069	* --os-window-border-image-focused-*
1070	* (same four sub-properties as WINDOW_FRAME)
1071	* WINDOW_BODY --os-window-body-image
1072	* TABBAR --os-tabs-image
1073	* TITLEBAR_CONTROLS --os-titlebar-controls-image
1074	* TITLEBAR_BUTTON --os-ui-btn-bg-image
1075	* DOCK --os-dock-bg-image
1076	* --os-dock-bg-image-repeat
1077	* --os-dock-bg-image-size
1078	* DOCK_ITEM --os-dock-item-image
1079	* DESKTOP --os-desktop-image
1080	* --os-desktop-image-repeat
1081	* --os-desktop-image-size
1082	* ICON_TILE --os-tile-image
1083	* WIDGET --os-widget-image
1084	* MENU --os-ui-menu-bg-image
1085	* DIALOG --os-ui-dialog-bg-image
1086	* SCRIM --os-ui-scrim-image
1087	* PANEL --os-ui-panel-bg-image
1088	* TOAST --os-ui-toast-bg-image
1089	* TABLE_HEADER --os-ui-table-header-bg-image
1090	* BUTTON --os-ui-button-bg-image
1091	*
1092	* Every `image` slot also gets `<prop>-repeat` and `<prop>-size`
1093	* companions (the corners share one `-size`, and
1094	* TITLEBAR_FOCUSED inherits TITLEBAR's).
1095	*
1096	* Consumers: window-chrome.css (titlebar, frame, body, tab bar),
1097	* window-states.css (corners), dock.css, desktop.css (wallpaper,
1098	* icons, widgets), and the `<os-*>` component stylesheets under
1099	* `src/ui/components/` for the last seven.
1100	* Authoring reference: docs/desktop-themes.md.
1101	*/
1102
1103	/*
1104	* ---- Badges ----------------------------------------------
1105	*
1106	* Sizes stay undeclared and DERIVED: every badge sizes itself off
1107	* the icon it decorates — the dock badge off
1108	* `--os-dock-icon-size`, the wallpaper badges off
1109	* `--os-icon-image-size` — so a user who picks a large
1110	* dock, or a theme that scales its icons, doesn't end up with a
1111	* speck stuck to an oversized tile.
1112	*
1113	* Dock --os-dock-badge-size (overrides the
1114	* whole derivation; font + padding follow it)
1115	* --os-dock-badge-font-size / -padding
1116	* --os-dock-badge-offset / -bg / -fg
1117	* --os-dock-badge-font-weight
1118	* Desktop icon --os-icon-badge-size / -font-size
1119	* --os-icon-badge-padding / -bg / -fg
1120	* Recycle bin --os-recycle-badge-size / -font-size
1121	* / -bg / -fg. Falls through to the generic
1122	* icon-badge token, so "badges are 22px" reaches
1123	* the bin too.
1124	*
1125	* The count badges wear Pulse, and wear it as a LITERAL gradient:
1126	* both stops used to resolve through `--os-ui-danger`, which the
1127	* palette moved, flattening the badge to one flat fill and turning
1128	* its numerals Void by accident. Naming the stops here keeps it a
1129	* gradient on purpose. The bin's neutral badge is deliberately not
1130	* part of this: a count of things in the trash is ambient state,
1131	* not something asking for you.
1132	*
1133	* **The numerals are Void, not Starlight, and that is a
1134	* requirement rather than a preference.** Starlight on Pulse is
1135	* 2.9:1, which fails AA for text this small; Void on Pulse is
1136	* 6.8:1. Any future retint of these has to keep the pair legible,
1137	* so check the ratio before swapping the ink back to white.
1138	*/
1139	--os-dock-badge-bg: linear-gradient(180deg, #f97dff 0%, #f252fc 100%);
1140	--os-dock-badge-fg: #0c0b0f;
1141	--os-icon-badge-bg: linear-gradient(180deg, #f97dff 0%, #f252fc 100%);
1142	--os-icon-badge-fg: #0c0b0f;
1143	--os-recycle-badge-bg: rgba(26, 23, 33, 0.85);
1144	--os-recycle-badge-fg: rgba(255, 251, 255, 0.96);
1145	--os-dock-recycle-badge-bg: rgba(26, 23, 33, 0.85);
1146	--os-dock-recycle-badge-fg: rgba(255, 251, 255, 0.92);
1147
1148	/*
1149	* ---- Tooltips ---------------------------------------------
1150	*
1151	* Two tokens own every tooltip CHIP in the shell — the dock tile
1152	* tooltip and the content-graph satellite tooltip.
1153	*
1154	* They are worth naming rather than leaving derived. Without them
1155	* tooltips borrow their colours from unrelated families —
1156	* `--os-ui-scrim` (an overlay BACKDROP) or `--os-ui-surface-elevated`
1157	* for the surface, `--os-ui-fg-on-accent` for the text — and those
1158	* pairings come apart the moment the palette moves. On this
1159	* palette `--os-ui-fg-on-accent` is Void, which would have rendered
1160	* near-black text on a near-black chip.
1161	*
1162	* A chip is deliberately the SAME dark lozenge on every desktop
1163	* theme, which is why these two are flat values and not derived
1164	* from anything. That is right for one line of text pinned to a
1165	* control, and wrong for a rich card: the My WordPress entity
1166	* hover card used to read them and showed up Obsidian over a white
1167	* Legacy window. It has its own derived family now —
1168	* `--os-my-wordpress-card-*`, further down — and it still names
1169	* these two as its last fallback.
1170	*/
1171	--os-tooltip-bg: #33303a;
1172	--os-tooltip-fg: #fffbff;
1173
1174	/*
1175	* ---- Dock --------------------------------------------------
1176	*
1177	* Void glass over the desk, with a Starlight hairline. The tile
1178	* hover wash and the focus ring are the dock's identity moment:
1179	* Pulse, at the two alphas that read as "warm" and "here".
1180	*
1181	* `--os-dock-icon-color` is a COLOUR, not a fill, and
1182	* that is load-bearing: every image glyph in the dock is painted
1183	* as a mask filled with this colour — a theme's own iconset via
1184	* `"iconColor": "currentColor"`, and plugin / CPT artwork via
1185	* `currentColor` on the tile. One token drives dashicons, theme
1186	* art, plugin art, and the hover transition between them.
1187	*
1188	* Consumers: dock.css, dock-peek.css (which re-states the hover
1189	* rule and so must read the same two tokens).
1190	*/
1191	--os-dock-width: 56px;
1192	--os-dock-icon-size: 20px;
1193	--os-dock-bg: rgba(12, 11, 15, 0.72);
1194	--os-dock-icon-color: rgba(255, 251, 255, 0.72);
1195	--os-dock-icon-color-hover: #fffbff;
1196	--os-dock-item-bg-hover: rgba(242, 82, 252, 0.18);
1197	/*
1198	* The status indicator and the focus ring, and both say "this
1199	* one" about a tile the user chose — so they read the accent
1200	* rather than a fixed Pulse. Pulse is still what an untouched
1201	* install shows, because that is what the picker starts on.
1202	*/
1203	--os-dock-item-outline: var(--os-ui-accent, #f252fc);
1204	/*
1205	* Hairline between the dock and the desktop. Reaches the side
1206	* placements (as a single inline-edge border) AND the floating
1207	* bottom pill (as its full outline). Set `transparent` for a
1208	* borderless dock.
1209	*
1210	* The bottom pill's own chrome is separately overridable, because
1211	* it is deliberately a different piece of glass — a warmer tint, a
1212	* brighter top edge, an inset highlight, a drop shadow. Each falls
1213	* back to the shared value above it.
1214	*/
1215	--os-dock-border: rgba(255, 251, 255, 0.1);
1216
1217	/*
1218	* The dividers INSIDE the rail, which are a different job from the
1219	* outline around it: they separate tiles that belong to different
1220	* groups — core menus, plugin apps, and OpenStation's own controls.
1221	*
1222	* One treatment for all of them. An earlier pass gave the
1223	* WordPress-to-OpenStation boundary Pulse and dropped the
1224	* core-to-plugin one to a hairline, on the theory that only one
1225	* boundary was worth reading. Two weights in one short rail read as
1226	* two unrelated ideas instead of one system, so both are now the
1227	* same line: Pulse at the waist, falling away to nothing at both
1228	* ends, with a soft glow to hold it against the dock tint.
1229	*
1230	* Resolved one step back from the accent through
1231	* `--os-ui-accent-dim`, where every ambient use of Pulse resolves,
1232	* so "tone the station down" stays one edit.
1233	*/
1234	--os-dock-divider: color-mix(in srgb, var(--os-ui-accent-dim) 70%, transparent);
1235	--os-dock-floating-bg: rgba(12, 11, 15, 0.62);
1236	--os-dock-floating-border: rgba(255, 251, 255, 0.12);
1237	--os-dock-floating-border-top: rgba(255, 251, 255, 0.18);
1238	--os-dock-floating-highlight: rgba(255, 251, 255, 0.1);
1239	--os-dock-floating-shadow: rgba(0, 0, 0, 0.55);
1240
1241	/*
1242	* ---- The OpenStation layout ---------------------------------
1243	*
1244	* The constellation: the flyout that fans a menu's submenu out of
1245	* its tile on hover, on every rail in every layout. The rail's
1246	* divider used to live here too; it is shared chrome now and reads
1247	* through `--os-dock-divider`.
1248	*
1249	* The constellation's SURFACE is Obsidian, deliberately. The mesh
1250	* is spent on the row under the pointer and on the head's icon
1251	* halo — the two moments where the panel is answering the user —
1252	* and nowhere else. A flyout that was iridescent edge to edge
1253	* would have nothing left to say when you actually pointed at
1254	* something in it.
1255	*/
1256	--os-cn-surface: rgba(26, 23, 33, 0.82);
1257	--os-cn-border: rgba(255, 251, 255, 0.14);
1258	--os-cn-shadow: 0 24px 64px rgba(0, 0, 0, 0.62),
1259	0 2px 8px rgba(0, 0, 0, 0.4);
1260	--os-cn-fg: #fffbff;
1261	--os-cn-fg-muted: rgba(255, 251, 255, 0.62);
1262	--os-cn-legend: rgba(255, 251, 255, 0.4);
1263	--os-cn-divider: rgba(255, 251, 255, 0.1);
1264	/* The row under the pointer — the panel's identity moment. */
1265	--os-cn-row-fill: var(--os-ui-holo-fill);
1266	--os-cn-row-ink: var(--os-ui-holo-ink);
1267	/* Beam: the thread from the panel's underside down to the tile. */
1268	--os-cn-beam: color-mix(in srgb, var(--os-ui-accent-dim) 80%, transparent);
1269	--os-cn-radius: 14px;
1270	/*
1271	* Above every window and above the dock. Two panels coexist while
1272	* the pointer moves along the rail — one dismissing, one arriving
1273	* — and the retiring one is painted one step below so it can
1274	* never fade out on top of the menu being read.
1275	*/
1276	--os-cn-z: 2147483000;
1277
1278	/*
1279	* ---- Shell surfaces ----------------------------------------
1280	*
1281	* The panels, tab strips and washes that belong to the shell
1282	* rather than to the component kit. Same Obsidian-on-Void
1283	* composition; the selection wash is Pulse.
1284	*/
1285	--os-accent: #f252fc;
1286	--os-link: #ec9bff;
1287	--os-danger: #ff5a5a;
1288	--os-border: rgba(255, 251, 255, 0.1);
1289	--os-hover: rgba(255, 251, 255, 0.06);
1290	--os-selected: rgba(242, 82, 252, 0.18);
1291	--os-fg-muted: rgba(255, 251, 255, 0.7);
1292	/*
1293	* Shell text. Undeclared before the brand and it had to be: it read
1294	* light on the desk (tile labels over the wallpaper) and dark
1295	* inside a window, and one value broke one of the two. The station
1296	* settles the argument — every surface it owns is dark now, so
1297	* Starlight is right in both places.
1298	*/
1299	--os-fg: #fffbff;
1300	/*
1301	* "…on light" is a name from before the station, and it is now a
1302	* misnomer worth keeping: every surface that reads it — the folder
1303	* window, its preview pane, the upload HUD — was a light card and
1304	* is Obsidian today. The token means "text on the surfaces this one
1305	* names", and those surfaces are dark, so the text is Starlight.
1306	* Renaming it is a public-API change for the sake of tidiness; the
1307	* comment is cheaper and the behaviour is what matters.
1308	*/
1309	--os-fg-on-light: #fffbff;
1310	--os-panel-bg: #1a1721;
1311	--os-panel-header-bg: rgba(255, 251, 255, 0.04);
1312	--os-folder-window-bg: #1a1721;
1313	--os-my-wordpress-bg: #1a1721;
1314	--os-my-wordpress-fg: #fffbff;
1315	--os-my-wordpress-surface: rgba(255, 251, 255, 0.06);
1316	/*
1317	* The entity hover card — the "thumb" that floats over a tile with
1318	* a title, a featured image and an excerpt.
1319	*
1320	* It is NOT a dock chip, and it used to be painted as one.
1321	* `--os-tooltip-bg` is a fixed dark lozenge on every theme by
1322	* design — one line of text, always the same object, no reason to
1323	* follow anything. The card borrowed it, so a light desktop theme
1324	* summoned an Obsidian card over a white window, with a border in
1325	* `--os-ui-border` and an excerpt in `--os-ui-fg-muted` that both
1326	* followed the WINDOW instead. Three families, one surface.
1327	*
1328	* The card is window furniture: it belongs to the surface it was
1329	* summoned from, so it follows the theme that paints that surface.
1330	* Every value below is DERIVED rather than declared flat, which is
1331	* what makes that true — a theme that names only
1332	* `--os-my-wordpress-bg` (Legacy names exactly that, `#fff`) moves
1333	* the card with the window for free, and a theme that wants the
1334	* card alone names a `-card-` token.
1335	*
1336	* A card lands on the same colour as the window under it, so the
1337	* border and the shadow are the whole reason it reads as a
1338	* separate object. Neither is decoration here and neither may
1339	* collapse into the background — which is exactly what the border
1340	* did: `--os-ui-border` is #33303a on this palette, the SAME value
1341	* `--os-tooltip-bg` had, so the card had no edge at all.
1342	*
1343	* The shadow is the one flat value in the family. A drop shadow is
1344	* cast light, dark on a light theme and dark on a dark one, so
1345	* there is no window token for it to follow; it is named so a
1346	* theme can still reach it.
1347	*/
1348	--os-my-wordpress-card-bg: var(--os-my-wordpress-bg, #1a1721);
1349	--os-my-wordpress-card-fg: var(--os-my-wordpress-fg, #fffbff);
1350	--os-my-wordpress-card-fg-muted: var(--os-ui-fg-muted, #b3afb5);
1351	--os-my-wordpress-card-border: var(--os-ui-border, #33303a);
1352	--os-my-wordpress-card-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
1353	--os-my-wordpress-card-thumb-bg: var(
1354	--os-media-tile-bg,
1355	rgba(255, 251, 255, 0.05)
1356	);
1357	--os-my-wordpress-card-lock-bg: var(
1358	--os-ui-badge-danger-bg,
1359	rgba(255, 90, 90, 0.16)
1360	);
1361	--os-ai-panel-bg: rgba(26, 23, 33, 0.97);
1362	/*
1363	* ---- Window tab strip ---------------------------------------
1364	*
1365	* A window with sub-pages reads as three surfaces stacked in
1366	* depth, and the values below are that ramp: Astro on the focused
1367	* title bar, VOID for the track the tabs sit in, then the page
1368	* itself. The track is the darkest of the three on purpose — it
1369	* has to stay a distinct band under BOTH title-bar states, and
1370	* Obsidian would collapse into the unfocused bar (also Obsidian)
1371	* exactly when a window has the least going on to distinguish it.
1372	*
1373	* The active tab is not a colour, it is the page arriving early.
1374	* `chromeless.css` paints every admin page inside a window `#fff`
1375	* whatever the admin colour scheme says, so the tab can name that
1376	* white and the joint between the two is seamless. Retinting the
1377	* tab means retinting the page it belongs to, and these two move
1378	* together or the seam comes back.
1379	*
1380	* `-color-muted` is the second tone anything nested in an active
1381	* tab needs — the external tab's detach and close chips. It is
1382	* the only reason a "muted on light" value exists this far down a
1383	* dark palette.
1384	*/
1385	--os-tabs-bg: #1a1721;
1386	/*
1387	* The track on an UNFOCUSED window, which follows the title bar
1388	* down to Void rather than holding Obsidian.
1389	*
1390	* A focused window already reads as two surfaces: title bar and
1391	* track are the same Obsidian, and the tab lifts out of them. Let
1392	* the track keep that Obsidian while the bar above it dims and
1393	* the window reads as THREE, with the strip belonging to neither
1394	* the chrome above nor the page below. Following the bar down
1395	* keeps the count at two in both states.
1396	*
1397	* Both tracks read this: the shell's strip on an iframe window,
1398	* and `<os-tabs variant="window">` inside a native one. The track
1399	* is chrome in both cases, so it dims with the chrome; what keeps
1400	* the tab attached to the content while that happens is the
1401	* plate's fill, which wears the body's own colour rather than the
1402	* track's.
1403	*
1404	* Note the asymmetry with the title bar's pair, which is
1405	* deliberate: there, `--os-titlebar-bg` is the unfocused base and
1406	* `-focused` is the modifier. Here the base is the LIT value,
1407	* so a theme naming one track colour lands on the state where the
1408	* track is doing the most work.
1409	*
1410	* A theme that sets only `--os-tabs-bg` (Legacy, and anything
1411	* written before this token existed) resolves through it in both
1412	* states and keeps its single strip colour.
1413	*/
1414	--os-tabs-bg-unfocused: #0c0b0f;
1415	--os-tabs-color: #b3afb5;
1416	--os-tabs-active-bg: #fff;
1417	--os-tabs-active-color: #0c0b0f;
1418	--os-tabs-active-color-muted: rgba(12, 11, 15, 0.6);
1419	/*
1420	* The plate's own body: a frosted crown resolving to flat page
1421	* white well before the joint.
1422	*
1423	* Every stop is OPAQUE, and that is a requirement rather than a
1424	* preference. The face used to be translucent over a
1425	* `backdrop-filter`, which promotes it to its own compositor layer
1426	* and leaves a faint grey hairline where that layer is clipped —
1427	* down the plate's sides and across its bottom, which is precisely
1428	* where this design has a bright rail and needs everything else to
1429	* be invisible.
1430	*
1431	* The last stop must also land above the joint (the bottom
1432	* `--os-tabs-radius` of the plate), because the joint is painted
1433	* in flat `--os-tabs-active-bg` and a body still tinted where the
1434	* two meet draws a seam of its own. If you retune these stops,
1435	* check the bottom edge first.
1436	*/
1437	--os-tabs-active-frost: linear-gradient(
1438	180deg,
1439	#f4eff9 0%,
1440	#ffffff 58%
1441	);
1442	/*
1443	* The crown. Holomesh, masked away before the joint for the same
1444	* reason. It is on exactly ONE tab at a time — that is what keeps
1445	* the mesh an identity moment instead of wallpaper, and it is the
1446	* rule the rest of the kit follows. Set it to `none` to get the
1447	* plain frosted plate back.
1448	*/
1449	--os-tabs-active-crown: var(--os-mesh-holo);
1450	--os-tabs-active-crown-opacity: 0.3;
1451	/*
1452	* The rail: one continuous line around the silhouette of
1453	* page-plus-tab.
1454	*
1455	* This is the one place the accent is spent on the tab strip, and
1456	* spending it here is what lets the tab itself stay uncoloured —
1457	* so it is the accent the user picked, flat, and not Pulsemesh.
1458	* A mesh here would be the accent everywhere else on the tab
1459	* strip disagreeing with the one line that carries it. Written as
1460	* a gradient rather than a colour because the rail is painted as
1461	* a background-image through a mask.
1462	*
1463	* Set it to `none` for the plain frosted plate with no line.
1464	*/
1465	--os-tabs-rail: linear-gradient(
1466	var(--os-ui-accent, #f252fc),
1467	var(--os-ui-accent, #f252fc)
1468	);
1469	--os-tabs-rail-width: 2px;
1470	--os-media-tile-bg: rgba(255, 251, 255, 0.05);
1471	--os-media-visual-bg: rgba(255, 251, 255, 0.04);
1472	--os-skeleton-low: rgba(255, 251, 255, 0.05);
1473	--os-skeleton-high: rgba(255, 251, 255, 0.13);
1474	--os-drop-preview-bg: rgba(242, 82, 252, 0.1);
1475	--os-drop-preview-border: rgba(242, 82, 252, 0.55);
1476
1477	/*
1478	* File tiles — anywhere a `.os-file-tile` (or sibling
1479	* canvas tile) renders. The defaults match the desk: Starlight
1480	* labels over a dark sky, with a Pulse selection wash.
1481	*
1482	* Surfaces that are light in their own right override these in
1483	* their own scope, e.g.:
1484	*
1485	* .desktop-mode-folder-window {
1486	* --os-tile-fg: #1d2327;
1487	* --os-tile-hover-bg: rgba(0, 0, 0, 0.06);
1488	* }
1489	*
1490	* Plugin authors can override any of these in their own theme
1491	* to retint tiles globally without touching the rules below.
1492	*/
1493	--os-tile-fg: var(--os-fg, #fffbff);
1494	--os-tile-fg-muted: rgba(255, 251, 255, 0.7);
1495	--os-tile-hover-bg: rgba(255, 251, 255, 0.12);
1496	--os-tile-selected-bg: rgba(242, 82, 252, 0.24);
1497	--os-tile-focus-ring: var(--wp-admin-theme-color, #f252fc);
1498	--os-tile-shortcut-bg: rgba(12, 11, 15, 0.7);
1499	--os-tile-shortcut-fg: #fffbff;
1500	--os-tile-shortcut-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
1501
1502	/*
1503	* Label rendering tokens. The desk is dark at every wallpaper, so
1504	* a soft drop-shadow boosts legibility against the artwork,
1505	* regular weight, default antialiasing.
1506	*
1507	* Light-context surfaces (folder windows, My WordPress, any
1508	* future window with a light body) rebind these in their own
1509	* scope so tile labels render with the same crispness as the
1510	* surrounding chrome — no per-surface duplicate rules.
1511	*/
1512	--os-tile-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
1513	--os-tile-label-weight: 400;
1514	--os-tile-label-smoothing: auto;
1515	--os-tile-label-color: var(--os-tile-fg);
1516
1517	/*
1518	* Admin bar — how many pixels of the bar stay on screen while it
1519	* is parked off the top edge in `dynamic` mode. This is the
1520	* VISIBLE seam only: small enough to read as "nothing is there".
1521	* Themes may retune it; `0` makes the bar invisible until hovered.
1522	*/
1523	--os-admin-bar-peek: 4px;
1524
1525	/*
1526	* How far BELOW the parked bar the invisible reveal zone reaches.
1527	* Decoupled from the peek on purpose — the seam wants to be a
1528	* hairline, the pointer target wants to be forgiving, and tying
1529	* them together forces one of the two to be wrong. The band the
1530	* user actually has to hit is `peek + this`.
1531	*
1532	* CEILING: keep `peek + reveal-zone` comfortably under the admin
1533	* bar's own height (32px, 46px below 783px). Past that, leaving
1534	* the revealed bar drops the pointer straight back into the zone,
1535	* which re-reveals it — an oscillation loop, not a wider target.
1536	*/
1537	--os-admin-bar-reveal-zone: 16px;
1538
1539	/* Z-index layers */
1540	--os-z-base: 100;
1541	--os-z-dock: 200;
1542	--os-z-adminbar: 9991;
1543	--os-z-fullscreen: 99999;
1544	/* Window-link layer — above widgets (z 1), behind windows (z 100+). */
1545	--os-z-window-links: 50;
1546	/*
1547	* Mio layer — above every window (windows run 100 + stack
1548	* index) so the companion can perch on top of them, but below
1549	* the dock (200) so it never covers navigation.
1550	*/
1551	--os-z-mio: 190;
1552	/*
1553	* The notch — on the desk, under the windows (100 + stack index),
1554	* above the window-link wires (50) so a tie never draws across the
1555	* pill. It hangs over the strip a window's title bar occupies, and
1556	* a pill floating above someone's window is the shell talking over
1557	* the thing they are working in.
1558	*/
1559	--os-z-notch: 60;
1560
1561	/*
1562	* Window-link ties (relation splines between windows). The accent
1563	* follows the admin color scheme. Solid colors only — the resting
1564	* dimming is done with stroke-opacity/fill-opacity in
1565	* window-links.css, NOT color-mix(): an unresolvable color-mix()
1566	* inside a custom property makes the consuming declaration invalid
1567	* at computed-value time, which turns SVG strokes invisible and
1568	* marker fills black (the written rgba() fallback declaration is
1569	* already gone from the cascade by then). Overridable per scheme
1570	* or by plugins/themes without touching the renderer.
1571	*/
1572	--os-window-link-color: var(--wp-admin-theme-color, #f252fc);
1573	--os-window-link-color-active: var(--wp-admin-theme-color, #f252fc);
1574	--os-window-link-width: 1.5px;
1575	--os-window-link-accent: var(--wp-admin-theme-color, #f252fc);
1576	/*
1577	* Halo behind related windows (`.os-window--linked`).
1578	* A literal rgba of Pulse rather than a color-mix() of the accent —
1579	* same no-color-mix rationale as above: if this token failed to
1580	* resolve, the whole box-shadow declaration (elevation shadow
1581	* included) would go invalid. Schemes/plugins that retint the
1582	* accent should override this too.
1583	*/
1584	--os-window-link-glow: rgba(242, 82, 252, 0.45);
1585	}
1586
1587	/*
1588	* ---- Iframe windows keep a light body -----------------------------
1589	*
1590	* A window hosting a real `wp-admin` page is not a station surface — it
1591	* is a frame around someone else's document, and that document is
1592	* light. The reveal surface is what covers such a window while it
1593	* loads, so a dark one wiping back to a white page is a flash in the
1594	* wrong direction.
1595	*
1596	* The window's own background is deliberately NOT overridden here, and
1597	* that was learned the hard way: `chromeless.css` paints the iframe's
1598	* canvas, so nothing of the window shows through the page anyway —
1599	* while the tab strip above it carries a 16px `mask-image` fade at
1600	* each end (the "scroll for more tabs" affordance). A mask makes the
1601	* element's own background transparent, so a white window behind a
1602	* dark strip turned that invisible cosmetic into a white gradient
1603	* bleeding into the chrome. The strip needs the station's colour
1604	* behind it; the page needs its own; those are two different surfaces
1605	* and only one of them belongs to the window element.
1606	*
1607	* Native windows — the ones the station draws itself — are excluded
1608	* and keep the Obsidian reveal from the palette above.
1609	*/
1610	.os-window:not( .os-window--native ) {
1611	--os-window-reveal-surface: #fff;
1612	}
1613
1614	/*
1615	* ---- The WordPress admin colour scheme no longer tints the shell ----
1616	*
1617	* There used to be nine blocks here, one per admin colour scheme, each
1618	* setting `--wp-admin-theme-color` on
1619	* `.os-shell[data-os-scheme="…"]`. They are gone,
1620	* and their removal is a bug fix as much as a rebrand.
1621	*
1622	* OS Settings → Appearance writes the user's chosen accent as an inline
1623	* style on `<html>` — deliberately, so it also reaches the WordPress
1624	* admin bar, which is a SIBLING of `#os-shell`. But those
1625	* blocks matched the shell root, a descendant of `<html>`, and for
1626	* custom properties the nearest ancestor with a value wins no matter
1627	* what the specificity of the rule that set it was. So inside the shell
1628	* the scheme always beat the picker: choosing Rose, or Pulse, changed
1629	* the admin bar and nothing else. Every focus ring, tab underline, sort
1630	* arrow and selection wash kept the colour of the admin scheme.
1631	*
1632	* With the accent picker defaulting to Pulse there is nothing left for
1633	* these blocks to express: the station has one identity colour, and a
1634	* user who wants their admin scheme's hue picks it in the same panel.
1635	* The `data-os-scheme` attribute is still stamped on the
1636	* shell root for plugins and themes that key off it.
1637	*/
1638