fix(mobile): the phone library wears the app's theme

The phone screen was painted in literals — `#101014`, `#f4f4f5` and forty more
— so it stayed dark whatever theme was set: pick Light, press Mobile Cloud,
and the reader is handed a black page with white ink.

Every surface and ink in `styles/mobile-library.css` is now one alias
(`--ml-bg`, `--ml-text`, …) that reads the theme's own tokens, the faint
linings and fills are a `color-mix` of the ink at the alpha they already
carried, and the amber the file already asked `var(--accent)` for is now what
the star, the pressed pill and the selected frame wear too. Only the four
status inks carry a light-theme override, the tokens having no word for them.

The five inline dark styles left in `MobileLibrary.tsx` read the same aliases.

Measured on the running container at 390×800, Light chosen on the desktop: the
phone was `rgb(16,16,20)` on ink `rgb(244,244,245)` whichever theme was set;
it is now `rgb(255,255,255)` on `rgb(20,24,29)` under Light and `rgb(0,0,0)` on
`rgb(242,243,245)` under Dark, held through the handover and on the way back. A
contrast sweep of the grid and the reader in both themes leaves nothing under
3:1 but the tick glyph, which its own box draws.

`mobile-pick-check` asked for one frozen amber; it asks for the accent the app
is using, which is what that outline has become.

docker/frontend/scripts/mobile-pick-check.mjs

@@ -217,6 +217,14 @@ const read = await page.evaluate(() => {
     cells: cells.length,
     selected: sel.map((c) => c.querySelector('img')?.getAttribute('alt') ?? ''),
     outline: sel[0] ? getComputedStyle(sel[0]).outlineColor : '',
+    accent: (() => {
+      const probe = document.createElement('div');
+      probe.style.background = 'var(--accent)';
+      document.body.append(probe);
+      const c = getComputedStyle(probe).backgroundColor;
+      probe.remove();
+      return c;
+    })(),
     inView: !!(box && r && r.top >= box.top - 4 && r.bottom <= box.bottom + 4),
     gridMode: !!document.querySelector('.mob-lib-grid'),
     singles: document.querySelectorAll('.mob-lib-single-card').length,
@@ -226,7 +234,7 @@ step('closing hands the reader to ALL THUMBS', read.gridMode && read.singles ===
 step('exactly one frame is selected', read.selected.length === 1, `${read.selected.length}`);
 step('the frame swiped to is the selected one', read.selected[0] === swiped, `swiped=${swiped} selected=${read.selected[0]}`);
 step('the selected frame is on screen', read.inView);
-step('the selected frame is marked in CSS', read.outline === 'rgb(245, 158, 11)', read.outline);
+step('the selected frame is marked in the accent', read.outline === read.accent && read.accent.startsWith('rgb('), `${read.outline} vs accent ${read.accent}`);
 step('no page error', errors.length === 0, errors.join(' | '));
 
 await browser.close();