feat(webui): phase 1a — shared base token layer (tokens.css)

First slice of the per-module CSS strategy: introduce
shared/css/tokens.css as the always-present, theme-agnostic base token
layer, loaded before all other stylesheets.

- Defines --font-mono (ui-monospace stack). Several feature sheets used
  var(--font-mono, monospace) with no definition, falling back to bare
  monospace; this unifies them with the richer stack used elsewhere.
- Hoists the --page-* identity hues out of css/admin.css so they belong
  to the base layer rather than the admin stylesheet. Values unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>

containers/libreportal/frontend/css/admin.css

@@ -1,16 +1,8 @@
 /* Admin area — Overview board + shared admin-page chrome. Visually aligned
    with the backup dashboard (tile/card style) and the config page header. */
 
-:root {
-    /* Per-area identity hues. Each admin area owns one colour, reused going
-       forward (Overview action buttons today; page headers/accents next).
-       The *-rgb companions feed rgba() tints. */
-    --page-updates: #4f8cff;  --page-updates-rgb: 79, 140, 255;   /* Update now */
-    --page-verify:  #1fb88a;  --page-verify-rgb:  31, 184, 138;   /* Verify — green by convention */
-    --page-backups: #4f8cff;  --page-backups-rgb: 79, 140, 255;   /* Backups — blue */
-    --page-ssh:     #9b7bf0;  --page-ssh-rgb:     155, 123, 240;
-    --page-system:  #f0883e;  --page-system-rgb:  240, 136, 62;
-}
+/* Per-area identity hues (--page-*) now live in shared/css/tokens.css so they
+   are part of the always-present base token layer. */
 
 .admin-page {
     padding: 4px 2px 40px;

containers/libreportal/frontend/index.html

@@ -10,6 +10,8 @@
   <link rel="apple-touch-icon" href="/icons/libreportal.svg">
 
   <!-- Styles -->
+  <!-- Base token layer (theme-agnostic): --font-mono, --page-* identity hues -->
+  <link rel="stylesheet" href="/shared/css/tokens.css">
   <link rel="stylesheet" href="/css/themes.css">
   <link rel="stylesheet" href="/css/loading-screen.css">
   <link rel="stylesheet" href="/css/setup-wizard.css">

containers/libreportal/frontend/shared/css/tokens.css

@@ -0,0 +1,27 @@
+/* shared/css/tokens.css — the always-present base token layer.
+ *
+ * First piece of the per-module CSS strategy (docs/frontend-modularization.md
+ * §5). Palette tokens that are NOT theme-specific live here under :root so they
+ * are defined exactly once and globally, instead of being stranded inside a
+ * feature stylesheet. Theme files (/themes/<name>/theme.css) still own the
+ * theme-specific palette under [data-theme]; this layer is theme-agnostic.
+ *
+ * Loaded early (before feature stylesheets) so every feature can rely on these.
+ */
+:root {
+    /* Monospace stack. Several feature sheets reference var(--font-mono,
+       monospace) — until now it was undefined, so those fields fell back to
+       bare `monospace`. Defining it here unifies them with the richer stack
+       the rest of the UI already uses (services.css, backup snapshot rows). */
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+    /* Per-area identity hues. Each admin/feature area owns one colour, reused
+       for action buttons and page accents. The *-rgb companions feed rgba()
+       tints (e.g. .admin-action-btn). Hoisted out of css/admin.css so they are
+       part of the base layer rather than tied to the admin stylesheet loading. */
+    --page-updates: #4f8cff;  --page-updates-rgb: 79, 140, 255;   /* Update now */
+    --page-verify:  #1fb88a;  --page-verify-rgb:  31, 184, 138;   /* Verify — green by convention */
+    --page-backups: #4f8cff;  --page-backups-rgb: 79, 140, 255;   /* Backups — blue */
+    --page-ssh:     #9b7bf0;  --page-ssh-rgb:     155, 123, 240;
+    --page-system:  #f0883e;  --page-system-rgb:  240, 136, 62;
+}