feat(site): phase 1 — the foundation

Astro 7 with the Node adapter, Starlight mounted at /docs, the token file, both
self-hosted typefaces, the layout shell, and the two build-time checks from §12.

The palette's gold and cyan are sampled from runic-emblem.png rather than
guessed, per §11: 494,059 opaque pixels binned by hue, each value annotated with
its measured contrast against the ground, and restricted rather than brightened
where a ratio fails.

- checkTokens.mjs fails the build on any colour literal outside tokens.css,
  which is what keeps §7's "recolouring is a file copy" promise true.
- checkFacts.mjs re-reads all 14 externally-sourced facts from their authorities
  over the Gitea API and fails on disagreement. It also enforces D13: no email
  address in the source outside brand-default/brand.json.
- Both were negative-tested; neither has ever been allowed to pass by default.

§6 asks for output:'server' with per-page prerender=true. Astro 7 expresses the
same runtime shape as output:'static' with an adapter, opting individual routes
out — so the default is static rather than accidentally server-rendered.

Co-Authored-By: Claude <noreply@anthropic.com>

src/styles/tokens.css

@@ -0,0 +1,129 @@
+/* ============================================================================
+   runicgateway.com — design tokens
+   ============================================================================
+
+   THIS IS THE ONLY FILE IN THE SOURCE TREE ALLOWED TO CONTAIN A COLOUR LITERAL.
+
+   PLAN.md §7 promises that recolouring the site is a file copy and a container
+   restart — never a rebuild. That promise holds only if every colour, radius,
+   shadow and font in the stylesheet is a custom property defined here, so that
+   the bind-mounted `theme.css` can redefine them and win.
+
+   `scripts/checkTokens.mjs` enforces it. Without the check, "one CSS file
+   changes the appearance" decays into "one CSS file changes most of the
+   appearance, and then there is a hardcoded #0e1318 in the footer".
+
+   Names deliberately match `website/client/src/styles/theme.css` where the
+   concepts line up, so a theme written for a Runic Gateway deployment is
+   legible here and vice versa (§7, §11).
+
+   -------------------------------------------------------------------------- */
+
+:root {
+  /* ---- Ground and panels -------------------------------------------------
+     Taken unchanged from the product's token file. Same bytes, same names. */
+  --bg: #0e1318;
+  --bg-deep: #0b0f14;
+  --panel-a: #192231;
+  --panel-b: #141a21;
+  --panel-flat: #11161d;
+  --line: #2a3544;
+  --line-soft: #1d2733;
+
+  /* ---- Interface and type ------------------------------------------------
+     Also the product's, unchanged. `--accent` is the steel blue that carries
+     links and interface emphasis across both sites. */
+  --accent: #7f99bd;
+  --accent-bright: #cdd9e8;
+  --ink: #eef3f8;
+  --head: #e6edf6;
+  --text: #c4cdd8;
+  --muted: #aeb8c4;
+  --dim: #6f7d8e;
+  --blue: #13243c;
+
+  /* ---- Status ------------------------------------------------------------
+     Reused verbatim from the product so a status pill means the same thing on
+     both sites (§11). */
+  --mode-live: #5fb98a;
+  --mode-maint: #e6c26a;
+
+  /* ---- The emblem's own palette ------------------------------------------
+     §11: gold and cyan as the accent pair, "derived from the artwork by
+     sampling, not guessed, and both held to WCAG AA against the ground".
+
+     Sampled from `runic-emblem.png` (1024x1024, 494,059 opaque pixels) by
+     binning every saturated pixel by hue and taking the mean of each bin. The
+     contrast ratio after each value is measured against `--bg` (#0e1318).
+     AA wants 4.5:1 for body text and 3:1 for large text and UI boundaries, so
+     the annotation is also the usage rule. Nothing here was nudged for taste;
+     where a sampled value fails a ratio it is restricted, not brightened. */
+
+  /* Hue 25-45deg — the ring. 65% of the emblem's saturated pixels. */
+  --gold-deep: #946b3c; /*  3.94:1 — rules, borders, UI edges. NEVER text.  */
+  --gold: #c8a368; /*  7.91:1 — emphasis text, headings, the mark.   */
+  --gold-bright: #e4cb90; /* 11.77:1 — highlights on gold surfaces.         */
+
+  /* Hue 180-210deg — the portal and its glow. */
+  --portal-deep: #0b6398; /*  2.89:1 — glow fills and gradients only.       */
+  --portal: #15b4de; /*  7.66:1 — the live-state signal, diagram lines. */
+  --portal-bright: #1bd6f1; /* 10.61:1 — the portal core, focus rings.        */
+
+  /* Hue 0deg — the ruby set into the ring. The only red in the artwork, so it
+     is the honest source for a destructive/error colour. */
+  --danger: #ff4e43; /*  5.71:1 */
+
+  /* ---- Type --------------------------------------------------------------
+     Both self-hosted (§11), so §6's `default-src 'self'` needs no exception.
+     Cinzel is the project's display face and is already the Android app's;
+     it is confined to the wordmark and hero. Inter carries everything else. */
+  --display: 'Cinzel Variable', Georgia, 'Times New Roman', serif;
+  --sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+
+  /* ---- Radius ------------------------------------------------------------
+     Named by the kind of surface rather than the pixel value, matching the
+     product's promotion of the same four tokens. */
+  --radius-pill: 999px;
+  --radius-panel: 12px;
+  --radius-card: 10px;
+  --radius-input: 8px;
+
+  /* ---- Elevation and surface treatments ---------------------------------- */
+  --shadow-card: 0 14px 34px rgb(0 0 0 / 30%);
+  --shadow-raised: 0 22px 48px rgb(0 0 0 / 38%);
+  --panel-grad: linear-gradient(180deg, var(--panel-a), var(--panel-b));
+  --glow-portal: 0 0 32px rgb(21 180 222 / 22%);
+
+  /* ---- Layout ------------------------------------------------------------
+     Here rather than in global.css so a theme can widen the measure without
+     touching the stylesheet. */
+  --measure: 68ch;
+  --page-max: 1180px;
+  --gutter: 24px;
+  --header-h: 68px;
+}
+
+/* ---- Light mode, docs only ----------------------------------------------
+   §11: marketing pages are single-theme by design; the docs honour the
+   reader's light/dark preference. Starlight ships an accessible light theme,
+   so this is not a second palette — it is the four brand colours restated at
+   the lightness a white ground needs, plus the surfaces Starlight tints.
+
+   Same hues as the dark set, darkened rather than re-picked, with the
+   contrast against `--light-bg` measured the same way. They live here, in the
+   token file, because that is the rule: a literal anywhere else fails
+   `checkTokens.mjs`, and a bind-mounted `theme.css` must be able to reach
+   these too. */
+:root {
+  --light-bg: #f6f8fb;
+  --light-panel: #ffffff;
+  --light-line: #d6dee9;
+  --light-ink: #16202c;
+  --light-text: #33414f;
+  --light-muted: #5a6875;
+
+  --light-accent: #3c5f8f; /* 6.12:1 — the steel blue, darkened for links   */
+  --light-gold: #7a5a24; /* 5.95:1 — the ring, darkened for emphasis     */
+  --light-portal: #0a5f80; /* 6.67:1 — the portal, darkened for diagrams   */
+}