ui design 101 skill (#68)

Reviewed-on: #68
Co-authored-by: vickydotbat <vickydotbat@tutamail.com>

.agents/skills/ui-design-101/SKILL.md

@@ -0,0 +1,133 @@
+---
+name: ui-design-101
+description: Design the actions in an interface — buttons, confirmations, destructive operations, bulk edits, admin and moderation tools. Use when building or reviewing anything a user clicks repeatedly, anything that deletes or hides data, any list of rows with per-row actions, or when the user says a tool is tedious, asks for a confirmation dialog, or reports an interface that "does nothing".
+---
+
+# UI Design 101: actions
+
+Visual design is a different skill. This one is about what happens when someone
+clicks — and, above all, what happens when they click **the hundredth time**.
+
+Every rule here is a checkable property of an interface. Apply all of them to
+whatever you are building; an interface that fails any one of them is not done.
+
+## Price every action at its hundredth use
+
+Design for the hundredth click, not the first. An extra dialog, an extra
+scroll, an extra page load is nothing once and unbearable a hundred times. Ask
+directly: how many times will one person do this in one sitting? If the answer
+is more than a handful, the per-use cost is the whole design problem.
+
+The failure has a shape: a tool that is *pleasant to demo and brutal to use*.
+Nobody notices it while building, because builders click things twice.
+
+## Ceremony follows reversibility
+
+Undo beats confirm. A confirmation asks the user to be certain in advance; an
+undo lets them be wrong cheaply. Prefer the second.
+
+- **Reversible action** (hide, archive, mark, tag): no confirmation. Ever. Do
+  it, show it happened, offer the undo in the same spot.
+- **Irreversible action** (purge, permanent delete, send, publish): confirm
+  once, and say plainly that it cannot be undone.
+
+Ceremony on a reversible action is worse than useless: it trains the user to
+dismiss dialogs without reading, so the one dialog that matters gets dismissed
+too.
+
+## Spend one confirmation per intent
+
+The confirmation budget is per *intent*, not per *item*. A user removing a
+hundred things decided once; charge them once. A hundred dialogs for a hundred
+items is the same as no dialogs at all, minus an hour of their life.
+
+When one confirmation covers many items, make it carry its weight: name the
+scope and the exact count ("Purge 143 pages in Skills — this cannot be
+undone"), and for the genuinely dangerous ones, require typing something
+deliberate rather than a single click.
+
+## Let the reversible state be the selection
+
+Where a flow is *choose many, then commit*, the reversible action is the
+selection mechanism. Mark → review → commit. No parallel checkbox concept
+required.
+
+Marking beats checkboxes on properties, not just tokens: the marks survive a
+reload, they are visible to a colleague looking at the same screen, they can be
+undone one at a time, and the user sees the staged set accumulate as they go.
+
+## Act in place
+
+An action reports its result where the user is standing. Re-render the row, the
+card, the item. Keep scroll position, keep focus, keep their place in a long
+list.
+
+A full page reload after each action is a scroll-position bug wearing a
+navigation costume. If the user must find their place again after every click,
+the hundredth click costs a hundred scrolls.
+
+## Make silence impossible
+
+Every action ends in an observable outcome: success shown, or failure shown
+with a reason. An action that can quietly do nothing is the worst bug class in
+interface design, because the user keeps working and only later discovers that
+none of it happened.
+
+Own your dialogs for the same reason. Browsers let a user permanently suppress
+native `alert`/`confirm`/`prompt` dialogs ("prevent this page from creating
+additional dialogs"). Code that reads a suppressed `confirm` sees "cancelled"
+and correctly does nothing — forever, silently, until a reload. Use the
+platform's or framework's own modal component so the confirmation is yours to
+control.
+
+## Give bulk work a bulk path
+
+Wherever the data can hold hundreds of items, the interface offers an action
+over the whole set — a filtered set, a marked set, or a namespace. A per-item
+action is not a bulk feature no matter how fast the loop.
+
+Bulk operations are partial by nature. Design for it up front:
+
+- Process items independently; one failure does not abandon the rest.
+- Report per item: succeeded, failed with a reason, skipped with a reason.
+- Show progress while it runs, and let the user cancel between items.
+- Leave every item either fully done or fully untouched — never half-applied.
+- Chunk the work so a large set cannot time out the request.
+
+## Finish the user's job
+
+Match the actions to the *goal*, not to the data model. If the user's goal is
+"make this gone" and the tool only offers "make this quiet", the tool is
+incomplete even though every button works. Hidden is not deleted; unpublished
+is not removed; archived is not gone.
+
+Where a two-step model exists for safety (hide, then remove), both steps belong
+on the screen where the work happens. A second step reachable only from a
+different page, one item at a time, is a step that will not be taken.
+
+## Show the outstanding work
+
+Surface the counts that tell the user how much is left: how many items are
+marked, how many remain, how many failed. A cleanup task needs a visible
+ending, otherwise it is just scrolling.
+
+## Explain a missing action
+
+When a control is absent because of a permission, a state, or a rule, say so in
+its place. An unexplained gap reads as a bug and sends the user hunting. State
+the reason and, where there is one, the path to earning the action.
+
+## Design check
+
+Before calling an interface done, walk it as a user with a hundred items:
+
+1. Count the interactions for one item. Multiply by a hundred. Is that a
+   working afternoon?
+2. Which actions prompt? Is every one of them irreversible?
+3. Which actions are irreversible? Does each state that plainly, once, with the
+   count?
+4. After each action, did the user keep their place?
+5. Can any action fail silently? What does the user see when it does?
+6. Is there a path that handles the whole set in one decision?
+7. Does the tool reach the user's actual goal, or stop at the model's halfway
+   state?

prototype/README.md

@@ -1,21 +0,0 @@
-# Throwaway prototype for #53 — palette candidates on a dense page
-
-Not for merge. The theme SCSS on this branch is mechanically tokenised (literal
-hexes and `rgba()` triples turned into `var(--wg-*)`) so a candidate palette can
-be swapped at runtime instead of rebuilt per candidate.
-
-- `contrast.py` — WCAG check for every candidate surface/ink pair. Run first.
-- `_base-plumnoir.css` + `candidate-{a,b,c}.css` — the candidates, as `:root` overrides.
-- `seed.js` — categories + one 13-post topic with a quote, over the REST API.
-- `shots.js` / `probe.js` — screenshots and a computed-style probe, both against the live stack.
-- `shots/` — the images the resolution is judged on.
-
-Replay:
-
-```bash
-cd ../sow-nodebb && nix develop --command make dev-reset && nix develop --command make dev
-cd - && node prototype/seed.js
-export PLAYWRIGHT_BROWSERS_PATH=$(nix build --print-out-paths --no-link nixpkgs#playwright-driver.browsers)
-P=$(nix build --print-out-paths --no-link nixpkgs#playwright-test)
-NODE_PATH=$P/lib/node_modules nix shell nixpkgs#playwright-test -c node prototype/shots.js
-```

prototype/_base-plumnoir.css

@@ -1,16 +0,0 @@
-/* shared by all candidates: the Plum Noir surface lineage (#49 rule "re-tune, don't replace") */
-:root {
-  --wg-bg: #150E13;
-  --wg-bg-deep: #0C0810;
-  --wg-bg-deep-rgb: 12, 8, 16;
-  --wg-bg-deepest-rgb: 8, 6, 11;
-  --wg-panel: #21161C;
-  --wg-panel-2: #180F16;
-  --wg-panel-3: #351E28;
-  --wg-plum: #351E28;
-  --wg-plum-rgb: 53, 30, 40;
-  --wg-plum-soft: #4A2A38;
-  --wg-velvet-panel: rgba(33, 22, 28, 0.97);
-  --wg-velvet-panel-hover: rgba(45, 30, 38, 0.98);
-  --wg-ledger-panel: rgba(24, 15, 22, 0.97);
-}

prototype/candidate-a.css

@@ -1 +0,0 @@
-/* A — Plum Noir Ledger. One metal. Surfaces re-tuned, gold does every job it does today. */

prototype/candidate-b.css

@@ -1,15 +0,0 @@
-/* B — Two Metals. A + pewter #9EA7B3: pewter structures, gilt marks what matters or can be touched. */
-:root {
-  --wg-pewter: #9EA7B3;
-  --wg-pewter-rgb: 158, 167, 179;
-  /* structure moves to pewter */
-  --wg-border: rgba(var(--wg-pewter-rgb), 0.20);
-  --wg-border-soft: rgba(var(--wg-pewter-rgb), 0.11);
-  --wg-ledger-ruling: rgba(var(--wg-pewter-rgb), 0.075);
-  --wg-ledger-rule-strong: rgba(var(--wg-pewter-rgb), 0.20);
-  --wg-ledger-border: rgba(var(--wg-pewter-rgb), 0.24);
-  /* metadata is structure, not value */
-  --wg-text-muted: #9EA7B3;
-  --wg-ledger-ink-muted: #9EA7B3;
-  /* gilt keeps: links, ledger ink, buttons, focus ring, stamps */
-}

prototype/candidate-c.css

@@ -1,17 +0,0 @@
-/* C — Two Metals + plain paper. B + one champagne inset, to test whether a light surface earns a slot. */
-:root {
-  --wg-paper: #EFE5D2;
-  --wg-ink-on-light: #351E28;
-  --wg-focus-ring-on-light: #09080B;
-}
-/* the inset: quoted material is paper pasted into the ledger. No metal on it (#50 finding 9). */
-blockquote, .wg-paper {
-  background: var(--wg-paper) !important;
-  color: var(--wg-ink-on-light) !important;
-  border: 0 !important;
-  border-left: 3px solid var(--wg-red) !important;
-  box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 10px 22px rgba(0,0,0,.35) !important;
-}
-blockquote a, .wg-paper a { color: #6E1F2A !important; }
-blockquote *, .wg-paper * { color: inherit !important; }
-blockquote :focus-visible, .wg-paper :focus-visible { outline-color: var(--wg-focus-ring-on-light) !important; }

prototype/contrast.py

@@ -1,78 +0,0 @@
-#!/usr/bin/env python3
-"""Throwaway WCAG 2.x contrast check for the #53 palette candidates.
-
-Same method as the #50 headroom research: relative luminance, (L1+.05)/(L2+.05),
-alpha colours flattened over their real backdrop first (source-over, sRGB).
-Self-checks against WCAG's published values before printing anything.
-"""
-
-
-def _srgb(c):
-    c /= 255
-    return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
-
-
-def rgb(h):
-    h = h.lstrip("#")
-    return tuple(int(h[i : i + 2], 16) for i in (0, 2, 4))
-
-
-def lum(h):
-    r, g, b = rgb(h)
-    return 0.2126 * _srgb(r) + 0.7152 * _srgb(g) + 0.0722 * _srgb(b)
-
-
-def flatten(fg, alpha, bg):
-    f, b = rgb(fg), rgb(bg)
-    return "#%02x%02x%02x" % tuple(round(f[i] * alpha + b[i] * (1 - alpha)) for i in range(3))
-
-
-def ratio(a, b):
-    la, lb = lum(a), lum(b)
-    hi, lo = max(la, lb), min(la, lb)
-    return (hi + 0.05) / (lo + 0.05)
-
-
-def _selfcheck():
-    assert round(ratio("#000000", "#ffffff"), 1) == 21.0
-    assert round(ratio("#767676", "#ffffff"), 2) == 4.54
-    assert round(ratio("#949494", "#ffffff"), 2) == 3.03
-    assert ratio("#959595", "#ffffff") < 3.0
-    assert flatten("#ffffff", 0.5, "#000000") == "#808080"
-
-
-_selfcheck()
-
-# candidate surfaces (the invented ones need proving; the rest come from #50)
-SURFACES = {
-    "bg #150E13": "#150E13",
-    "bg-deep #0C0810": "#0C0810",
-    "panel #21161C": "#21161C",
-    "panel-2 #180F16": "#180F16",
-    "panel-3 / Plum Noir #351E28": "#351E28",
-    "plum-soft #4A2A38": "#4A2A38",
-    "paper / champagne #EFE5D2": "#EFE5D2",
-}
-
-INKS = {
-    "Bone #E6E0D6": "#E6E0D6",
-    "Ash #B9B2A6": "#B9B2A6",
-    "Dust #9A9086": "#9A9086",
-    "Ledger Ink #D8C28A": "#D8C28A",
-    "Tarnished Gold #C2A35A": "#C2A35A",
-    "Old Gilt #A8893F": "#A8893F",
-    "Gold Lit #E0C878": "#E0C878",
-    "Pewter #9EA7B3": "#9EA7B3",
-    "Ink-on-light #351E28": "#351E28",
-    "Red #8E3438": "#8E3438",
-    "Stamp #A84A4E": "#A84A4E",
-}
-
-if __name__ == "__main__":
-    w = max(len(k) for k in INKS)
-    for sname, s in SURFACES.items():
-        print(f"\n== {sname}")
-        for iname, i in INKS.items():
-            r = ratio(i, s)
-            tag = "AA" if r >= 4.5 else ("large/non-text" if r >= 3.0 else "FAIL")
-            print(f"  {iname:<{w}} {r:6.2f}  {tag}")

prototype/ornament/README.md

@@ -1,27 +0,0 @@
-# Throwaway prototype for #54 — the ornament and frame component set
-
-Not for merge. Nothing here is theme code; it is the named component set made
-concrete so it can be looked at.
-
-- `ornament.css` — the component set itself, standalone, zero images.
-- `specimen.html` — every named component, at both densities, on one page.
-- `real-surface.css` — the same components mapped onto real NodeBB markup.
-- `shots.js` — before/after on the live category list and a 13-post topic.
-- `shots/` — the images the resolution is judged on.
-
-The palette is candidate B from #53, injected at runtime (`../_base-plumnoir.css`
-plus `../candidate-b.css`), so no rebuild is needed to see it.
-
-Replay:
-
-```bash
-# specimen page — needs http, not file://: mask-image on an SVG is blocked by CORS
-python3 -m http.server 8931   # then open /prototype/ornament/specimen.html
-
-# real surface
-cd ../sow-nodebb && nix develop --command make dev-reset && nix develop --command make dev
-cd - && node prototype/seed.js
-export PLAYWRIGHT_BROWSERS_PATH=$(nix build --print-out-paths --no-link nixpkgs#playwright-driver.browsers)
-P=$(nix build --print-out-paths --no-link nixpkgs#playwright-test)
-NODE_PATH=$P/lib/node_modules nix shell nixpkgs#playwright-test -c node prototype/ornament/shots.js
-```

prototype/ornament/ornament.css

@@ -1,299 +0,0 @@
-/* #54 — the ornament and frame component set, as a closed vocabulary.
-   Throwaway. Zero images: every mark here is CSS. Palette = candidate B (#53). */
-
-/* ---- palette B (from prototype/_base-plumnoir.css + candidate-b.css) ---- */
-:root {
-  --wg-bg: #150e13;
-  --wg-bg-deep: #0c0810;
-  --wg-panel: #21161c;
-  --wg-panel-2: #180f16;
-  --wg-panel-3: #351e28;
-  --wg-plum: #351e28;
-  --wg-plum-soft: #4a2a38;
-
-  --wg-gold: #c2a35a;
-  --wg-gold-rgb: 194, 163, 90;
-  --wg-gold-lit: #e0c878;
-  --wg-old-gilt: #a8893f;
-  --wg-ledger-ink: #d8c28a;
-  --wg-red: #8e3438;
-  --wg-stamp: #a84a4e;
-
-  --wg-pewter: #9ea7b3;
-  --wg-pewter-rgb: 158, 167, 179;
-
-  --wg-text: #e6e0d6;
-  --wg-text-soft: #b9b2a6;
-  --wg-text-muted: #9ea7b3;
-
-  /* the four dividers, as tokens — this list is closed */
-  --wg-ruling: rgba(var(--wg-pewter-rgb), 0.075);
-  --wg-edge: rgba(var(--wg-pewter-rgb), 0.2);
-  --wg-edge-soft: rgba(var(--wg-pewter-rgb), 0.11);
-
-  --wg-page-width: 1420px;
-  --wg-ledger-line: 1.78rem;
-  --wg-font-display: Cinzel, Georgia, serif;
-  --wg-font-body: Jost, system-ui, sans-serif;
-}
-
-/* ======================================================================
-   1. RAIL — not decoration, a constraint. One left edge, one right edge,
-   every page, every density (#49 One Rail).
-   ====================================================================== */
-.wg-rail {
-  max-width: var(--wg-page-width);
-  margin-inline: auto;
-  padding-inline: 1.5rem;
-}
-
-/* ======================================================================
-   2. PANEL — the bounded surface. Two weights, nothing between.
-   Edges Fade (#49): the edge is a masked overlay, strongest at the top,
-   gone by the bottom. No hairline runs corner to corner.
-   ====================================================================== */
-.wg-panel {
-  position: relative;
-  background: var(--wg-panel);
-  border-radius: 0;
-  padding: var(--wg-pad, 1rem);
-}
-.wg-panel::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  border: 1px solid var(--wg-edge);
-  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.12));
-  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.12));
-  pointer-events: none;
-}
-/* cheap panel: the same shape one step down. No sheen, no fade — flat. */
-.wg-panel--plain {
-  background: var(--wg-panel-2);
-}
-.wg-panel--plain::before {
-  border-color: var(--wg-edge-soft);
-  -webkit-mask-image: none;
-  mask-image: none;
-}
-/* velvet sheen — texture #1. Inset only, never an asset. */
-.wg-panel--velvet {
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.025),
-    inset 0 0 34px rgba(96, 32, 68, 0.11),
-    0 10px 26px rgba(0, 0, 0, 0.24);
-}
-.wg-panel--velvet:hover {
-  background: color-mix(in srgb, var(--wg-panel) 88%, var(--wg-plum-soft));
-}
-
-/* ======================================================================
-   3. PLAQUE — a name plate, not a band. inline-block is the whole idea.
-   Page titles and standing labels. Suppressed where the logo does the job.
-   ====================================================================== */
-.wg-plaque {
-  display: inline-block;
-  background: var(--wg-bg-deep);
-  border: 1px solid var(--wg-edge);
-  padding: 0.35rem 1rem;
-  font-family: var(--wg-font-display);
-  font-weight: 600;
-  font-size: 0.86rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--wg-ledger-ink);
-}
-.wg-plaque--gilt {
-  border-color: rgba(var(--wg-gold-rgb), 0.34);
-}
-/* the straddling legend: a title sitting on its own panel edge */
-.wg-legend {
-  position: relative;
-}
-.wg-legend > .wg-plaque {
-  position: absolute;
-  top: -1.05rem;
-  left: 1.25rem;
-}
-
-/* ======================================================================
-   4. BAND — a strip that spans the rail, edge to edge. Never inset.
-   Shell chrome only: topbar, lintel, footer, thresholds.
-   ====================================================================== */
-.wg-band {
-  position: relative;
-  background: var(--wg-panel-2);
-  padding-block: 0.75rem;
-}
-/* LINTEL — divider #3. Gilt rule that bleeds light downward (#48 Warframe). */
-.wg-band--lintel {
-  border-top: 1px solid rgba(var(--wg-gold-rgb), 0.5);
-  background-image: linear-gradient(
-    180deg,
-    rgba(var(--wg-gold-rgb), 0.1),
-    transparent 32px
-  );
-}
-
-/* ======================================================================
-   5. LEDGER — the archive interior. Ruled rows, one line height.
-   ====================================================================== */
-.wg-ledger {
-  background: var(--wg-panel-2);
-  border-radius: 0;
-  overflow: hidden;
-}
-.wg-ledger__row {
-  display: flex;
-  gap: 1rem;
-  align-items: baseline;
-  min-height: calc(var(--wg-ledger-line) * 1.6);
-  padding: 0.6rem 1rem;
-  /* RULING — divider #1. Row separation, nothing else. */
-  background: linear-gradient(
-    to bottom,
-    transparent calc(100% - 1px),
-    var(--wg-ruling) calc(100% - 1px)
-  );
-  /* gilt left mark: this row has something at stake (unread, owned) */
-  border-left: 1px solid transparent;
-}
-.wg-ledger__row--marked {
-  border-left-color: rgba(var(--wg-gold-rgb), 0.34);
-}
-.wg-ledger__row:last-child {
-  background: none;
-}
-
-/* ======================================================================
-   DIVIDERS — the closed list. Four, and no fifth.
-   1. ruling   (above, .wg-ledger__row)
-   2. fading rule
-   3. lintel   (above, .wg-band--lintel)
-   4. spine
-   ====================================================================== */
-.wg-rule {
-  height: 1px;
-  border: 0;
-  background: linear-gradient(90deg, var(--wg-edge), transparent);
-}
-.wg-spine {
-  position: relative;
-  padding-left: 1.25rem;
-}
-.wg-spine::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  top: 0.2rem;
-  bottom: 0.2rem;
-  width: 1px;
-  background: linear-gradient(
-    to bottom,
-    rgba(var(--wg-gold-rgb), 0.18),
-    rgba(var(--wg-gold-rgb), 0.07)
-  );
-}
-
-/* ======================================================================
-   SECTION HEADER — one component, two forms.
-   A header earns ornament by switching face and case, not by gaining a
-   background or a flourish (#48 Warframe).
-   ====================================================================== */
-.wg-head {
-  font-family: var(--wg-font-body);
-  font-weight: 600;
-  font-size: 1rem;
-  letter-spacing: 0;
-  text-transform: none;
-  color: var(--wg-text-soft);
-  margin: 0 0 0.5rem;
-}
-.wg-head--earned {
-  font-family: var(--wg-font-display);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--wg-ledger-ink);
-}
-/* the one permitted flourish, and only on an earned header: a rule that
-   starts at the text and fades out to the rail. */
-.wg-head--earned.wg-head--ruled {
-  display: flex;
-  align-items: center;
-  gap: 0.9rem;
-}
-.wg-head--earned.wg-head--ruled::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: linear-gradient(90deg, rgba(var(--wg-gold-rgb), 0.34), transparent);
-}
-
-/* ======================================================================
-   ICON — mask over a token, never a coloured image.
-   Pewter structures, gilt marks value (#49 Two Metals).
-   ====================================================================== */
-.wg-icon {
-  display: inline-block;
-  width: var(--wg-icon-size, 20px);
-  height: var(--wg-icon-size, 20px);
-  background-color: var(--wg-pewter);
-  -webkit-mask: var(--wg-icon-src) center / contain no-repeat;
-  mask: var(--wg-icon-src) center / contain no-repeat;
-  vertical-align: -0.2em;
-}
-.wg-icon--gilt {
-  background-color: var(--wg-gold);
-}
-
-/* ======================================================================
-   HORIZON — texture #2. The city at night instead of hero art.
-   Showcase only. Radial, warm, never cyan (#49 No Machines).
-   ====================================================================== */
-.wg-horizon {
-  background:
-    radial-gradient(
-      120% 80% at 50% 100%,
-      rgba(var(--wg-gold-rgb), 0.12),
-      transparent 62%
-    ),
-    linear-gradient(180deg, var(--wg-bg-deep), var(--wg-bg));
-}
-
-/* ======================================================================
-   DENSITY — one shell, two densities. Ornament weight and row spacing
-   only. Width never changes (One Rail).
-   ====================================================================== */
-.wg-showcase {
-  --wg-pad: 1.5rem;
-  --wg-icon-size: 28px;
-}
-.wg-app {
-  --wg-pad: 0.75rem;
-  --wg-icon-size: 20px;
-}
-/* app density: sheen off, plaques off except the page title, headers reduced */
-.wg-app .wg-panel--velvet {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.42);
-}
-.wg-app .wg-band--lintel {
-  background-image: linear-gradient(
-    180deg,
-    rgba(var(--wg-gold-rgb), 0.06),
-    transparent 18px
-  );
-}
-
-/* ======================================================================
-   STAMP — the only red. A state or a mark of loss, never decoration.
-   ====================================================================== */
-.wg-stamp {
-  font-family: var(--wg-font-display);
-  font-size: 0.78rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--wg-stamp);
-  border: 1px solid rgba(168, 74, 78, 0.45);
-  padding: 0.1rem 0.5rem;
-}

prototype/ornament/real-surface.css

@@ -1,180 +0,0 @@
-/* #54 — the component set applied to one real surface: the category list and
-   a topic, on the live stack. Injected at runtime over palette B. Throwaway.
-
-   Every rule below is one of the named components doing its job on real
-   NodeBB markup. Nothing new is invented here. */
-
-/* ---- SQUARE. One shape, every surface. A cut or rounded corner is a second
-   shape language and the shell only gets one. ---- */
-/* specificity has to beat the theme's own `border-radius: 8px !important` */
-html body [class],
-html body [class]::before,
-html body [class]::after,
-html body [class] [class],
-html body [class] [class][class],
-html body blockquote,
-html body pre,
-html body code,
-html body img,
-html body input,
-html body textarea,
-html body button {
-  border-radius: 0 !important;
-}
-/* Signets stay square like everything else — the theme's own signet plate is
-   the settled treatment and it is square. Only the status dot is round,
-   because it is a dot. */
-html body [class] [class].status,
-html body .status {
-  border-radius: 50% !important;
-}
-
-/* ---- PANEL: edges fade. No hairline runs corner to corner, but the edge is
-   present enough to hold the panel off the page. ---- */
-li[component="categories/category"],
-li[component="category/topic"],
-.westgate-surface,
-.card,
-ul.categories-list,
-ul.westgate-categories-list,
-[component="post/content"],
-.post-container {
-  border-color: transparent !important;
-  position: relative;
-}
-ul.categories-list::after,
-ul.westgate-categories-list::after,
-.westgate-surface::after,
-.post-container::after,
-body.template-category .category-header::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border: 1px solid rgba(var(--wg-pewter-rgb), 0.34);
-  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.16));
-  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.16));
-  pointer-events: none;
-  z-index: 2;
-}
-
-/* ---- A square edge with no falloff reads as a cut, not an edge. Every
-   bounded surface sits on a wide, offset-down black shadow: no lift, no
-   stacking claim, just the corner catching the room (Candlelight). ---- */
-html body ul.categories-list,
-html body ul.westgate-categories-list,
-html body .westgate-surface,
-html body .post-container,
-html body .topic-list-header,
-html body [data-widget-area] .card,
-html body.template-category .category-header {
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.02),
-    0 10px 26px rgba(0, 0, 0, 0.34),
-    0 2px 4px rgba(0, 0, 0, 0.28) !important;
-}
-
-/* ---- LEDGER: rows are ruled, not boxed. The category list is a ledger:
-   one surface, ruled rows, no gaps and no per-row card. ---- */
-ul.categories-list,
-ul.westgate-categories-list {
-  gap: 0 !important;
-  background: var(--wg-panel-2);
-}
-ul.categories-list li[component="categories/category"],
-ul.westgate-categories-list li[component="categories/category"] {
-  border-radius: 0 !important;
-  background: none !important;
-  /* RULING — the only separator inside a ledger */
-  background-image: linear-gradient(
-    to bottom,
-    transparent calc(100% - 1px),
-    var(--wg-ledger-ruling) calc(100% - 1px)
-  ) !important;
-}
-ul.categories-list li[component="categories/category"]::after,
-ul.westgate-categories-list li[component="categories/category"]::after {
-  content: none;
-}
-
-/* ---- SECTION HEADER: earned form = display face + uppercase + one colour
-   token + the single permitted flourish, a gilt rule fading to the rail. ---- */
-li[component="categories/category"] h2.title,
-.category-header h1,
-[data-widget-area] .card-header {
-  display: flex !important;
-  align-items: center;
-  gap: 0.9rem;
-  font-family: var(--wg-font-display) !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.08em !important;
-  color: var(--wg-ledger-ink) !important;
-  background: none !important;
-}
-li[component="categories/category"] h2.title::after,
-.category-header h1::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: linear-gradient(90deg, rgba(var(--wg-gold-rgb), 0.34), transparent);
-}
-
-/* ---- CASE: Cinzel is always uppercase. One rule, no exceptions, because
-   its lowercase is a small-caps design and reads as a weaker version of the
-   same thing rather than a second voice. ---- */
-html body [class] h1,
-html body [class] h2,
-html body [class] h3,
-html body .topic-title,
-html body .breadcrumb {
-  text-transform: uppercase !important;
-}
-
-/* ---- PLAQUE: the page title becomes a name plate, not a band. ---- */
-body.template-category .category-header .category-title,
-body.template-topic .topic-title h1 {
-  display: inline-block;
-  background: var(--wg-bg-deep);
-  border: 1px solid var(--wg-border);
-  padding: 0.35rem 1rem;
-  font-family: var(--wg-font-display);
-  font-size: 0.95rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--wg-ledger-ink);
-}
-
-/* ---- ICON: pewter is structure. Gilt is reserved for what can be touched. ---- */
-li[component="categories/category"] .icon [class*="wg-icon-"],
-li[component="categories/category"] [class*="wg-icon-"] {
-  background-color: var(--wg-pewter) !important;
-}
-/* The category icon plate keeps its plum wash and desaturation: ACP colours
-   arrive candy-bright and the existing treatment is what pulls them into the
-   register. Only its ring moves from gilt to pewter — the plate structures,
-   it does not mark value. */
-li[component="categories/category"] .icon {
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.12),
-    inset 0 -3px 7px rgba(0, 0, 0, 0.52),
-    0 0 0 1px rgba(var(--wg-pewter-rgb), 0.24) !important;
-}
-
-/* ---- LINTEL: the topbar is a threshold, and says so. ---- */
-.wg-topbar,
-#header-menu {
-  border-bottom: 0 !important;
-}
-.wg-topbar {
-  border-top: 1px solid rgba(var(--wg-gold-rgb), 0.5) !important;
-  background-image: linear-gradient(
-    180deg,
-    rgba(var(--wg-gold-rgb), 0.1),
-    transparent 32px
-  ) !important;
-}
-
-/* ---- APP DENSITY: sheen off. Hierarchy is tone plus the two metals. ---- */
-li[component="categories/category"],
-li[component="category/topic"] {
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.42) !important;
-}

prototype/ornament/shots.js

@@ -1,47 +0,0 @@
-// Throwaway screenshotter for #54. Palette B is the ground; the only variable
-// is whether the ornament component set is applied.
-// PLAYWRIGHT_BROWSERS_PATH=... nix shell nixpkgs#playwright-test -c node prototype/ornament/shots.js
-const fs = require('fs');
-const path = require('path');
-const { chromium } = require('playwright');
-
-const BASE = process.env.BASE || 'http://localhost:4567';
-const OUT = path.join(__dirname, 'shots');
-const read = (f) => fs.readFileSync(path.join(__dirname, f), 'utf8');
-const paletteB = read('../_base-plumnoir.css') + read('../candidate-b.css');
-const ornament = read('real-surface.css');
-
-const VARIANTS = { before: paletteB, after: paletteB + ornament };
-const PAGES = [
-  ['categories', '/categories'],
-  ['category', '/category/8'],
-  ['topic', '/topic/2'],
-];
-
-(async () => {
-  fs.mkdirSync(OUT, { recursive: true });
-  const browser = await chromium.launch();
-  const ctx = await browser.newContext({ viewport: { width: 1600, height: 1000 }, deviceScaleFactor: 2 });
-  const page = await ctx.newPage();
-
-  await page.goto(BASE + '/login');
-  await page.fill('#username', 'admin');
-  await page.fill('#password', 'Admin12345!');
-  await page.click('#login');
-  await page.waitForLoadState('networkidle');
-
-  for (const [name, css] of Object.entries(VARIANTS)) {
-    for (const [pname, url] of PAGES) {
-      await page.goto(BASE + url, { waitUntil: 'networkidle' });
-      await page.addStyleTag({ content: css });
-      await page.waitForTimeout(500);
-      await page.screenshot({ path: path.join(OUT, `${pname}-${name}.png`), fullPage: true });
-      await page.screenshot({
-        path: path.join(OUT, `${pname}-${name}-crop.png`),
-        clip: { x: 120, y: 60, width: 1060, height: 620 },
-      });
-      console.log(pname, name);
-    }
-  }
-  await browser.close();
-})();

prototype/ornament/specimen.html

@@ -1,272 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>#54 — ornament and frame specimen (zero images)</title>
-    <style>
-      @font-face {
-        font-family: Cinzel;
-        src: url("../../public/fonts/cinzel/cinzel-latin-600-normal.woff2") format("woff2");
-        font-weight: 600;
-        font-display: swap;
-      }
-      @font-face {
-        font-family: Jost;
-        src: url("../../public/fonts/jost/jost-latin-400-normal.woff2") format("woff2");
-        font-weight: 400;
-        font-display: swap;
-      }
-      @font-face {
-        font-family: Jost;
-        src: url("../../public/fonts/jost/jost-latin-600-normal.woff2") format("woff2");
-        font-weight: 600;
-        font-display: swap;
-      }
-    </style>
-    <link rel="stylesheet" href="ornament.css" />
-    <style>
-      body {
-        margin: 0;
-        background: var(--wg-bg);
-        color: var(--wg-text-soft);
-        font-family: var(--wg-font-body);
-        line-height: 1.55;
-      }
-      h1,
-      h2 {
-        font-family: var(--wg-font-display);
-        color: var(--wg-text);
-        font-weight: 600;
-      }
-      section {
-        padding-block: 2.5rem;
-      }
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-        gap: 1rem;
-      }
-      .note {
-        color: var(--wg-text-muted);
-        font-size: 0.82rem;
-      }
-      a {
-        color: var(--wg-gold);
-      }
-      .swatchrow {
-        display: flex;
-        gap: 0.75rem;
-        flex-wrap: wrap;
-        align-items: center;
-      }
-    </style>
-  </head>
-  <body>
-    <!-- SHELL: identical in both densities. Band + lintel + rail. -->
-    <div class="wg-band">
-      <div class="wg-rail" style="display: flex; gap: 1.5rem; align-items: center">
-        <span
-          style="
-            font-family: var(--wg-font-display);
-            letter-spacing: 0.14em;
-            text-transform: uppercase;
-            color: var(--wg-ledger-ink);
-          "
-          >Shadows Over Westgate</span
-        >
-        <span class="note">topbar — same band, same rail, every page</span>
-      </div>
-    </div>
-    <div class="wg-band wg-band--lintel wg-horizon" style="padding-block: 3rem">
-      <div class="wg-rail">
-        <h1 style="margin: 0 0 0.5rem; font-size: 2.6rem">The City and Its Ledger</h1>
-        <p class="note" style="margin: 0">
-          LINTEL + HORIZON — the threshold into the page. Zero images: the glow is a radial
-          gradient, the rule bleeds 32px of light downward.
-        </p>
-      </div>
-    </div>
-
-    <main class="wg-rail">
-      <!-- ================= SHOWCASE DENSITY ================= -->
-      <section class="wg-showcase">
-        <h2 class="wg-head wg-head--earned wg-head--ruled">Showcase density</h2>
-
-        <p class="note">
-          Earned header: display face, uppercase, one colour token, and the single permitted
-          flourish — a gilt rule that starts at the text and fades to the rail.
-        </p>
-
-        <div class="grid" style="margin-top: 1.5rem">
-          <div class="wg-panel wg-panel--velvet">
-            <h3 class="wg-head wg-head--earned" style="font-size: 0.95rem">Panel</h3>
-            <p>
-              The bounded surface. Its edge is a masked overlay — full strength at the top, gone
-              by the bottom. No hairline runs corner to corner.
-            </p>
-          </div>
-          <div class="wg-panel wg-panel--plain">
-            <h3 class="wg-head" style="font-size: 0.95rem">Plain panel</h3>
-            <p>
-              The cheap panel. One tone down, softer edge, no sheen, no fade. This is what a
-              panel looks like when it has nothing to say.
-            </p>
-          </div>
-          <div class="wg-panel wg-panel--velvet wg-legend">
-            <span class="wg-plaque">Plaque</span>
-            <p style="margin-top: 0.75rem">
-              A name plate, not a band — <code>inline-block</code> is the whole idea. As a
-              straddling legend it sits on its own panel edge.
-            </p>
-          </div>
-        </div>
-
-        <h2 class="wg-head wg-head--earned wg-head--ruled" style="margin-top: 2.5rem">
-          The divider inventory
-        </h2>
-        <p class="note">Four. There is no fifth. Anything else is a habit, not a divider.</p>
-
-        <div class="wg-panel wg-panel--plain" style="margin-top: 1rem">
-          <p><strong>1. Ruling</strong> — row separation inside a ledger, and nowhere else.</p>
-          <div class="wg-ledger" style="margin: 0.75rem 0 1.5rem">
-            <div class="wg-ledger__row wg-ledger__row--marked">
-              <span style="color: var(--wg-ledger-ink)">A marked row</span>
-              <span class="note" style="margin-left: auto">14 replies · 2h</span>
-            </div>
-            <div class="wg-ledger__row">
-              <span>An ordinary row</span>
-              <span class="note" style="margin-left: auto">3 replies · 5h</span>
-            </div>
-            <div class="wg-ledger__row">
-              <span>Another ordinary row</span>
-              <span class="note" style="margin-left: auto">no replies · 1d</span>
-            </div>
-          </div>
-
-          <p><strong>2. Fading rule</strong> — between sections. It ends by fading, not by stopping.</p>
-          <hr class="wg-rule" style="margin: 0.75rem 0 1.5rem" />
-
-          <p><strong>3. Lintel</strong> — a threshold. One per band, at the top of the page shell.</p>
-          <div class="wg-band wg-band--lintel" style="margin: 0.75rem 0 1.5rem; padding: 1rem">
-            <span class="note">the band below a lintel</span>
-          </div>
-
-          <p><strong>4. Spine</strong> — a vertical fade marking a sequence: a thread of posts.</p>
-          <div class="wg-spine" style="margin-top: 0.75rem">
-            <p style="margin: 0">First reply in the thread.</p>
-            <p style="margin: 0.5rem 0 0">Second reply, same spine.</p>
-          </div>
-        </div>
-
-        <h2 class="wg-head wg-head--earned wg-head--ruled" style="margin-top: 2.5rem">
-          Icons, stamps, and the two metals
-        </h2>
-        <div class="wg-panel wg-panel--velvet" style="margin-top: 1rem">
-          <div class="swatchrow">
-            <span
-              class="wg-icon"
-              style="--wg-icon-src: url('../../public/game-icons/scroll-unfurled.svg')"
-            ></span>
-            <span
-              class="wg-icon"
-              style="--wg-icon-src: url('../../public/game-icons/tavern-sign.svg')"
-            ></span>
-            <span
-              class="wg-icon"
-              style="--wg-icon-src: url('../../public/game-icons/duality-mask.svg')"
-            ></span>
-            <span class="note">pewter: structure and identity</span>
-            <span
-              class="wg-icon wg-icon--gilt"
-              style="--wg-icon-src: url('../../public/game-icons/wax-seal.svg')"
-            ></span>
-            <span class="note">gilt: this matters, or can be touched</span>
-            <span class="wg-stamp">Closed</span>
-            <span class="note">the only red</span>
-          </div>
-          <p class="note" style="margin-bottom: 0">
-            Every icon is a mask over a token, never a coloured file — one asset serves every
-            state and forced-colors mode.
-          </p>
-        </div>
-      </section>
-
-      <hr class="wg-rule" />
-
-      <!-- ================= APP DENSITY ================= -->
-      <section class="wg-app">
-        <h2 class="wg-head wg-head--earned wg-head--ruled">App density — same rail, same shell</h2>
-        <p class="note">
-          Identical width, identical components. Sheen off, rows tighter, headers reduced, icons
-          one step smaller. Nothing here is a different component; it is the same set turned down.
-        </p>
-
-        <div style="display: flex; gap: 1rem; align-items: baseline; margin: 1rem 0">
-          <span class="wg-plaque">Roleplay</span>
-          <span class="note">the page title keeps its plaque; nothing else gets one</span>
-        </div>
-
-        <div class="wg-ledger">
-          <div class="wg-ledger__row wg-ledger__row--marked">
-            <span
-              class="wg-icon"
-              style="--wg-icon-src: url('../../public/game-icons/stabbed-note.svg')"
-            ></span>
-            <span style="color: var(--wg-text)">Notices from the Night Market</span>
-            <span class="note" style="margin-left: auto">42 · 12m</span>
-          </div>
-          <div class="wg-ledger__row">
-            <span
-              class="wg-icon"
-              style="--wg-icon-src: url('../../public/game-icons/mute.svg')"
-            ></span>
-            <span>Rumors heard near the docks</span>
-            <span class="note" style="margin-left: auto">9 · 1h</span>
-          </div>
-          <div class="wg-ledger__row">
-            <span
-              class="wg-icon"
-              style="--wg-icon-src: url('../../public/game-icons/sword-altar.svg')"
-            ></span>
-            <span>Journal of a compromised clerk</span>
-            <span class="note" style="margin-left: auto">3 · 6h</span>
-          </div>
-          <div class="wg-ledger__row">
-            <span
-              class="wg-icon"
-              style="--wg-icon-src: url('../../public/game-icons/cowled.svg')"
-            ></span>
-            <span>Faction standing, second quarter</span>
-            <span class="note" style="margin-left: auto">27 · 1d</span>
-          </div>
-        </div>
-
-        <h3 class="wg-head" style="margin-top: 1.5rem">A reduced header (has not earned ornament)</h3>
-        <div class="wg-panel wg-panel--plain">
-          <p style="margin: 0">
-            Body face, no case switch, no rule, no background. The reduced header is the default;
-            ornament is the exception that has to be argued for.
-          </p>
-        </div>
-      </section>
-
-      <hr class="wg-rule" />
-
-      <section>
-        <h2 class="wg-head wg-head--earned">The standing test</h2>
-        <p class="note" style="max-width: 60ch">
-          This page contains no images of any kind — every frame, rule, plaque, glow, and icon
-          above is CSS or a mask over a token. If this page looks unfinished, the component set
-          is not done.
-        </p>
-      </section>
-    </main>
-
-    <div class="wg-band wg-band--lintel" style="margin-top: 3rem; padding-block: 2rem">
-      <div class="wg-rail">
-        <span class="note">Footer — the same band and lintel that opened the page.</span>
-      </div>
-    </div>
-  </body>
-</html>

prototype/ornament/variant-gold.css

@@ -1,30 +0,0 @@
-/* Variant: gilt structures, pewter only speaks.
-   Two Metals inverted from #53's assignment — the metals keep separate jobs,
-   but the visible edge work goes back to gold and pewter is demoted to
-   metadata text only. Answers "there is too much silver now". */
-:root {
-  --wg-border: rgba(var(--wg-gold-rgb), 0.2);
-  --wg-border-soft: rgba(var(--wg-gold-rgb), 0.11);
-  --wg-ledger-ruling: rgba(var(--wg-gold-rgb), 0.08);
-  --wg-ledger-rule-strong: rgba(var(--wg-gold-rgb), 0.2);
-  --wg-ledger-border: rgba(var(--wg-gold-rgb), 0.24);
-}
-/* panel edges, ledger edge, icon ring: gilt */
-html body ul.categories-list::after,
-html body ul.westgate-categories-list::after,
-html body .westgate-surface::after,
-html body .post-container::after,
-html body.template-category .category-header::after {
-  border-color: rgba(var(--wg-gold-rgb), 0.28) !important;
-}
-html body li[component="categories/category"] .icon {
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.12),
-    inset 0 -3px 7px rgba(0, 0, 0, 0.52),
-    0 0 0 1px rgba(var(--wg-gold-rgb), 0.28) !important;
-}
-/* category names keep the ledger ink, one step brighter than body */
-html body li[component="categories/category"] h2.title,
-html body li[component="categories/category"] h2.title a {
-  color: var(--wg-ledger-ink) !important;
-}

prototype/ornament/variant-roomy.css

@@ -1,30 +0,0 @@
-/* Variant: rows breathe. The category list goes back to separate panels with
-   air between them, instead of one ruled ledger. Same components, same square
-   shape, same fading edge — only the ledger reading is dropped. */
-html body ul.categories-list,
-html body ul.westgate-categories-list {
-  gap: var(--wg-space-sm, 0.75rem) !important;
-  background: none !important;
-}
-html body ul.categories-list::after,
-html body ul.westgate-categories-list::after {
-  content: none;
-}
-html body ul.categories-list li[component="categories/category"],
-html body ul.westgate-categories-list li[component="categories/category"] {
-  background: var(--wg-panel-2) !important;
-  background-image: none !important;
-  padding: var(--wg-space-md, 1rem) !important;
-}
-/* each row gets its own fading edge, since it is a panel again */
-html body ul.categories-list li[component="categories/category"]::after,
-html body ul.westgate-categories-list li[component="categories/category"]::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border: 1px solid rgba(var(--wg-pewter-rgb), 0.34);
-  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.16));
-  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.16));
-  pointer-events: none;
-  z-index: 2;
-}

prototype/ornament/variant-tabular.css

@@ -1,179 +0,0 @@
-/* Variant: the ledger row as a line in a record, not three blocks in a row.
-   The data columns move into WELLS; the left side stays prose. */
-
-/* ---- WELL — a recess, the inverse of Panel. Panel is laid on the surface
-   and casts down; a well is cut into it and shadows inward. Three of them,
-   one per reading, bleeding to the row's right edge. The gap between two
-   wells is their divider: a well never carries a rule inside it. ---- */
-html body li[component="categories/category"] > div.col-lg-5 {
-  background: none !important;
-  box-shadow: none !important;
-  align-items: stretch !important;
-  padding: 0 !important;
-  gap: 0.4rem !important;
-  /* the wells sit inside the row's margin on every side — a well cut flush to
-     the right edge reads as the row running off the page */
-  margin: 0 !important;
-}
-
-/* the stat pair: two equal columns of well, not two little cards */
-html body li[component="categories/category"] .meta.stats,
-html body li[component="categories/category"] .stats {
-  display: grid !important;
-  /* the counts need only their own width; the room goes to the teaser */
-  grid-template-columns: 6rem 6rem !important;
-  justify-content: end !important;
-  gap: 0.4rem !important;
-  padding: 0 !important;
-  border: 0 !important;
-  background: none !important;
-  box-shadow: none !important;
-}
-
-/* the well itself */
-html body li[component="categories/category"] .stats .card,
-html body li[component="categories/category"] .stats .card-header,
-html body li[component="categories/category"] .teaser {
-  /* the basin sits below the row it is cut into, but not as dead as the
-     page floor: between panel-2 and bg-deep */
-  background: color-mix(in srgb, var(--wg-panel-2) 45%, var(--wg-bg-deep)) !important;
-  background-image: none !important;
-  border: 0 !important;
-  box-shadow:
-    inset 0 1px 3px rgba(0, 0, 0, 0.55),
-    inset 0 0 0 1px rgba(var(--wg-gold-rgb), 0.1) !important;
-  padding: 0.5rem 0.85rem !important;
-}
-/* the teaser is prose, so it gets the room and a proper margin of its own */
-html body li[component="categories/category"] .teaser {
-  flex: 1 1 auto !important;
-  /* the basin's inset is even on all four sides — a wider left/right inset
-     reads as the text not filling the well */
-  padding: 0.55rem !important;
-}
-/* the teaser's inner blocks are flex items once the well is a flex box, so
-   they shrink to their text and stop filling. Make them fill it. */
-html body li[component="categories/category"] .lastpost,
-html body li[component="categories/category"] .westgate-lastpost {
-  flex: 1 1 auto !important;
-  width: 100% !important;
-  min-width: 0 !important;
-  height: auto !important;
-}
-html body li[component="categories/category"] [component="category/posts"] {
-  padding-left: 0 !important;
-  width: 100% !important;
-  min-width: 0 !important;
-  /* the byline and its line of prose are one block, not two rows */
-  gap: 0.1rem !important;
-  height: auto !important;
-  line-height: 1.35 !important;
-}
-html body li[component="categories/category"] .teaser .text-nowrap {
-  line-height: 1.2 !important;
-  /* the signet's ring is drawn outside its 18px box, and this row is
-     `text-truncate` (overflow: hidden), so at x=0 the left of the ring is cut.
-     Give it the ring's width back. */
-  padding-left: 2px !important;
-}
-html body li[component="categories/category"] .stats .card {
-  display: flex !important;
-  flex-direction: column !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-
-/* the number carries; the label is engraved and small */
-html body li[component="categories/category"] .stats .card > span:first-child {
-  font-family: var(--wg-font-display) !important;
-  color: var(--wg-text) !important;
-}
-html body li[component="categories/category"] .stats .card > span + span,
-html body li[component="categories/category"] .stats small {
-  font-family: var(--wg-font-display) !important;
-  font-size: 0.78rem !important;
-  letter-spacing: 0.12em !important;
-  text-transform: uppercase !important;
-  color: var(--wg-text-muted) !important;
-}
-
-/* the teaser well reads as text, so it is set left and loses NodeBB's
-   inline pure-white rule — a ledger has one ruling weight, not two */
-html body li[component="categories/category"] .teaser {
-  display: flex !important;
-  align-items: center !important;
-}
-html body li[component="categories/category"] .teaser *,
-html body li[component="categories/category"] .lastpost,
-html body li[component="categories/category"] .westgate-lastpost {
-  text-align: left !important;
-  border-left: 0 !important;
-  padding-left: 0 !important;
-}
-/* the byline row must stretch, or it shrinks to its own text and the
-   `text-truncate` on it starts clipping the signet */
-html body li[component="categories/category"] [component="category/posts"],
-html body li[component="categories/category"] .lastpost,
-html body li[component="categories/category"] .westgate-lastpost {
-  align-items: stretch !important;
-  justify-content: center !important;
-}
-html body li[component="categories/category"] .teaser .text-nowrap,
-html body li[component="categories/category"] .teaser .post-content {
-  width: 100% !important;
-  max-width: 100% !important;
-}
-html body li[component="categories/category"] .teaser p,
-html body li[component="categories/category"] [component="category/posts"] p {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  margin: 0 !important;
-  color: var(--wg-text-muted) !important;
-}
-
-/* the left side is prose and stops at its own measure; the wells take the
-   room that was standing empty between the two */
-html body li[component="categories/category"] > div.col-lg-7 {
-  flex: 0 0 46% !important;
-  max-width: 46% !important;
-}
-html body li[component="categories/category"] > div.col-lg-5 {
-  flex: 1 1 auto !important;
-  max-width: none !important;
-}
-
-/* one baseline for the whole row, so rows scan as lines rather than pages.
-   The columns stretch: a centred well cannot grow, so a two-line teaser
-   overflows it top and bottom and gets clipped. */
-html body li[component="categories/category"] {
-  align-items: stretch !important;
-}
-html body li[component="categories/category"] .teaser,
-html body li[component="categories/category"] .lastpost,
-html body li[component="categories/category"] .westgate-lastpost,
-html body li[component="categories/category"] [component="category/posts"] {
-  height: auto !important;
-  min-height: 0 !important;
-  overflow: visible !important;
-}
-/* the clamp keeps its own overflow — it is what puts the ellipsis on. But its
-   line box has to be taller than the glyphs, or `overflow: hidden` shaves the
-   ascenders off the first line and the descenders off the last. */
-html body li[component="categories/category"] .post-content {
-  height: auto !important;
-  min-height: 0 !important;
-  line-height: 1.5 !important;
-  /* NodeBB's `line-clamp-sm-2` clamps by a hard `max-height` sized to its own
-     line-height. Ours is taller, so that max-height cuts the glyphs. Drop it
-     and clamp by line count instead. */
-  max-height: none !important;
-  display: -webkit-box !important;
-  -webkit-line-clamp: 2 !important;
-  -webkit-box-orient: vertical !important;
-  overflow: hidden !important;
-}
-html body li[component="categories/category"] h2.title {
-  margin-bottom: 0.15rem !important;
-}

prototype/probe.js

@@ -1,48 +0,0 @@
-// Did the candidate CSS actually reach the pixels? Computed-style probe for #53.
-const fs = require('fs');
-const path = require('path');
-const { chromium } = require('playwright');
-const BASE = process.env.BASE || 'http://localhost:4567';
-const read = (f) => fs.readFileSync(path.join(__dirname, f), 'utf8');
-const base = read('_base-plumnoir.css');
-const CANDIDATES = { baseline: '', a: base, b: base + read('candidate-b.css') };
-
-const PROBES = [
-  ['body', 'backgroundColor'],
-  ['[component="post"]', 'backgroundColor'],
-  ['[component="post"] .post-header, [component="post"] .topic-item-header', 'color'],
-  ['.timeago', 'color'],
-  ['[component="post"]', 'borderTopColor'],
-  ['.topic-title, h1', 'color'],
-  ['a[href^="/user/"]', 'color'],
-];
-
-(async () => {
-  const browser = await chromium.launch();
-  const page = await browser.newPage({ viewport: { width: 1600, height: 1000 } });
-  await page.goto(BASE + '/login');
-  await page.fill('#username', 'admin');
-  await page.fill('#password', 'Admin12345!');
-  await page.click('#login');
-  await page.waitForLoadState('networkidle');
-
-  const rows = {};
-  for (const [name, css] of Object.entries(CANDIDATES)) {
-    await page.goto(BASE + '/topic/2', { waitUntil: 'networkidle' });
-    if (css) await page.addStyleTag({ content: css });
-    rows[name] = await page.evaluate(
-      (probes) =>
-        probes.map(([sel, prop]) => {
-          const el = document.querySelector(sel);
-          return el ? getComputedStyle(el)[prop] : 'MISSING';
-        }),
-      PROBES,
-    );
-  }
-  PROBES.forEach(([sel, prop], i) => {
-    console.log(
-      `${sel} ${prop}\n  baseline ${rows.baseline[i]}\n  a        ${rows.a[i]}\n  b        ${rows.b[i]}`,
-    );
-  });
-  await browser.close();
-})();

prototype/seed.js

@@ -1,88 +0,0 @@
-// Throwaway seeder for #53: categories + one dense topic, over the REST API.
-// node prototype/seed.js   (needs the dev stack up on :4567)
-const BASE = process.env.BASE || 'http://localhost:4567';
-const USER = 'admin', PASS = 'Admin12345!';
-
-let cookie = '';
-async function req(path, opts = {}) {
-  const res = await fetch(BASE + path, {
-    ...opts,
-    redirect: 'manual',
-    headers: { 'Content-Type': 'application/json', Cookie: cookie, ...(opts.headers || {}) },
-  });
-  const set = res.headers.getSetCookie?.() || [];
-  if (set.length) cookie = set.map((c) => c.split(';')[0]).join('; ');
-  const text = await res.text();
-  try { return { status: res.status, body: JSON.parse(text) }; } catch { return { status: res.status, body: text }; }
-}
-
-const CATS = [
-  ['The Gate House', 'Announcements from the Warden of the Gate. Read before you post.'],
-  ['The Velvet Ledger', 'In-character correspondence, letters, and the record of the city.'],
-  ['The Undercroft', 'Rules lawyering, builds, and mechanics. Bring numbers.'],
-  ['Petitions', 'Support, bug reports, and requests to the staff.'],
-  ['The Long Table', 'Off-topic. Keep it civil, keep it quiet.'],
-];
-
-const POSTS = [
-  'The lamplighters have not come to the Ashgate quarter in nine nights. The Watch says this is a matter of budget. The Watch says a great many things.',
-  'It is a matter of budget. The oil comes up the river and the river is being taxed twice, once by the Crown and once by whoever is currently pretending to be the Crown at the Narrows.',
-  'Nine nights is long enough that people have started leaving their own lamps out. Which is charity, and also a list of which houses have oil.',
-  'I walked it last week. There are chalk marks on seven doors between the cooperage and the old chapel. Not guild marks. Not any mark I know.',
-  'Post the marks. If they are what I think they are then this is not a budget problem and the Watch is not being slow, it is being paid.',
-  'I am not posting the marks in a public thread. Ask me in the Ledger and I will write it out properly.',
-  'Seconding that. Last time someone posted a sigil here it was scrubbed off every door in the quarter inside a day and we learned nothing.',
-  'For what it is worth the chapel bell has also stopped, and nobody has said a word about that either.',
-  'The bell is a rope problem, not a conspiracy. I fixed a bell in Southcant last winter, same silence, same rumours, one frayed rope.',
-  'Then the rope was cut, in the same nine nights the lamps went out, in the same quarter. You are describing a coincidence as if it were a comfort.',
-  'Nobody here has said the word out loud so I will: the last time a quarter went dark and quiet, three families sold their houses in a week and none of them were seen again.',
-  'They were seen. Just not by anyone willing to say where.',
-];
-
-(async () => {
-  await req('/login'); // prime csrf
-  const cfg = await req('/api/config');
-  const csrf = cfg.body.csrf_token;
-  const h = { 'x-csrf-token': csrf };
-  const login = await req('/login', { method: 'POST', headers: h, body: JSON.stringify({ username: USER, password: PASS }) });
-  if (login.status >= 400) throw new Error('login failed: ' + login.status + ' ' + JSON.stringify(login.body));
-  const cfg2 = await req('/api/config');
-  const h2 = { 'x-csrf-token': cfg2.body.csrf_token };
-
-  const cids = [];
-  for (const [name, description] of CATS) {
-    const r = await req('/api/v3/categories', { method: 'POST', headers: h2, body: JSON.stringify({ name, description }) });
-    if (!r.body?.response?.cid) throw new Error('category failed: ' + JSON.stringify(r.body));
-    cids.push(r.body.response.cid);
-    console.log('category', name, '->', r.body.response.cid);
-  }
-
-  // a few short topics so the category list has recent activity
-  const titles = [
-    'The lamps in the Ashgate quarter',
-    'Read this before you post in the Ledger',
-    'Damage reduction stacking, one more time',
-    'Cannot log in after the patch',
-    'What is everyone drinking',
-  ];
-  let denseTid = null;
-  for (let i = 0; i < titles.length; i++) {
-    const r = await req('/api/v3/topics', {
-      method: 'POST', headers: h2,
-      body: JSON.stringify({ cid: cids[i % cids.length], title: titles[i], content: POSTS[0] }),
-    });
-    const tid = r.body?.response?.tid;
-    console.log('topic', titles[i], '->', tid);
-    if (i === 0) denseTid = tid;
-  }
-
-  for (const content of POSTS.slice(1)) {
-    await req(`/api/v3/topics/${denseTid}`, { method: 'POST', headers: h2, body: JSON.stringify({ content }) });
-  }
-  // one quoted reply, so candidate C's paper inset has something to render
-  await req(`/api/v3/topics/${denseTid}`, {
-    method: 'POST', headers: h2,
-    body: JSON.stringify({ content: '> They were seen. Just not by anyone willing to say where.\n\nThat is the whole city in one line, and I would like it on a plaque.' }),
-  });
-  console.log('dense topic:', BASE + '/topic/' + denseTid);
-})();

prototype/shots.js

@@ -1,52 +0,0 @@
-// Throwaway screenshotter for #53. Logs in, then for each candidate injects the
-// candidate's :root override at runtime and shoots the pages that matter.
-// PLAYWRIGHT_BROWSERS_PATH=... nix shell nixpkgs#playwright-test -c node prototype/shots.js
-const fs = require('fs');
-const path = require('path');
-const { chromium } = require('playwright');
-
-const BASE = process.env.BASE || 'http://localhost:4567';
-const OUT = process.env.OUT || path.join(__dirname, 'shots');
-const read = (f) => fs.readFileSync(path.join(__dirname, f), 'utf8');
-const base = read('_base-plumnoir.css');
-
-const CANDIDATES = {
-  baseline: '',
-  a: base + read('candidate-a.css'),
-  b: base + read('candidate-b.css'),
-  c: base + read('candidate-b.css') + read('candidate-c.css'),
-};
-
-const PAGES = [
-  ['topic', '/topic/2'],
-  ['categories', '/categories'],
-  ['cards', process.env.CARDS_URL || '/recent'],
-];
-
-(async () => {
-  fs.mkdirSync(OUT, { recursive: true });
-  const browser = await chromium.launch();
-  const ctx = await browser.newContext({ viewport: { width: 1600, height: 1000 }, deviceScaleFactor: 2 });
-  const page = await ctx.newPage();
-
-  await page.goto(BASE + '/login');
-  await page.fill('#username', 'admin');
-  await page.fill('#password', 'Admin12345!');
-  await page.click('#login');
-  await page.waitForLoadState('networkidle');
-
-  for (const [name, css] of Object.entries(CANDIDATES)) {
-    for (const [pname, url] of PAGES) {
-      await page.goto(BASE + url, { waitUntil: 'networkidle' });
-      if (css) await page.addStyleTag({ content: css });
-      await page.waitForTimeout(400);
-      const file = path.join(OUT, `${pname}-${name}.png`);
-      await page.screenshot({ path: file, fullPage: true });
-      // close crop: the same region every time, so candidates can be compared at real size
-      const crop = path.join(OUT, `${pname}-${name}-crop.png`);
-      await page.screenshot({ path: crop, clip: { x: 120, y: 60, width: 1060, height: 620 } });
-      console.log(file);
-    }
-  }
-  await browser.close();
-})();

scss/westgate/_categories.scss

@@ -24,7 +24,7 @@ li[component="categories/category"] {
 }
 
 li[component="categories/category"].unread {
-  border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
+  border-color: rgba(194, 163, 90, 0.24) !important;
 }
 
 li[component="categories/category"] .icon {
@@ -34,8 +34,8 @@ li[component="categories/category"] .icon {
   // plate into the velvet register while keeping the per-category hue
   background-image: linear-gradient(
     160deg,
-    rgba(var(--wg-plum-rgb), 0.42),
-    rgba(var(--wg-bg-deep-rgb), 0.58)
+    rgba(42, 18, 34, 0.42),
+    rgba(9, 8, 11, 0.58)
   );
   box-shadow:
     inset 0 1px 0 rgba(255, 242, 204, 0.28),
@@ -55,8 +55,8 @@ body.template-category .category-header .icon {
   border: 1px solid var(--wg-etched-highlight);
   background-image: linear-gradient(
     160deg,
-    rgba(var(--wg-plum-rgb), 0.42),
-    rgba(var(--wg-bg-deep-rgb), 0.58)
+    rgba(42, 18, 34, 0.42),
+    rgba(9, 8, 11, 0.58)
   );
   filter: saturate(0.62) contrast(1.12);
   box-shadow:
@@ -223,8 +223,8 @@ li[component="categories/category"] h2.title::after {
   height: 1px;
   background: linear-gradient(
     to right,
-    rgba(var(--wg-gold-rgb), 0.13),
-    rgba(var(--wg-gold-rgb), 0.045) 58%,
+    rgba(194, 163, 90, 0.13),
+    rgba(194, 163, 90, 0.045) 58%,
     transparent 94%
   );
   pointer-events: none;
@@ -261,7 +261,7 @@ ul.category-children {
   min-height: 2.1rem;
   padding: 0.25rem 0.65rem 0.25rem 0.3rem;
   background: rgba(44, 22, 34, 0.3);
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.11);
+  border: 1px solid rgba(194, 163, 90, 0.11);
   border-radius: 8px;
   transition:
     background 0.18s ease,
@@ -304,12 +304,12 @@ ul.category-children {
 .category-children-item > div:hover,
 .westgate-category-child:hover {
   background: rgba(70, 30, 48, 0.4);
-  border-color: rgba(var(--wg-gold-rgb), 0.24);
+  border-color: rgba(194, 163, 90, 0.24);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 .category-children-item a {
-  color: var(--wg-ledger-ink) !important;
+  color: #d8c28a !important;
   display: block;
   min-width: 0;
   font-weight: 600;
@@ -318,14 +318,14 @@ ul.category-children {
 }
 
 .category-children-item a:hover {
-  color: var(--wg-gold-lit) !important;
+  color: #e0c878 !important;
 }
 
 li[component="categories/category"] .meta.stats > div {
   min-height: 3.55rem;
   padding: var(--wg-space-2xs) var(--wg-space-xs);
   background: rgba(255, 255, 255, 0.018) !important;
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.09) !important;
+  border: 1px solid rgba(194, 163, 90, 0.09) !important;
   border-radius: 3px !important;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
 }
@@ -349,7 +349,7 @@ li[component="categories/category"] .meta.stats .text-muted {
 }
 
 li[component="categories/category"] .lastpost {
-  border-left-color: rgba(var(--wg-gold-rgb), 0.36) !important;
+  border-left-color: rgba(194, 163, 90, 0.36) !important;
 }
 
 li[component="categories/category"] .teaser .avatar {

scss/westgate/_controls.scss

@@ -1,13 +1,13 @@
 .btn-primary {
-  --bs-btn-bg: var(--wg-gold-plate);
-  --bs-btn-border-color: var(--wg-gold-soft);
+  --bs-btn-bg: #5a4a1a;
+  --bs-btn-border-color: #a8893f;
   --bs-btn-color: #f0e6d8;
-  --bs-btn-hover-bg: var(--wg-gold-plate-hover);
-  --bs-btn-hover-border-color: var(--wg-gold);
-  --bs-btn-hover-color: var(--wg-gold-hi);
+  --bs-btn-hover-bg: #6a5720;
+  --bs-btn-hover-border-color: #c2a35a;
+  --bs-btn-hover-color: #fff4dd;
   --bs-btn-active-bg: #493914;
-  --bs-btn-active-border-color: var(--wg-gold);
-  background-image: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
+  --bs-btn-active-border-color: #c2a35a;
+  background-image: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.06),
     0 2px 8px rgba(0, 0, 0, 0.24);
@@ -15,7 +15,7 @@
 
 .btn-primary:hover,
 .btn-primary:focus {
-  background-image: linear-gradient(to bottom, var(--wg-gold-plate-hover) 0%, var(--wg-gold-plate-mid) 100%);
+  background-image: linear-gradient(to bottom, #6a5720 0%, #53431a 100%);
 }
 
 .btn-secondary,
@@ -23,13 +23,13 @@
 .btn-ghost,
 .btn-outline-secondary {
   --bs-btn-color: #d8cec0;
-  --bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
-  --bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
+  --bs-btn-bg: rgba(8, 7, 10, 0.12);
+  --bs-btn-border-color: rgba(216, 194, 138, 0.28);
   --bs-btn-hover-color: var(--wg-text);
-  --bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.075);
-  --bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
-  --bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
-  --bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
+  --bs-btn-hover-bg: rgba(194, 163, 90, 0.075);
+  --bs-btn-hover-border-color: rgba(216, 194, 138, 0.44);
+  --bs-btn-active-bg: rgba(194, 163, 90, 0.12);
+  --bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
   background-image: linear-gradient(
     to bottom,
     rgba(255, 244, 221, 0.018),
@@ -39,36 +39,36 @@
 }
 
 .btn-light {
-  --bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
-  --bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
-  --bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.15);
-  --bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.56);
+  --bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
+  --bs-btn-hover-border-color: rgba(216, 194, 138, 0.5);
+  --bs-btn-active-bg: rgba(194, 163, 90, 0.15);
+  --bs-btn-active-border-color: rgba(216, 194, 138, 0.56);
 }
 
 // core's guest sign-up prompt ships btn-warning/btn-info: remap to the
 // theme's two button voices (dark gold plate + ghost)
 .guest-cta-alert .btn-warning {
-  --bs-btn-bg: var(--wg-gold-plate);
-  --bs-btn-border-color: var(--wg-gold-soft);
+  --bs-btn-bg: #5a4a1a;
+  --bs-btn-border-color: #a8893f;
   --bs-btn-color: #f0e6d8;
-  --bs-btn-hover-bg: var(--wg-gold-plate-hover);
-  --bs-btn-hover-border-color: var(--wg-gold);
-  --bs-btn-hover-color: var(--wg-gold-hi);
+  --bs-btn-hover-bg: #6a5720;
+  --bs-btn-hover-border-color: #c2a35a;
+  --bs-btn-hover-color: #fff4dd;
   --bs-btn-active-bg: #493914;
-  --bs-btn-active-border-color: var(--wg-gold);
-  --bs-btn-active-color: var(--wg-gold-hi);
-  background-image: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
+  --bs-btn-active-border-color: #c2a35a;
+  --bs-btn-active-color: #fff4dd;
+  background-image: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
 }
 
 .guest-cta-alert .btn-info {
   --bs-btn-color: #d8cec0;
-  --bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
-  --bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
+  --bs-btn-bg: rgba(8, 7, 10, 0.12);
+  --bs-btn-border-color: rgba(216, 194, 138, 0.28);
   --bs-btn-hover-color: var(--wg-text);
-  --bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.075);
-  --bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
-  --bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
-  --bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
+  --bs-btn-hover-bg: rgba(194, 163, 90, 0.075);
+  --bs-btn-hover-border-color: rgba(216, 194, 138, 0.44);
+  --bs-btn-active-bg: rgba(194, 163, 90, 0.12);
+  --bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
   --bs-btn-active-color: var(--wg-text);
   background-image: none;
 }
@@ -84,12 +84,12 @@
 .modal-footer .btn[data-bs-dismiss="modal"],
 .modal-footer .btn[data-dismiss="modal"] {
   --bs-btn-color: #d8cec0;
-  --bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.16);
-  --bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.34);
-  --bs-btn-hover-color: var(--wg-gold-hi);
-  --bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
-  --bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.52);
-  --bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.13);
+  --bs-btn-bg: rgba(8, 7, 10, 0.16);
+  --bs-btn-border-color: rgba(216, 194, 138, 0.34);
+  --bs-btn-hover-color: #fff4dd;
+  --bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
+  --bs-btn-hover-border-color: rgba(216, 194, 138, 0.52);
+  --bs-btn-active-bg: rgba(194, 163, 90, 0.13);
   background-image: linear-gradient(
     to bottom,
     rgba(255, 244, 221, 0.024),
@@ -115,7 +115,7 @@
 [component="topic/quickreply/container"] .card,
 [component="topic/quickreply/container"] .card-body {
   background-color: rgba(18, 15, 22, 0.96) !important;
-  border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
+  border-color: rgba(194, 163, 90, 0.18) !important;
   color: var(--wg-text) !important;
 }
 
@@ -147,17 +147,17 @@ input[type="number"].form-control::-webkit-outer-spin-button {
 .form-check-input[role="switch"] {
   background-color: rgba(255, 244, 221, 0.08) !important;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23d8c28a'/%3e%3c/svg%3e") !important;
-  border-color: rgba(var(--wg-ledger-ink-rgb), 0.26) !important;
+  border-color: rgba(216, 194, 138, 0.26) !important;
   box-shadow:
     inset 0 1px 2px rgba(0, 0, 0, 0.48),
-    0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.46) !important;
+    0 0 0 1px rgba(8, 7, 10, 0.46) !important;
   cursor: pointer;
 }
 
 .form-switch .form-check-input:hover,
 .form-check-input[role="switch"]:hover {
   background-color: rgba(255, 244, 221, 0.12) !important;
-  border-color: rgba(var(--wg-ledger-ink-rgb), 0.38) !important;
+  border-color: rgba(216, 194, 138, 0.38) !important;
 }
 
 .form-switch .form-check-input:checked,
@@ -172,10 +172,10 @@ input[type="number"].form-control::-webkit-outer-spin-button {
 
 .form-switch .form-check-input:focus,
 .form-check-input[role="switch"]:focus {
-  border-color: rgba(var(--wg-ledger-ink-rgb), 0.5) !important;
+  border-color: rgba(216, 194, 138, 0.5) !important;
   box-shadow:
     inset 0 1px 2px rgba(0, 0, 0, 0.42),
-    0 0 0 1px rgba(var(--wg-gold-rgb), 0.3) !important;
+    0 0 0 1px rgba(194, 163, 90, 0.3) !important;
 }
 
 .quick-reply .card,
@@ -213,7 +213,7 @@ input[type="number"].form-control::-webkit-outer-spin-button {
 .composer input:focus,
 .composer .CodeMirror-focused {
   background-color: rgba(255, 255, 255, 0.04) !important;
-  border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
+  border-color: rgba(194, 163, 90, 0.5) !important;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.026),
     0 0 0 1px var(--wg-focus) !important;
@@ -250,17 +250,17 @@ table[component="notification/table"],
 li[component="post"] .content table {
   --bs-table-bg: transparent;
   --bs-table-color: var(--wg-text-soft);
-  --bs-table-border-color: rgba(var(--wg-gold-rgb), 0.16);
-  --bs-table-striped-bg: rgba(var(--wg-gold-rgb), 0.035);
+  --bs-table-border-color: rgba(194, 163, 90, 0.16);
+  --bs-table-striped-bg: rgba(194, 163, 90, 0.035);
   --bs-table-striped-color: var(--wg-text-soft);
-  --bs-table-hover-bg: rgba(var(--wg-gold-rgb), 0.04);
+  --bs-table-hover-bg: rgba(194, 163, 90, 0.04);
   --bs-table-hover-color: var(--wg-text);
   color: var(--wg-text-soft) !important;
 }
 
 // classless markdown tables in posts don't get Bootstrap's .table variables
 li[component="post"] .content table :where(th, td) {
-  border-color: rgba(var(--wg-gold-rgb), 0.16);
+  border-color: rgba(194, 163, 90, 0.16);
 }
 
 table[component="notification/table"] :where(th, td, label) {
@@ -277,7 +277,7 @@ li[component="post"] .content table thead :where(th, td) {
 }
 
 table[component="notification/table"] tbody tr {
-  border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
+  border-color: rgba(194, 163, 90, 0.1) !important;
 }
 
 table[component="notification/table"] a[data-type] {
@@ -296,13 +296,13 @@ table[component="notification/table"] a[data-type] {
 
 table[component="notification/table"] a[data-type]:hover,
 table[component="notification/table"] a[data-type]:focus {
-  background-color: rgba(var(--wg-gold-rgb), 0.075);
+  background-color: rgba(194, 163, 90, 0.075);
   color: var(--wg-text);
 }
 
 .tool-modal {
   background: transparent !important;
-  border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
+  border-color: rgba(194, 163, 90, 0.16) !important;
 }
 
 .tool-modal .bootstrap-tagsinput {
@@ -316,7 +316,7 @@ table[component="notification/table"] a[data-type]:focus {
     linear-gradient(
       to bottom,
       transparent calc(100% - 1px),
-      rgba(var(--wg-gold-rgb), 0.055) calc(100% - 1px)
+      rgba(194, 163, 90, 0.055) calc(100% - 1px)
     ),
     rgba(12, 10, 15, 0.92) !important;
   background-size:
@@ -337,10 +337,10 @@ table[component="notification/table"] a[data-type]:focus {
   padding: 0.2rem 0.48rem !important;
   background: linear-gradient(
     to bottom,
-    rgba(var(--wg-ledger-ink-rgb), 0.13),
+    rgba(216, 194, 138, 0.13),
     rgba(70, 45, 52, 0.28)
   ) !important;
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.3) !important;
+  border: 1px solid rgba(194, 163, 90, 0.3) !important;
   border-radius: 3px !important;
   color: #e5d6b5 !important;
   font-family: var(--wg-font-ui);
@@ -370,7 +370,7 @@ table[component="notification/table"] a[data-type]:focus {
     rgba(23, 19, 28, 0.99),
     rgba(12, 10, 15, 0.99)
   ) !important;
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
+  border: 1px solid rgba(194, 163, 90, 0.22) !important;
   border-radius: 4px;
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.42);
 }
@@ -399,13 +399,13 @@ table[component="notification/table"] a[data-type]:focus {
     linear-gradient(
       to bottom,
       transparent calc(100% - 1px),
-      rgba(var(--wg-gold-rgb), 0.055) calc(100% - 1px)
+      rgba(194, 163, 90, 0.055) calc(100% - 1px)
     ),
     var(--wg-velvet-panel) !important;
   background-size:
     100% var(--wg-ledger-line),
     auto;
-  border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
+  border-color: rgba(194, 163, 90, 0.18) !important;
   color: var(--wg-text-soft) !important;
 }
 
@@ -447,7 +447,7 @@ table[component="notification/table"] a[data-type]:focus {
 
 .composer .title-container input:focus,
 .composer .title-container .form-control:focus {
-  border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
+  border-color: rgba(194, 163, 90, 0.5) !important;
   box-shadow: none !important;
 }
 
@@ -457,7 +457,7 @@ table[component="notification/table"] a[data-type]:focus {
 .quick-reply .btn,
 [component="topic/quickreply/container"] .btn {
   color: var(--wg-text-soft) !important;
-  border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
+  border-color: rgba(194, 163, 90, 0.12) !important;
 }
 
 .composer .formatting-bar .btn:hover,
@@ -480,14 +480,14 @@ table[component="notification/table"] a[data-type]:focus {
     rgba(23, 19, 28, 0.98),
     rgba(13, 12, 17, 0.99)
   ) !important;
-  border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
+  border-color: rgba(194, 163, 90, 0.16) !important;
   color: var(--wg-text-soft) !important;
 }
 
 .nav-tabs,
 .nav-pills,
 .list-group {
-  border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
+  border-color: rgba(194, 163, 90, 0.12) !important;
 }
 
 .nav-tabs .nav-link,
@@ -499,8 +499,8 @@ table[component="notification/table"] a[data-type]:focus {
 .nav-tabs .nav-link.active,
 .nav-pills .nav-link.active,
 .list-group-item.active {
-  background: rgba(var(--wg-gold-rgb), 0.12) !important;
-  border-color: rgba(var(--wg-gold-rgb), 0.26) !important;
+  background: rgba(194, 163, 90, 0.12) !important;
+  border-color: rgba(194, 163, 90, 0.26) !important;
   color: var(--wg-text) !important;
 }
 
@@ -510,7 +510,7 @@ table[component="notification/table"] a[data-type]:focus {
     rgba(24, 20, 29, 0.98),
     rgba(17, 15, 21, 0.99)
   ) !important;
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.16) !important;
+  border: 1px solid rgba(194, 163, 90, 0.16) !important;
   border-radius: 8px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
 }
@@ -542,21 +542,21 @@ table[component="notification/table"] a[data-type]:focus {
 
 .page-link {
   background: rgba(255, 255, 255, 0.018);
-  border-color: rgba(var(--wg-gold-rgb), 0.1);
+  border-color: rgba(194, 163, 90, 0.1);
   color: var(--wg-text-soft);
 }
 
 .page-link:hover,
 .page-link:focus,
 .active > .page-link {
-  background: rgba(var(--wg-gold-rgb), 0.12);
-  border-color: rgba(var(--wg-gold-rgb), 0.25);
+  background: rgba(194, 163, 90, 0.12);
+  border-color: rgba(194, 163, 90, 0.25);
   color: var(--wg-text);
 }
 
 .tooltip-inner {
   background: #221c24 !important;
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.65) !important;
+  border: 1px solid rgba(194, 163, 90, 0.65) !important;
   border-radius: 6px !important;
   color: var(--wg-text) !important;
   box-shadow:
@@ -576,7 +576,7 @@ table[component="notification/table"] a[data-type]:focus {
     rgba(20, 18, 25, 0.96),
     rgba(13, 12, 17, 0.98)
   ) !important;
-  border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
+  border-color: rgba(194, 163, 90, 0.12) !important;
   color: var(--wg-text-soft) !important;
 }
 
@@ -593,10 +593,10 @@ table[component="notification/table"] a[data-type]:focus {
 [component="sidebar/right"] .nav-link[aria-current="page"],
 .bottombar-nav .nav-link.active,
 .bottombar-nav .nav-link[aria-current="page"] {
-  background: rgba(var(--wg-gold-rgb), 0.1) !important;
+  background: rgba(194, 163, 90, 0.1) !important;
   color: var(--wg-text) !important;
   box-shadow:
-    inset 0 0 0 1px rgba(var(--wg-gold-rgb), 0.12),
+    inset 0 0 0 1px rgba(194, 163, 90, 0.12),
     inset 0 1px 0 rgba(255, 244, 221, 0.035);
 }
 
@@ -629,14 +629,14 @@ table[component="notification/table"] a[data-type]:focus {
 
 .page-flags [component="flags/filters"] .btn-warning {
   --bs-btn-color: var(--wg-text-soft);
-  --bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
-  --bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
+  --bs-btn-bg: rgba(8, 7, 10, 0.12);
+  --bs-btn-border-color: rgba(216, 194, 138, 0.28);
   --bs-btn-hover-color: var(--wg-text);
-  --bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
-  --bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.46);
+  --bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
+  --bs-btn-hover-border-color: rgba(216, 194, 138, 0.46);
   --bs-btn-active-color: var(--wg-text);
-  --bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
-  --bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
+  --bs-btn-active-bg: rgba(194, 163, 90, 0.12);
+  --bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
   background-image: linear-gradient(
     to bottom,
     rgba(255, 244, 221, 0.018),

scss/westgate/_footer.scss

@@ -1,6 +1,6 @@
 .wg-footer {
 	margin-top: 1.25rem;
-	border-top: 1px solid rgba(var(--wg-gold-rgb), 0.16);
+	border-top: 1px solid rgba(194, 163, 90, 0.16);
 	color: var(--wg-text-muted);
 	background:
 		linear-gradient(180deg, rgba(13, 9, 18, 0), rgba(8, 5, 12, 0.76)),
@@ -123,7 +123,7 @@
 	width: min(100%, var(--wg-page-width));
 	margin: 0 auto;
 	padding: 1.375rem clamp(1rem, 4vw, 2rem);
-	border-top: 1px solid rgba(var(--wg-gold-rgb), 0.1);
+	border-top: 1px solid rgba(194, 163, 90, 0.1);
 
 	p {
 		margin: 0;
@@ -164,9 +164,9 @@
 
 	&:hover,
 	&:focus {
-		border-color: rgba(var(--wg-gold-rgb), 0.22);
+		border-color: rgba(194, 163, 90, 0.22);
 		color: var(--wg-text-soft);
-		background: rgba(var(--wg-gold-rgb), 0.06);
+		background: rgba(194, 163, 90, 0.06);
 	}
 
 	&:focus-visible {

scss/westgate/_pages.scss

@@ -192,33 +192,33 @@ a.sow-card:hover {
 	text-transform: uppercase;
 	font-weight: 600;
 	color: #d8cec0;
-	background: rgba(var(--wg-gold-rgb), 0.06);
+	background: rgba(194, 163, 90, 0.06);
 	padding: 12px 24px;
 	border-radius: 6px;
-	border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.28);
+	border: 1px solid rgba(216, 194, 138, 0.28);
 	transition: background 0.2s, border-color 0.2s;
 
 	&:hover,
 	&:focus {
 		color: var(--wg-text);
-		background: rgba(var(--wg-gold-rgb), 0.075);
-		border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
+		background: rgba(194, 163, 90, 0.075);
+		border-color: rgba(216, 194, 138, 0.44);
 	}
 
 	// Matches the theme's .btn-primary dark gold plate (see _controls.scss).
 	&.primary {
 		color: #f0e6d8;
-		background: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
-		border-color: var(--wg-gold-soft);
+		background: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
+		border-color: #a8893f;
 		box-shadow:
 			inset 0 1px 0 rgba(255, 255, 255, 0.06),
 			0 2px 8px rgba(0, 0, 0, 0.24);
 
 		&:hover,
 		&:focus {
-			color: var(--wg-gold-hi);
-			background: linear-gradient(to bottom, var(--wg-gold-plate-hover) 0%, var(--wg-gold-plate-mid) 100%);
-			border-color: var(--wg-gold);
+			color: #fff4dd;
+			background: linear-gradient(to bottom, #6a5720 0%, #53431a 100%);
+			border-color: #c2a35a;
 		}
 	}
 }
@@ -434,7 +434,7 @@ a.sow-card:hover {
 	position: absolute;
 	inset: 0;
 	pointer-events: none;
-	background: linear-gradient(180deg, rgba(var(--wg-bg-deep-rgb), 0.55) 0%, rgba(var(--wg-bg-deep-rgb), 0.25) 38%, rgba(var(--wg-bg-deep-rgb), 0.82) 86%, var(--wg-bg) 100%);
+	background: linear-gradient(180deg, rgba(9, 8, 11, 0.55) 0%, rgba(9, 8, 11, 0.25) 38%, rgba(9, 8, 11, 0.82) 86%, var(--wg-bg) 100%);
 }
 
 .sow-home-hero-inner {
@@ -672,7 +672,7 @@ a.sow-card:hover {
 	line-height: 1.7;
 	background: var(--wg-ledger-panel);
 	border: 1px solid var(--wg-ledger-border);
-	border-left-color: rgba(var(--wg-gold-rgb), 0.32);
+	border-left-color: rgba(194, 163, 90, 0.32);
 	border-radius: 6px;
 	box-shadow: var(--wg-ledger-shadow);
 
@@ -1000,9 +1000,9 @@ a.sow-card:hover {
 	text-transform: uppercase;
 	font-weight: 600;
 	color: #d8cec0;
-	background: rgba(var(--wg-gold-rgb), 0.06);
+	background: rgba(194, 163, 90, 0.06);
 	padding: 12px 24px;
-	border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.28);
+	border: 1px solid rgba(216, 194, 138, 0.28);
 	border-radius: 6px;
 }
 

scss/westgate/_posts.scss

@@ -10,8 +10,8 @@ body.template-topic [component="topic/stats"] {
 
 body.template-topic .topic-info .badge,
 body.template-topic [component="topic/stats"] .badge {
-	background: rgba(var(--wg-bg-deepest-rgb), 0.22) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
+	background: rgba(8, 7, 10, 0.22) !important;
+	border-color: rgba(194, 163, 90, 0.16) !important;
 	color: var(--wg-ledger-ink-muted) !important;
 	font-family: var(--wg-font-ui);
 }
@@ -27,7 +27,7 @@ ul[component="topic"].posts::before {
 	bottom: 1.5rem;
 	left: 1.55rem;
 	width: 1px;
-	background: linear-gradient(to bottom, rgba(var(--wg-gold-rgb), 0.18), rgba(var(--wg-gold-rgb), 0.07));
+	background: linear-gradient(to bottom, rgba(194, 163, 90, 0.18), rgba(194, 163, 90, 0.07));
 	pointer-events: none;
 }
 
@@ -37,7 +37,7 @@ li[component="post"] {
 
 li[component="post"] .post-container-parent > .bg-body {
 	background: var(--wg-bg) !important;
-	box-shadow: 0 0 0 5px var(--wg-bg), 0 0 0 6px rgba(var(--wg-gold-rgb), 0.18) !important;
+	box-shadow: 0 0 0 5px var(--wg-bg), 0 0 0 6px rgba(194, 163, 90, 0.18) !important;
 }
 
 li[component="post"] .post-container {
@@ -48,7 +48,7 @@ li[component="post"] .post-container {
 		var(--wg-ledger-panel) !important;
 	background-size: 100% var(--wg-ledger-line), auto;
 	border: 1px solid var(--wg-ledger-border) !important;
-	border-left: 1px solid rgba(var(--wg-gold-rgb), 0.32) !important;
+	border-left: 1px solid rgba(194, 163, 90, 0.32) !important;
 	border-radius: 6px !important;
 	box-shadow: var(--wg-ledger-shadow) !important;
 }
@@ -60,13 +60,13 @@ li[component="post"] .post-container::before {
 	right: 1rem;
 	left: 1rem;
 	height: 1px;
-	background: linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.16), rgba(var(--wg-gold-rgb), 0.05), transparent);
+	background: linear-gradient(to right, rgba(194, 163, 90, 0.16), rgba(194, 163, 90, 0.05), transparent);
 	pointer-events: none;
 }
 
 li[component="post"].topic-owner-post .post-container,
 li[component="post"].self-post .post-container {
-	border-left-color: rgba(var(--wg-gold-rgb), 0.46) !important;
+	border-left-color: rgba(194, 163, 90, 0.46) !important;
 }
 
 li[component="post"] .post-header {
@@ -111,7 +111,7 @@ li[component="post"] .content .wg-mobile-table-scroll {
 	overflow-x: auto;
 	overflow-y: hidden;
 	-webkit-overflow-scrolling: touch;
-	scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
+	scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
 	scrollbar-width: thin;
 }
 
@@ -134,8 +134,8 @@ li[component="post"] .content h4 {
 // re-inked for the dark ledger.
 li[component="post"] .content code,
 .composer .preview code {
-	background: rgba(var(--wg-bg-deepest-rgb), 0.45);
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
+	background: rgba(8, 7, 10, 0.45);
+	border: 1px solid rgba(194, 163, 90, 0.12);
 	border-radius: 4px;
 	padding: 0.1em 0.35em;
 	color: var(--wg-text);
@@ -145,12 +145,12 @@ li[component="post"] .content code,
 
 li[component="post"] .content pre,
 .composer .preview pre {
-	background: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(var(--wg-bg-deepest-rgb), 0.82)) !important;
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
+	background: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(8, 7, 10, 0.82)) !important;
+	border: 1px solid rgba(194, 163, 90, 0.22) !important;
 	border-radius: 6px;
 	padding: 0.85rem 1rem;
 	color: var(--wg-text-soft) !important;
-	scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
+	scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
 	scrollbar-width: thin;
 }
 
@@ -178,7 +178,7 @@ li[component="post"] .content pre code.hljs,
 	.hljs-selector-tag,
 	.hljs-literal,
 	.hljs-tag {
-		color: var(--wg-gold-lit);
+		color: #e0c878;
 	}
 
 	.hljs-string,
@@ -225,29 +225,29 @@ li[component="post"] .content pre code.hljs,
 }
 
 li[component="post"] .content blockquote {
-	background: rgba(var(--wg-plum-rgb), 0.4);
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.14);
+	background: rgba(42, 18, 34, 0.4);
+	border: 1px solid rgba(194, 163, 90, 0.14);
 	border-radius: 6px;
 	padding: 0.75rem 1rem;
 }
 
 li[component="post"] .post-footer {
 	border-bottom: 0 !important;
-	border-top: 1px solid rgba(var(--wg-gold-rgb), 0.095);
+	border-top: 1px solid rgba(194, 163, 90, 0.095);
 	padding-top: 0.55rem;
 }
 
 li[component="post"] [component="post/actions"] .btn,
 li[component="post"] [component="post/reply-count"] {
 	color: var(--wg-text-muted) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
+	border-color: rgba(194, 163, 90, 0.1) !important;
 }
 
 li[component="post"] [component="post/actions"] .btn:hover,
 li[component="post"] [component="post/reply-count"]:hover {
 	color: var(--wg-text) !important;
 	background: var(--wg-border-soft) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
+	border-color: rgba(194, 163, 90, 0.2) !important;
 }
 
 @media (min-width: 992px) {
@@ -293,7 +293,7 @@ li[component="post"] [component="post/downvote"] {
 		// Font Awesome 7: fa-heart-crack (fa-heart-broken alias)
 		--fa: "\f7a9";
 		font-size: 0.95rem;
-		color: rgba(var(--wg-gold-rgb), 0.82);
+		color: rgba(194, 163, 90, 0.82);
 	}
 
 	&.downvoted {
@@ -319,7 +319,7 @@ li[component="post"] [component="post/downvote"] {
 .topic-sidebar-tools .btn:not(.btn-primary),
 [component="topic/navigator"] {
 	background: rgba(255, 255, 255, 0.018) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
+	border-color: rgba(194, 163, 90, 0.1) !important;
 	color: var(--wg-text-soft) !important;
 }
 
@@ -363,7 +363,7 @@ li[component="post"] [component="post/downvote"] {
 }
 
 body.template-topic .sticky-top hr {
-	border-color: rgba(var(--wg-gold-rgb), 0.12);
+	border-color: rgba(194, 163, 90, 0.12);
 }
 
 textarea[component="topic/quickreply/text"],
@@ -381,7 +381,7 @@ textarea[component="topic/quickreply/text"],
 
 textarea[component="topic/quickreply/text"]:focus,
 .quick-reply textarea:focus {
-	border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
+	border-color: rgba(194, 163, 90, 0.5) !important;
 	box-shadow: none !important;
 }
 
@@ -395,7 +395,7 @@ textarea[component="topic/quickreply/text"]:focus,
 .quick-reply .card-body,
 [component="topic/quickreply/container"] .card-body {
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.05) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.05) calc(100% - 1px)),
 		var(--wg-ledger-panel) !important;
 	background-size: 100% var(--wg-ledger-line), auto;
 	border-color: var(--wg-ledger-border) !important;
@@ -405,8 +405,8 @@ textarea[component="topic/quickreply/text"]:focus,
 
 .quick-reply .card-header,
 [component="topic/quickreply/container"] .card-header {
-	background: rgba(var(--wg-bg-deepest-rgb), 0.22) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
+	background: rgba(8, 7, 10, 0.22) !important;
+	border-color: rgba(194, 163, 90, 0.12) !important;
 	color: var(--wg-ledger-ink-muted) !important;
 	font-family: var(--wg-font-ui);
 }

scss/westgate/_search.scss

@@ -7,7 +7,7 @@
 	letter-spacing: 0.09em;
 	text-transform: uppercase;
 	color: var(--wg-gold);
-	background: rgba(var(--wg-gold-rgb), 0.1);
+	background: rgba(194, 163, 90, 0.1);
 	border: 1px solid var(--wg-ledger-border);
 	vertical-align: middle;
 }

scss/westgate/_surfaces.scss

@@ -7,7 +7,7 @@ body {
 body {
   --bs-link-color: var(--wg-gold);
   --bs-link-color-rgb: 194, 163, 90;
-  --bs-link-hover-color: var(--wg-gold-lit);
+  --bs-link-hover-color: #e0c878;
   --bs-link-hover-color-rgb: 224, 200, 120;
   font-family: var(--wg-font-text);
   -webkit-font-smoothing: antialiased;
@@ -34,7 +34,7 @@ a {
 
   &:hover,
   &:focus {
-    color: var(--wg-gold-lit);
+    color: #e0c878;
   }
 }
 
@@ -73,7 +73,7 @@ li[component="categories/category"]:hover,
 li[component="category/topic"]:hover,
 li[component="post"] .post-container:hover {
   background: var(--wg-velvet-panel-hover) !important;
-  border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
+  border-color: rgba(194, 163, 90, 0.22) !important;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.035),
     inset 0 0 38px rgba(120, 36, 84, 0.14),
@@ -142,13 +142,13 @@ samp,
 
 .alert {
   background: var(--wg-border-soft);
-  border-color: rgba(var(--wg-gold-rgb), 0.18);
+  border-color: rgba(194, 163, 90, 0.18);
   color: var(--wg-text-soft);
 }
 
 .alert-danger {
-  background: rgba(var(--wg-red-rgb), 0.16);
-  border-color: rgba(var(--wg-red-rgb), 0.32);
+  background: rgba(142, 52, 56, 0.16);
+  border-color: rgba(142, 52, 56, 0.32);
   color: #d8b1b1;
 }
 
@@ -157,7 +157,7 @@ samp,
 .user-icon,
 .avatar-tooltip .avatar,
 .avatar-tooltip img {
-  border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.32);
+  border: 1px solid rgba(216, 194, 138, 0.32);
   box-shadow:
     inset 0 1px 0 rgba(255, 242, 204, 0.2),
     inset 0 0 0 1px rgba(18, 15, 22, 0.58),
@@ -196,7 +196,7 @@ li[component="category/topic"] .user-icon {
 .status {
   box-shadow:
     0 0 0 2px var(--wg-status-ring),
-    0 0 0 3px rgba(var(--wg-ledger-ink-rgb), 0.14),
+    0 0 0 3px rgba(216, 194, 138, 0.14),
     0 0 12px rgba(0, 0, 0, 0.34);
 
   &.online {
@@ -255,7 +255,7 @@ li[component="category/topic"] .user-icon {
 @mixin wg-velvet-cover {
   background-image:
     radial-gradient(120% 90% at 18% 0%, rgba(58, 24, 48, 0.6), transparent 60%),
-    linear-gradient(100deg, var(--wg-plum), var(--wg-panel-2) 55%, var(--wg-bg-deep)) !important;
+    linear-gradient(100deg, #2a1222, #110f15 55%, #09080b) !important;
 }
 
 // replace core's grey-triangle default cover with the velvet material
@@ -288,7 +288,7 @@ li[component="category/topic"] .user-icon {
     linear-gradient(
       to bottom,
       rgba(255, 241, 196, 0.018),
-      rgba(var(--wg-bg-deepest-rgb), 0.08)
+      rgba(8, 7, 10, 0.08)
     ),
     var(--wg-velvet-panel) !important;
   border: 1px solid var(--wg-border) !important;
@@ -318,7 +318,7 @@ li[component="category/topic"] .user-icon {
 .notifications-list .mark-read,
 .chats-dropdown .mark-read,
 .chats-list .mark-read {
-  border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
+  border-color: rgba(194, 163, 90, 0.18) !important;
   border-radius: 6px !important;
   background: linear-gradient(
     to bottom,
@@ -341,7 +341,7 @@ li[component="category/topic"] .user-icon {
 .chats-dropdown .chat-room-btn,
 .chats-list .chat-room-btn,
 [component="chat/public/room"] {
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.12) !important;
+  border: 1px solid rgba(194, 163, 90, 0.12) !important;
   border-radius: 8px !important;
   background: transparent !important;
   box-shadow: none !important;
@@ -353,7 +353,7 @@ li[component="category/topic"] .user-icon {
 [component="chat/public/room"]:focus,
 [component="chat/public/room"].unread {
   background: var(--wg-border-soft) !important;
-  border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
+  border-color: rgba(194, 163, 90, 0.24) !important;
   color: var(--wg-text) !important;
 }
 
@@ -384,7 +384,7 @@ li[component="category/topic"] .user-icon {
 .chats-list .badge.bg-light {
   background: linear-gradient(
     to bottom,
-    rgba(var(--wg-ledger-ink-rgb), 0.13),
+    rgba(216, 194, 138, 0.13),
     rgba(70, 45, 52, 0.28)
   ) !important;
   border: 1px solid var(--wg-focus) !important;
@@ -403,13 +403,13 @@ li[component="category/topic"] .user-icon {
 }
 
 .page-flags [component="flags/filters"] {
-  border-bottom-color: rgba(var(--wg-gold-rgb), 0.12) !important;
+  border-bottom-color: rgba(194, 163, 90, 0.12) !important;
 }
 
 // table variables shared with notification/post tables live in _controls.scss
 .page-flags [component="flags/list"] :where(th, td) {
   color: var(--wg-text-soft) !important;
-  border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
+  border-color: rgba(194, 163, 90, 0.1) !important;
 }
 
 .page-flags [component="flags/list"] thead :where(th, td) {

scss/westgate/_tokens.scss

@@ -92,37 +92,23 @@
 	--wg-plum-soft: #3a1830;
 	--wg-gold: #c2a35a;
 	--wg-gold-soft: #a8893f;
-	--wg-gold-lit: #e0c878;
-	--wg-gold-hi: #fff4dd;
-	--wg-gold-plate: #5a4a1a;
-	--wg-gold-plate-hover: #6a5720;
-	--wg-gold-plate-mid: #53431a;
-	--wg-gold-plate-deep: #473914;
 	--wg-red: #8e3438;
-	/* prototype (#53): rgb triples so alpha uses swap with the palette candidate */
-	--wg-gold-rgb: 194, 163, 90;
-	--wg-ledger-ink-rgb: 216, 194, 138;
-	--wg-bg-deep-rgb: 9, 8, 11;
-	--wg-bg-deepest-rgb: 8, 7, 10;
-	--wg-plum-rgb: 42, 18, 34;
-	--wg-red-rgb: 142, 52, 56;
-	--wg-stamp-rgb: 168, 74, 78;
 	--wg-status-online: #7fb86a;
 	--wg-status-away: #d9b44a;
 	--wg-status-dnd: #c55a5f;
 	--wg-status-offline: #b7b0a6;
-	--wg-status-ring: rgba(var(--wg-bg-deep-rgb), 0.9);
+	--wg-status-ring: rgba(9, 8, 11, 0.9);
 	--wg-text: #e6e0d6;
 	--wg-text-soft: #b9b2a6;
 	--wg-text-muted: #9a9086;
-	--wg-border: rgba(var(--wg-gold-rgb), 0.14);
-	--wg-border-soft: rgba(var(--wg-gold-rgb), 0.08);
-	--wg-focus: rgba(var(--wg-gold-rgb), 0.28);
+	--wg-border: rgba(194, 163, 90, 0.14);
+	--wg-border-soft: rgba(194, 163, 90, 0.08);
+	--wg-focus: rgba(194, 163, 90, 0.28);
 	--wg-focus-ring: #c2a35a;
 	--wg-ledger-panel: rgba(21, 17, 26, 0.97);
-	--wg-ledger-ruling: rgba(var(--wg-gold-rgb), 0.055);
-	--wg-ledger-rule-strong: rgba(var(--wg-gold-rgb), 0.16);
-	--wg-ledger-border: rgba(var(--wg-gold-rgb), 0.18);
+	--wg-ledger-ruling: rgba(194, 163, 90, 0.055);
+	--wg-ledger-rule-strong: rgba(194, 163, 90, 0.16);
+	--wg-ledger-border: rgba(194, 163, 90, 0.18);
 		--wg-ledger-ink: #d8c28a;
 		--wg-ledger-ink-muted: #a99d8f;
 		--wg-ledger-stamp: #a84a4e;
@@ -132,11 +118,11 @@
 	--wg-velvet-panel: rgba(24, 20, 29, 0.97);
 	--wg-velvet-panel-hover: rgba(31, 26, 38, 0.98);
 	--wg-velvet-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), inset 0 0 34px rgba(96, 32, 68, 0.11), 0 10px 26px rgba(0, 0, 0, 0.24);
-	--wg-control-bg: linear-gradient(to bottom, rgba(var(--wg-gold-rgb), 0.15), rgba(var(--wg-gold-rgb), 0.05));
+	--wg-control-bg: linear-gradient(to bottom, rgba(194, 163, 90, 0.15), rgba(194, 163, 90, 0.05));
 }
 
 ::selection {
-	background: rgba(var(--wg-gold-rgb), 0.32);
+	background: rgba(194, 163, 90, 0.32);
 	color: #fff4dd;
 }
 

scss/westgate/_topbar.scss

@@ -9,7 +9,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
   z-index: 1020;
   color: var(--wg-text-soft);
   background: rgb(24, 20, 29);
-  border-bottom: 1px solid rgba(var(--wg-gold-rgb), 0.2);
+  border-bottom: 1px solid rgba(194, 163, 90, 0.2);
   box-shadow:
     inset 0 1px 0 rgba(255, 244, 221, 0.04),
     0 12px 32px rgba(0, 0, 0, 0.34);
@@ -47,14 +47,14 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
   justify-content: center;
   width: 2.3rem;
   height: 2.3rem;
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.36);
+  border: 1px solid rgba(194, 163, 90, 0.36);
   border-radius: 50%;
   color: var(--wg-gold);
   background:
     radial-gradient(circle at 38% 24%, rgba(255, 238, 190, 0.2), transparent 30%),
     linear-gradient(145deg, rgba(58, 24, 48, 0.7), rgba(10, 9, 13, 0.98));
   box-shadow:
-    inset 0 0 0 1px rgba(var(--wg-bg-deep-rgb), 0.66),
+    inset 0 0 0 1px rgba(9, 8, 11, 0.66),
     0 8px 18px rgba(0, 0, 0, 0.35);
   font-family: var(--wg-font-display);
   font-weight: 700;
@@ -105,8 +105,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
 .wg-topbar .nav-item.active > .nav-link,
 .wg-topbar .nav-item.active > .navigation-link {
   color: #f3ede4;
-  border-color: rgba(var(--wg-gold-rgb), 0.2);
-  background: rgba(var(--wg-gold-rgb), 0.075);
+  border-color: rgba(194, 163, 90, 0.2);
+  background: rgba(194, 163, 90, 0.075);
   box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
 }
 
@@ -137,8 +137,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
 .wg-topbar__utility-list [component$="/count"],
 .wg-topbar__drawer-actions [component$="/count"],
 .wg-topbar [component="navigation/count"] {
-  background: linear-gradient(to bottom, rgba(var(--wg-red-rgb), 0.92), rgba(84, 28, 39, 0.96)) !important;
-  border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.26);
+  background: linear-gradient(to bottom, rgba(142, 52, 56, 0.92), rgba(84, 28, 39, 0.96)) !important;
+  border: 1px solid rgba(216, 194, 138, 0.26);
   color: #fff0dc;
 }
 
@@ -159,7 +159,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
 .wg-topbar .user-dropdown {
   min-width: min(22rem, calc(100vw - 1.5rem));
   max-width: calc(100vw - 1.5rem);
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
+  border: 1px solid rgba(194, 163, 90, 0.22) !important;
   border-radius: 8px !important;
   color: var(--wg-text-soft) !important;
   background:
@@ -210,7 +210,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
 .wg-topbar__register {
   border: 1px solid var(--wg-gold-soft) !important;
   color: #f0e6d8 !important;
-  background: linear-gradient(to bottom, var(--wg-gold-plate), var(--wg-gold-plate-deep)) !important;
+  background: linear-gradient(to bottom, #5a4a1a, #473914) !important;
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.06),
     0 2px 8px rgba(0, 0, 0, 0.24);
@@ -221,8 +221,8 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
 .wg-topbar__register:hover,
 .wg-topbar__register:focus {
   border-color: var(--wg-gold) !important;
-  color: var(--wg-gold-hi) !important;
-  background: linear-gradient(to bottom, var(--wg-gold-plate-hover), var(--wg-gold-plate-mid)) !important;
+  color: #fff4dd !important;
+  background: linear-gradient(to bottom, #6a5720, #53431a) !important;
 }
 
 .wg-topbar__login,
@@ -241,15 +241,15 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
 
 .wg-topbar__login {
   color: var(--wg-text-soft);
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.2);
-  background: rgba(var(--wg-gold-rgb), 0.055);
+  border: 1px solid rgba(194, 163, 90, 0.2);
+  background: rgba(194, 163, 90, 0.055);
 }
 
 .wg-topbar__login:hover,
 .wg-topbar__login:focus {
   color: var(--wg-text);
-  border-color: rgba(var(--wg-gold-rgb), 0.3);
-  background: rgba(var(--wg-gold-rgb), 0.1);
+  border-color: rgba(194, 163, 90, 0.3);
+  background: rgba(194, 163, 90, 0.1);
 }
 
 .wg-topbar__burger {
@@ -258,21 +258,21 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
   justify-content: center;
   width: 2.4rem;
   height: 2.4rem;
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.22);
+  border: 1px solid rgba(194, 163, 90, 0.22);
   border-radius: 6px;
   color: var(--wg-text-soft);
-  background: rgba(var(--wg-gold-rgb), 0.055);
+  background: rgba(194, 163, 90, 0.055);
 }
 
 .wg-topbar__burger:hover,
 .wg-topbar__burger:focus {
   color: var(--wg-text);
-  background: rgba(var(--wg-gold-rgb), 0.1);
+  background: rgba(194, 163, 90, 0.1);
 }
 
 .wg-topbar__drawer {
   display: none;
-  border-top: 1px solid rgba(var(--wg-gold-rgb), 0.12);
+  border-top: 1px solid rgba(194, 163, 90, 0.12);
   background:
     linear-gradient(180deg, rgba(255, 244, 221, 0.025), transparent 38%),
     $wg-topbar-panel-bg;
@@ -294,10 +294,10 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
   display: flex;
   align-items: center;
   gap: 0.55rem;
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.18);
+  border: 1px solid rgba(194, 163, 90, 0.18);
   border-radius: 8px;
   padding: 0.5rem 0.65rem;
-  background: rgba(var(--wg-bg-deep-rgb), 0.45);
+  background: rgba(9, 8, 11, 0.45);
 }
 
 .wg-topbar__drawer-search input {
@@ -311,7 +311,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
 
 // The input's own outline is off; put the visible focus ring on its wrapper.
 .wg-topbar__drawer-search:focus-within {
-  border-color: rgba(var(--wg-gold-rgb), 0.5);
+  border-color: rgba(194, 163, 90, 0.5);
   box-shadow: 0 0 0 1px var(--wg-focus);
 }
 
@@ -328,7 +328,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
   align-items: center;
   justify-content: space-between;
   gap: 0.55rem;
-  border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
+  border: 1px solid rgba(194, 163, 90, 0.12);
   border-radius: 7px;
   padding: 0.62rem 0.7rem;
   color: var(--wg-text-soft);
@@ -341,7 +341,7 @@ $wg-topbar-panel-bg: rgba(21, 17, 26, 0.98);
 .wg-topbar__drawer-actions a:hover,
 .wg-topbar__drawer-actions a:focus {
   color: var(--wg-text);
-  border-color: rgba(var(--wg-gold-rgb), 0.22);
+  border-color: rgba(194, 163, 90, 0.22);
   background: var(--wg-border-soft);
 }
 

scss/westgate/_topics.scss

@@ -35,8 +35,8 @@ body.template-category .category-header .description {
 
 .topic-list-header .btn:hover,
 .topic-list-header .btn:focus {
-	background: rgba(var(--wg-gold-rgb), 0.075) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.26) !important;
+	background: rgba(194, 163, 90, 0.075) !important;
+	border-color: rgba(194, 163, 90, 0.26) !important;
 	color: var(--wg-text) !important;
 }
 
@@ -61,7 +61,7 @@ li[component="category/topic"] {
 		var(--wg-ledger-panel) !important;
 	background-size: 100% var(--wg-ledger-line), auto, auto;
 	border: 1px solid var(--wg-ledger-border) !important;
-	border-left: 1px solid rgba(var(--wg-gold-rgb), 0.34) !important;
+	border-left: 1px solid rgba(194, 163, 90, 0.34) !important;
 	border-radius: 6px !important;
 	box-shadow: var(--wg-ledger-shadow) !important;
 	transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
@@ -69,11 +69,11 @@ li[component="category/topic"] {
 
 li[component="category/topic"]:not(.unread) {
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.026) calc(100% - 1px)),
-		linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.024), transparent 5.25rem),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.026) calc(100% - 1px)),
+		linear-gradient(to right, rgba(194, 163, 90, 0.024), transparent 5.25rem),
 		linear-gradient(100deg, rgba(24, 17, 25, 0.28) 0%, rgba(14, 13, 18, 0.91) 42%, rgba(9, 8, 12, 0.95) 100%) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.085) !important;
-	border-left-color: rgba(var(--wg-gold-rgb), 0.12) !important;
+	border-color: rgba(194, 163, 90, 0.085) !important;
+	border-left-color: rgba(194, 163, 90, 0.12) !important;
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.014), inset 0 -1px 0 rgba(0, 0, 0, 0.36) !important;
 }
 
@@ -89,50 +89,50 @@ li[component="category/topic"]::after {
 	right: 0;
 	left: 0;
 	height: 1px;
-	background: linear-gradient(to right, var(--wg-focus), rgba(var(--wg-gold-rgb), 0.05), transparent);
+	background: linear-gradient(to right, var(--wg-focus), rgba(194, 163, 90, 0.05), transparent);
 	pointer-events: none;
 }
 
 li[component="category/topic"].unread:nth-child(even) {
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.055) calc(100% - 1px)),
-		linear-gradient(to right, rgba(var(--wg-ledger-ink-rgb), 0.09), transparent 5.25rem),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.055) calc(100% - 1px)),
+		linear-gradient(to right, rgba(216, 194, 138, 0.09), transparent 5.25rem),
 		var(--wg-ledger-panel) !important;
 	background-size: 100% var(--wg-ledger-line), auto, auto;
 }
 
 li[component="category/topic"]:hover {
-	border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
+	border-color: rgba(194, 163, 90, 0.18) !important;
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), inset 0 0 16px rgba(120, 36, 84, 0.07), 0 8px 18px rgba(0, 0, 0, 0.2) !important;
 }
 
 li[component="category/topic"].unread {
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.052) calc(100% - 1px)),
-		linear-gradient(to right, rgba(var(--wg-ledger-ink-rgb), 0.085), transparent 5.65rem),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.052) calc(100% - 1px)),
+		linear-gradient(to right, rgba(216, 194, 138, 0.085), transparent 5.65rem),
 		var(--wg-ledger-panel) !important;
-	border-color: rgba(var(--wg-ledger-ink-rgb), 0.17) !important;
+	border-color: rgba(216, 194, 138, 0.17) !important;
 	border-left-color: var(--wg-ledger-ink) !important;
 	box-shadow: var(--wg-ledger-shadow) !important;
 }
 
 li[component="category/topic"].pinned {
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.045) calc(100% - 1px)),
-		linear-gradient(90deg, rgba(var(--wg-gold-rgb), 0.075), transparent 5.75rem),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.045) calc(100% - 1px)),
+		linear-gradient(90deg, rgba(194, 163, 90, 0.075), transparent 5.75rem),
 		var(--wg-ledger-panel) !important;
-	border-left-color: rgba(var(--wg-ledger-ink-rgb), 0.44) !important;
+	border-left-color: rgba(216, 194, 138, 0.44) !important;
 	box-shadow:
 		var(--wg-ledger-shadow),
-		inset 0 -1px 0 rgba(var(--wg-ledger-ink-rgb), 0.055) !important;
+		inset 0 -1px 0 rgba(216, 194, 138, 0.055) !important;
 }
 
 li[component="category/topic"].pinned:not(.unread) {
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.036) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.036) calc(100% - 1px)),
 		linear-gradient(90deg, rgba(122, 101, 45, 0.09), transparent 5.75rem),
 		linear-gradient(100deg, rgba(28, 22, 26, 0.36), rgba(13, 12, 17, 0.94)) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.12) !important;
+	border-color: rgba(194, 163, 90, 0.12) !important;
 	border-left-color: var(--wg-focus) !important;
 }
 
@@ -147,7 +147,7 @@ li[component="category/topic"].pinned:has(+ li[component="category/topic"]:not(.
 	right: 0.25rem;
 	height: 1px;
 	background:
-		linear-gradient(to right, transparent, rgba(var(--wg-ledger-ink-rgb), 0.22), rgba(var(--wg-red-rgb), 0.1), transparent);
+		linear-gradient(to right, transparent, rgba(216, 194, 138, 0.22), rgba(142, 52, 56, 0.1), transparent);
 }
 
 li[component="category/topic"].locked {
@@ -155,11 +155,11 @@ li[component="category/topic"].locked {
 		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(150, 72, 78, 0.04) calc(100% - 1px)),
 		linear-gradient(90deg, rgba(93, 47, 54, 0.11), transparent 5.75rem),
 		var(--wg-ledger-panel) !important;
-	border-color: rgba(var(--wg-stamp-rgb), 0.18) !important;
-	border-left-color: rgba(var(--wg-stamp-rgb), 0.42) !important;
+	border-color: rgba(168, 74, 78, 0.18) !important;
+	border-left-color: rgba(168, 74, 78, 0.42) !important;
 	box-shadow:
 		var(--wg-ledger-shadow),
-		0 0 12px rgba(var(--wg-red-rgb), 0.09) !important;
+		0 0 12px rgba(142, 52, 56, 0.09) !important;
 }
 
 li[component="category/topic"].locked:not(.unread) {
@@ -167,19 +167,19 @@ li[component="category/topic"].locked:not(.unread) {
 		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(150, 72, 78, 0.034) calc(100% - 1px)),
 		linear-gradient(90deg, rgba(82, 39, 46, 0.1), transparent 5.75rem),
 		linear-gradient(100deg, rgba(24, 16, 21, 0.38), rgba(11, 10, 14, 0.95)) !important;
-	border-color: rgba(var(--wg-stamp-rgb), 0.14) !important;
+	border-color: rgba(168, 74, 78, 0.14) !important;
 }
 
 li[component="category/topic"].locked.pinned {
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.045) calc(100% - 1px)),
-		linear-gradient(90deg, rgba(var(--wg-stamp-rgb), 0.1), rgba(var(--wg-gold-rgb), 0.065) 4.4rem, transparent 7rem),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
+		linear-gradient(90deg, rgba(168, 74, 78, 0.1), rgba(194, 163, 90, 0.065) 4.4rem, transparent 7rem),
 		var(--wg-ledger-panel) !important;
-	border-color: rgba(var(--wg-stamp-rgb), 0.2) !important;
-	border-left-color: rgba(var(--wg-stamp-rgb), 0.58) !important;
+	border-color: rgba(168, 74, 78, 0.2) !important;
+	border-left-color: rgba(168, 74, 78, 0.58) !important;
 	box-shadow:
 		var(--wg-ledger-shadow),
-		0 0 14px rgba(var(--wg-red-rgb), 0.085) !important;
+		0 0 14px rgba(142, 52, 56, 0.085) !important;
 }
 
 li[component="category/topic"].pinned::after,
@@ -189,13 +189,13 @@ li[component="category/topic"].locked::after {
 
 li[component="category/topic"].pinned [component="topic/pinned"] {
 	background: rgba(93, 78, 32, 0.34) !important;
-	border-color: rgba(var(--wg-ledger-ink-rgb), 0.28) !important;
+	border-color: rgba(216, 194, 138, 0.28) !important;
 	color: var(--wg-ledger-ink) !important;
 }
 
 li[component="category/topic"].locked [component="topic/locked"] {
 	background: rgba(72, 31, 38, 0.38) !important;
-	border-color: rgba(var(--wg-stamp-rgb), 0.32) !important;
+	border-color: rgba(168, 74, 78, 0.32) !important;
 	color: #d7aaa5 !important;
 }
 
@@ -215,7 +215,7 @@ li[component="category/topic"] .title {
 ul.topics-list li[component="category/topic"].unread .title,
 ul[component="category"] li[component="category/topic"].unread .title {
 	color: #f0e7da !important;
-	text-shadow: 0 0 7px rgba(var(--wg-ledger-ink-rgb), 0.045);
+	text-shadow: 0 0 7px rgba(216, 194, 138, 0.045);
 }
 
 ul.topics-list li[component="category/topic"]:not(.unread) .title,
@@ -242,8 +242,8 @@ li[component="category/topic"] .badge,
 a[component="topic/category"] {
 	position: relative;
 	background:
-		linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(8, 7, 10, 0.2)) !important;
+	border-color: rgba(194, 163, 90, 0.18) !important;
 	border-radius: 3px !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 238, 190, 0.055),
@@ -284,20 +284,20 @@ li[component="category/topic"] [component="topic/labels"] .badge i {
 }
 
 li[component="category/topic"] [component="topic/watched"] {
-	background: linear-gradient(to bottom, rgba(59, 72, 50, 0.25), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
+	background: linear-gradient(to bottom, rgba(59, 72, 50, 0.25), rgba(8, 7, 10, 0.2)) !important;
 	border-color: rgba(143, 166, 100, 0.22) !important;
 	color: #b7c59d !important;
 }
 
 li[component="category/topic"] [component="topic/ignored"],
 li[component="category/topic"] [component="topic/moved"] {
-	background: linear-gradient(to bottom, rgba(72, 67, 58, 0.22), rgba(var(--wg-bg-deepest-rgb), 0.18)) !important;
+	background: linear-gradient(to bottom, rgba(72, 67, 58, 0.22), rgba(8, 7, 10, 0.18)) !important;
 	border-color: rgba(169, 157, 143, 0.16) !important;
 	color: #aaa095 !important;
 }
 
 li[component="category/topic"] [component="topic/scheduled"] {
-	background: linear-gradient(to bottom, rgba(70, 56, 90, 0.24), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
+	background: linear-gradient(to bottom, rgba(70, 56, 90, 0.24), rgba(8, 7, 10, 0.2)) !important;
 	border-color: rgba(160, 135, 190, 0.2) !important;
 	color: #c0aed0 !important;
 }
@@ -306,9 +306,9 @@ li[component="category/topic"] .tag,
 li[component="category/topic"] .tag-item,
 .tag-list .tag {
 	background:
-		linear-gradient(to bottom, rgba(255, 241, 196, 0.026), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
-	border-left: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.32) !important;
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.026), rgba(8, 7, 10, 0.2)) !important;
+	border-color: rgba(194, 163, 90, 0.22) !important;
+	border-left: 1px solid rgba(216, 194, 138, 0.32) !important;
 	color: #cdbb8b !important;
 	display: inline-flex;
 	align-items: center;
@@ -326,7 +326,7 @@ li[component="category/topic"] .tag-item,
 li[component="category/topic"] .tag i,
 li[component="category/topic"] .tag-item i,
 .tag-list .tag i {
-	color: var(--wg-ledger-ink);
+	color: #d8c28a;
 	font-size: 0.68rem;
 	opacity: 0.88;
 }
@@ -348,8 +348,8 @@ li[component="category/topic"] [component="topic/select"] {
 	align-items: center;
 	justify-content: center;
 	background:
-		linear-gradient(to bottom, rgba(255, 241, 196, 0.045), rgba(var(--wg-bg-deepest-rgb), 0.28));
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.22);
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.045), rgba(8, 7, 10, 0.28));
+	border: 1px solid rgba(194, 163, 90, 0.22);
 	border-radius: 3px;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 238, 190, 0.06),
@@ -360,7 +360,7 @@ li[component="category/topic"] [component="topic/select"] {
 
 li[component="category/topic"] [component="topic/select"]:hover,
 li[component="category/topic"] [component="topic/select"]:focus {
-	border-color: rgba(var(--wg-ledger-ink-rgb), 0.42);
+	border-color: rgba(216, 194, 138, 0.42);
 	color: var(--wg-ledger-ink) !important;
 }
 
@@ -368,7 +368,7 @@ li[component="category/topic"] .meta.stats > div {
 	min-height: 3.25rem;
 	padding: var(--wg-space-2xs) var(--wg-space-xs);
 	background: rgba(255, 255, 255, 0.018) !important;
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.09) !important;
+	border: 1px solid rgba(194, 163, 90, 0.09) !important;
 	border-radius: 3px !important;
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
 }
@@ -394,7 +394,7 @@ li[component="category/topic"] .meta.stats .text-muted {
 
 li[component="category/topic"] [component="topic/teaser"] .lastpost {
 	background: transparent !important;
-	border-left-color: rgba(var(--wg-gold-rgb), 0.42) !important;
+	border-left-color: rgba(194, 163, 90, 0.42) !important;
 	color: var(--wg-ledger-ink-muted);
 }
 
@@ -417,5 +417,5 @@ li[component="category/topic"] [component="topic/teaser"] .timeago {
 
 .topic-thumbs .topic-thumb {
 	background: rgba(255, 255, 255, 0.025) !important;
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
+	border: 1px solid rgba(194, 163, 90, 0.12);
 }

scss/westgate/_widgets.scss

@@ -53,7 +53,7 @@
 ) {
 	padding: var(--wg-space-md);
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.045) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
 		var(--wg-velvet-panel) !important;
 	background-size: 100% var(--wg-ledger-line), auto;
 	border: 1px solid var(--wg-border);
@@ -71,9 +71,9 @@
 [data-widget-area] .westgate-widget-card,
 [data-widget-area] .wg-widget-card {
 	background:
-		linear-gradient(to bottom, rgba(255, 241, 196, 0.024), rgba(var(--wg-bg-deepest-rgb), 0.08)),
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.024), rgba(8, 7, 10, 0.08)),
 		var(--wg-velvet-panel) !important;
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.15) !important;
+	border: 1px solid rgba(194, 163, 90, 0.15) !important;
 	border-radius: 8px !important;
 	box-shadow: var(--wg-velvet-shadow) !important;
 	color: var(--wg-text-soft) !important;
@@ -81,9 +81,9 @@
 
 [data-widget-area] .card-header {
 	background:
-		linear-gradient(to right, var(--wg-border-soft), rgba(var(--wg-plum-rgb), 0.2), transparent),
-		rgba(var(--wg-bg-deepest-rgb), 0.24) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.13) !important;
+		linear-gradient(to right, var(--wg-border-soft), rgba(42, 18, 34, 0.2), transparent),
+		rgba(8, 7, 10, 0.24) !important;
+	border-color: rgba(194, 163, 90, 0.13) !important;
 	color: var(--wg-ledger-ink) !important;
 	font-family: var(--wg-font-display);
 	font-weight: 600;
@@ -102,9 +102,9 @@
 
 [data-widget-area] .alert {
 	background:
-		linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.055), transparent 5rem),
+		linear-gradient(to right, rgba(194, 163, 90, 0.055), transparent 5rem),
 		var(--wg-velvet-panel) !important;
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.2) !important;
+	border: 1px solid rgba(194, 163, 90, 0.2) !important;
 	border-left-width: 2px !important;
 	border-radius: 8px;
 	box-shadow:
@@ -124,28 +124,28 @@
 
 [data-widget-area] .alert-info {
 	background:
-		linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.07), transparent 5rem),
+		linear-gradient(to right, rgba(194, 163, 90, 0.07), transparent 5rem),
 		var(--wg-velvet-panel) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
-	border-left-color: rgba(var(--wg-gold-rgb), 0.5) !important;
+	border-color: rgba(194, 163, 90, 0.2) !important;
+	border-left-color: rgba(194, 163, 90, 0.5) !important;
 	color: var(--wg-text-soft) !important;
 }
 
 [data-widget-area] .alert-warning {
 	background:
-		linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.12), transparent 5rem),
+		linear-gradient(to right, rgba(194, 163, 90, 0.12), transparent 5rem),
 		var(--wg-velvet-panel) !important;
 	border-color: var(--wg-focus) !important;
-	border-left-color: rgba(var(--wg-gold-rgb), 0.62) !important;
+	border-left-color: rgba(194, 163, 90, 0.62) !important;
 	color: #e0cea2 !important;
 }
 
 [data-widget-area] .alert-danger {
 	background:
-		linear-gradient(to right, rgba(var(--wg-red-rgb), 0.12), transparent 5rem),
+		linear-gradient(to right, rgba(142, 52, 56, 0.12), transparent 5rem),
 		var(--wg-velvet-panel) !important;
-	border-color: rgba(var(--wg-red-rgb), 0.32) !important;
-	border-left-color: rgba(var(--wg-red-rgb), 0.62) !important;
+	border-color: rgba(142, 52, 56, 0.32) !important;
+	border-left-color: rgba(142, 52, 56, 0.62) !important;
 	color: #d8b1b1 !important;
 }
 
@@ -171,13 +171,13 @@
 
 [data-widget-area] :where(a:not(.btn):not(.nav-link):not(.dropdown-item)):hover,
 [data-widget-area] :where(a:not(.btn):not(.nav-link):not(.dropdown-item)):focus {
-	color: var(--wg-gold-lit);
+	color: #e0c878;
 	text-decoration: underline;
 }
 
 [data-widget-area] .list-group {
 	background: transparent !important;
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.12);
+	border: 1px solid rgba(194, 163, 90, 0.12);
 	border-radius: 8px;
 	overflow: hidden;
 }
@@ -190,8 +190,8 @@
 
 [data-widget-area] .badge {
 	background:
-		linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.18) !important;
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(8, 7, 10, 0.2)) !important;
+	border: 1px solid rgba(194, 163, 90, 0.18) !important;
 	color: var(--wg-ledger-ink-muted) !important;
 	font-family: var(--wg-font-ui);
 }
@@ -204,7 +204,7 @@
 [data-widget-area] :where(.forum-stats, .stats-card) > .d-flex,
 [data-widget-area] :where(.stats-card, .stats) :where(.card, .card-header) {
 	background: rgba(255, 255, 255, 0.018) !important;
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.09) !important;
+	border: 1px solid rgba(194, 163, 90, 0.09) !important;
 	border-radius: 3px !important;
 	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
 }
@@ -232,7 +232,7 @@
 	margin: 0 0 var(--wg-space-sm);
 	padding: 0.6rem;
 	background:
-		linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(var(--wg-bg-deepest-rgb), 0.08)),
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(8, 7, 10, 0.08)),
 		var(--wg-velvet-panel) !important;
 	border: 1px solid var(--wg-border);
 	border-radius: 8px;
@@ -250,7 +250,7 @@
 
 [data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn:hover,
 [data-widget-area] :where(.row, .card-body):has(> a.btn[href*="/user/"]) > a.btn:focus {
-	background: rgba(var(--wg-gold-rgb), 0.06) !important;
+	background: rgba(194, 163, 90, 0.06) !important;
 	background-image: none !important;
 	color: var(--wg-text) !important;
 	text-decoration: none;

scss/westgate/_wiki-prose.scss

@@ -13,18 +13,18 @@
 	--wiki-chrome-page-title-font-weight: 500;
 	--wiki-chrome-muted-color: var(--wg-text-muted);
 	--wiki-chrome-link-color: var(--wg-gold);
-	--wiki-chrome-link-hover-color: var(--wg-gold-lit);
+	--wiki-chrome-link-hover-color: #e0c878;
 	--wiki-chrome-accent-color: var(--wg-gold-soft);
 	--wiki-chrome-hero-bg: linear-gradient(
 		180deg,
-		rgba(var(--wg-plum-rgb), 0.55) 0%,
+		rgba(42, 18, 34, 0.55) 0%,
 		rgba(18, 16, 23, 0.98) 100%
 	);
-	--wiki-chrome-warning-border: rgba(var(--wg-gold-rgb), 0.45);
+	--wiki-chrome-warning-border: rgba(194, 163, 90, 0.45);
 	/* Backdrop scrims (drawer/dialog overlays): deep charcoal instead of the
 	   plugin's slate-blue defaults, so overlays stay warm against the theme. */
-	--wiki-scrim: rgba(var(--wg-bg-deep-rgb), 0.55);
-	--wiki-scrim-strong: rgba(var(--wg-bg-deep-rgb), 0.8);
+	--wiki-scrim: rgba(9, 8, 11, 0.55);
+	--wiki-scrim-strong: rgba(9, 8, 11, 0.8);
 	--wiki-chrome-danger: var(--wg-red);
 	--wiki-chrome-danger-hover: #c55a5f;
 	--wiki-redlink-color: #c06a6e;
@@ -49,107 +49,107 @@
 	--wiki-prose-h4-size: 1.26rem;
 	--wiki-prose-heading-rule: linear-gradient(
 		90deg,
-		rgba(var(--wg-gold-rgb), 0.42),
-		rgba(var(--wg-gold-rgb), 0.1) 54%,
+		rgba(194, 163, 90, 0.42),
+		rgba(194, 163, 90, 0.1) 54%,
 		transparent
 	);
 
 	--wiki-prose-link-color: var(--wg-gold);
-	--wiki-prose-link-hover-color: var(--wg-gold-lit);
+	--wiki-prose-link-hover-color: #e0c878;
 
 	--wiki-prose-blockquote-bg: rgba(35, 27, 23, 0.36);
-	--wiki-prose-blockquote-border: rgba(var(--wg-gold-rgb), 0.4);
+	--wiki-prose-blockquote-border: rgba(194, 163, 90, 0.4);
 	--wiki-prose-blockquote-color: var(--wg-text-soft);
 
 	--wiki-prose-code-font-family: var(--wg-font-code);
-	--wiki-prose-code-bg: rgba(var(--wg-bg-deepest-rgb), 0.45);
-	--wiki-prose-code-border: rgba(var(--wg-gold-rgb), 0.12);
+	--wiki-prose-code-bg: rgba(8, 7, 10, 0.45);
+	--wiki-prose-code-border: rgba(194, 163, 90, 0.12);
 	--wiki-prose-code-color: var(--wg-text);
 
-	--wiki-prose-pre-bg: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(var(--wg-bg-deepest-rgb), 0.82));
-	--wiki-prose-pre-border: rgba(var(--wg-gold-rgb), 0.22);
+	--wiki-prose-pre-bg: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(8, 7, 10, 0.82));
+	--wiki-prose-pre-border: rgba(194, 163, 90, 0.22);
 	--wiki-prose-pre-color: var(--wg-text-soft);
 
-	--wiki-prose-hr-color: rgba(var(--wg-gold-rgb), 0.18);
-	--wiki-prose-table-border: rgba(var(--wg-gold-rgb), 0.12);
+	--wiki-prose-hr-color: rgba(194, 163, 90, 0.18);
+	--wiki-prose-table-border: rgba(194, 163, 90, 0.12);
 	--wiki-prose-table-head-color: var(--wg-ledger-ink-muted);
-	--wiki-prose-table-hover-bg: rgba(var(--wg-gold-rgb), 0.04);
+	--wiki-prose-table-hover-bg: rgba(194, 163, 90, 0.04);
 	--wiki-prose-table-hover-color: var(--wg-text);
 
-	--wiki-prose-caption-bg: rgba(var(--wg-bg-deepest-rgb), 0.42);
+	--wiki-prose-caption-bg: rgba(8, 7, 10, 0.42);
 	--wiki-prose-caption-color: var(--wg-text-muted);
 	--wiki-prose-caption-font-family: var(--wg-font-text);
-	--wiki-prose-footnote-border: rgba(var(--wg-gold-rgb), 0.2);
+	--wiki-prose-footnote-border: rgba(194, 163, 90, 0.2);
 	--wiki-prose-footnote-color: var(--wg-text-muted);
 	--wiki-prose-footnote-marker-color: var(--wg-gold);
 	--wiki-prose-footnote-popover-bg: linear-gradient(180deg, rgba(28, 20, 33, 0.98), rgba(14, 11, 17, 0.98));
-	--wiki-prose-footnote-popover-border: rgba(var(--wg-gold-rgb), 0.26);
+	--wiki-prose-footnote-popover-border: rgba(194, 163, 90, 0.26);
 	--wiki-prose-footnote-popover-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.035),
 		0 14px 30px rgba(0, 0, 0, 0.46);
 	--wiki-prose-footnote-target-bg: var(--wg-border-soft);
-	--wiki-prose-image-bg: rgba(var(--wg-bg-deepest-rgb), 0.36);
-	--wiki-prose-image-border: rgba(var(--wg-gold-rgb), 0.18);
+	--wiki-prose-image-bg: rgba(8, 7, 10, 0.36);
+	--wiki-prose-image-border: rgba(194, 163, 90, 0.18);
 	--wiki-prose-image-padding: 0;
 	--wiki-prose-image-radius: 7px;
 	--wiki-prose-image-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.025),
 		0 8px 20px rgba(0, 0, 0, 0.18);
-	--wiki-prose-media-iframe-border: rgba(var(--wg-gold-rgb), 0.15);
+	--wiki-prose-media-iframe-border: rgba(194, 163, 90, 0.15);
 
-	--wiki-prose-raw-embed-bg: rgba(var(--wg-bg-deepest-rgb), 0.4);
-	--wiki-prose-raw-embed-border: rgba(var(--wg-gold-rgb), 0.25);
+	--wiki-prose-raw-embed-bg: rgba(8, 7, 10, 0.4);
+	--wiki-prose-raw-embed-border: rgba(194, 163, 90, 0.25);
 	--wiki-prose-raw-embed-color: var(--wg-text-muted);
 
 	--wiki-compose-editable-bg: rgba(24, 15, 29, 0.94);
 	--wiki-compose-editable-border-color: rgba(202, 164, 106, 0.2);
 	--wiki-compose-editable-focus-shadow:
 		inset 0 1px 0 rgba(255, 255, 255, 0.026),
-		0 0 0 1px rgba(var(--wg-gold-rgb), 0.3),
+		0 0 0 1px rgba(194, 163, 90, 0.3),
 		0 0 18px var(--wg-border-soft);
 
-	--wiki-ck-base-background: var(--wg-panel);
+	--wiki-ck-base-background: #18141d;
 	--wiki-ck-base-foreground: #1e1824;
-	--wiki-ck-base-border: rgba(var(--wg-gold-rgb), 0.22);
+	--wiki-ck-base-border: rgba(194, 163, 90, 0.22);
 	--wiki-ck-base-text: #cfc5b7;
 	/* CKEditor UI: .ck-reset_all and toolbar SVGs use --ck-color-text / currentColor */
 	--wiki-ck-ui-text: rgba(244, 236, 220, 0.92);
 	--wiki-ck-toolbar-icon-color: rgba(244, 236, 220, 0.9);
 	--wiki-ck-tooltip-background: rgba(10, 8, 14, 0.96);
 	--wiki-ck-tooltip-text: rgba(244, 236, 220, 0.95);
-	--wiki-ck-focus-border: rgba(var(--wg-gold-rgb), 0.45);
-	--wiki-ck-focus-outer-shadow: rgba(var(--wg-gold-rgb), 0.12);
+	--wiki-ck-focus-border: rgba(194, 163, 90, 0.45);
+	--wiki-ck-focus-outer-shadow: rgba(194, 163, 90, 0.12);
 	--wiki-ck-shadow-drop: rgba(0, 0, 0, 0.45);
 	--wiki-ck-shadow-inner: rgba(0, 0, 0, 0.25);
 	--wiki-ck-toolbar-background: #16121a;
-	--wiki-ck-toolbar-border: rgba(var(--wg-gold-rgb), 0.18);
+	--wiki-ck-toolbar-border: rgba(194, 163, 90, 0.18);
 	--wiki-ck-button-bg: transparent;
-	--wiki-ck-button-hover-bg: rgba(var(--wg-gold-rgb), 0.1);
+	--wiki-ck-button-hover-bg: rgba(194, 163, 90, 0.1);
 	--wiki-ck-button-active-bg: var(--wg-border);
-	--wiki-ck-button-on-bg: rgba(var(--wg-gold-rgb), 0.12);
-	--wiki-ck-button-on-hover-bg: rgba(var(--wg-gold-rgb), 0.18);
-	--wiki-ck-button-on-active-bg: rgba(var(--wg-gold-rgb), 0.22);
+	--wiki-ck-button-on-bg: rgba(194, 163, 90, 0.12);
+	--wiki-ck-button-on-hover-bg: rgba(194, 163, 90, 0.18);
+	--wiki-ck-button-on-active-bg: rgba(194, 163, 90, 0.22);
 	--wiki-ck-button-on-color: #e6d9b8;
 	--wiki-ck-dropdown-background: #1a1520;
-	--wiki-ck-dropdown-border: rgba(var(--wg-gold-rgb), 0.2);
-	--wiki-ck-input-background: rgba(var(--wg-bg-deep-rgb), 0.55);
-	--wiki-ck-input-border: rgba(var(--wg-gold-rgb), 0.22);
-	--wiki-ck-input-text: var(--wg-text);
+	--wiki-ck-dropdown-border: rgba(194, 163, 90, 0.2);
+	--wiki-ck-input-background: rgba(9, 8, 11, 0.55);
+	--wiki-ck-input-border: rgba(194, 163, 90, 0.22);
+	--wiki-ck-input-text: #e6e0d6;
 	--wiki-ck-list-background: #1a1520;
-	--wiki-ck-list-hover-bg: rgba(var(--wg-gold-rgb), 0.1);
-	--wiki-ck-list-on-bg: rgba(var(--wg-gold-rgb), 0.16);
+	--wiki-ck-list-hover-bg: rgba(194, 163, 90, 0.1);
+	--wiki-ck-list-on-bg: rgba(194, 163, 90, 0.16);
 	--wiki-ck-list-on-text: #f0e6cc;
 	--wiki-ck-panel-background: #1a1520;
-	--wiki-ck-panel-border: rgba(var(--wg-gold-rgb), 0.2);
+	--wiki-ck-panel-border: rgba(194, 163, 90, 0.2);
 	--wiki-ck-switch-off-bg: #2a2430;
 	--wiki-ck-label-bg: #16121a;
 
 	--wiki-fab-bg: rgba(18, 15, 22, 0.9);
-	--wiki-fab-border-color: rgba(var(--wg-gold-rgb), 0.18);
+	--wiki-fab-border-color: rgba(194, 163, 90, 0.18);
 	--wiki-fab-shadow: var(--wg-velvet-shadow);
-	--wiki-fab-btn-bg: rgba(var(--wg-gold-rgb), 0.075);
-	--wiki-fab-btn-border: rgba(var(--wg-ledger-ink-rgb), 0.24);
-	--wiki-fab-danger-bg: rgba(var(--wg-red-rgb), 0.16);
+	--wiki-fab-btn-bg: rgba(194, 163, 90, 0.075);
+	--wiki-fab-btn-border: rgba(216, 194, 138, 0.24);
+	--wiki-fab-danger-bg: rgba(142, 52, 56, 0.16);
 
 	--wiki-editor-table-handle-layer: 4;
 	--wiki-infobox-layer: 1;
@@ -279,7 +279,7 @@
 .westgate-wiki .card.wiki-card:hover,
 .westgate-wiki .card.wiki-topic-card:hover {
 	background: var(--wg-velvet-panel-hover) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
+	border-color: rgba(194, 163, 90, 0.22) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 255, 255, 0.035),
 		inset 0 0 38px rgba(120, 36, 84, 0.14),
@@ -412,7 +412,7 @@
 					90deg,
 					transparent,
 					var(--wg-focus) 22%,
-					rgba(var(--wg-gold-rgb), 0.82) 50%,
+					rgba(194, 163, 90, 0.82) 50%,
 					var(--wg-focus) 78%,
 					transparent
 				)
@@ -428,8 +428,8 @@
 				--wiki-prose-heading-rule-right,
 				linear-gradient(
 					270deg,
-					rgba(var(--wg-gold-rgb), 0.82),
-					rgba(var(--wg-gold-rgb), 0.24) 54%,
+					rgba(194, 163, 90, 0.82),
+					rgba(194, 163, 90, 0.24) 54%,
 					transparent
 				)
 			);
@@ -464,7 +464,7 @@
 				90deg,
 				transparent,
 				var(--wg-focus) 22%,
-				rgba(var(--wg-gold-rgb), 0.82) 50%,
+				rgba(194, 163, 90, 0.82) 50%,
 				var(--wg-focus) 78%,
 				transparent
 			)
@@ -479,8 +479,8 @@
 			--wiki-prose-heading-rule-right,
 			linear-gradient(
 				270deg,
-				rgba(var(--wg-gold-rgb), 0.82),
-				rgba(var(--wg-gold-rgb), 0.24) 54%,
+				rgba(194, 163, 90, 0.82),
+				rgba(194, 163, 90, 0.24) 54%,
 				transparent
 			)
 		);
@@ -587,7 +587,7 @@
 
 .westgate-wiki .wiki-breadcrumb-trail__link:hover,
 .westgate-wiki .wiki-breadcrumb-trail__link:focus {
-	color: var(--wg-gold-lit);
+	color: #e0c878;
 	text-decoration: underline;
 }
 
@@ -610,18 +610,18 @@
 
 .westgate-wiki :where(.wiki-card-link, .wiki-card h2 a, .wiki-topic-list a, .wiki-index-entry-title, .wiki-index-jump-link, .wiki-page-byline__userlink) {
 	color: var(--wg-gold) !important;
-	text-decoration-color: rgba(var(--wg-gold-rgb), 0.5);
+	text-decoration-color: rgba(194, 163, 90, 0.5);
 }
 
 .westgate-wiki :where(.wiki-card-link, .wiki-card h2 a, .wiki-topic-list a, .wiki-index-entry-title, .wiki-index-jump-link, .wiki-page-byline__userlink):hover,
 .westgate-wiki :where(.wiki-card-link, .wiki-card h2 a, .wiki-topic-list a, .wiki-index-entry-title, .wiki-index-jump-link, .wiki-page-byline__userlink):focus {
-	color: var(--wg-gold-lit) !important;
+	color: #e0c878 !important;
 	text-decoration-color: currentColor;
 }
 
 .westgate-wiki .wiki-sidebar-disclosure__summary {
 	background: linear-gradient(180deg, rgba(255, 244, 221, 0.025), rgba(0, 0, 0, 0.075)) !important;
-	border-bottom-color: rgba(var(--wg-gold-rgb), 0.11) !important;
+	border-bottom-color: rgba(194, 163, 90, 0.11) !important;
 	color: var(--wg-text);
 	font-family: var(--wg-font-ui);
 	font-size: 0.82rem;
@@ -635,13 +635,13 @@
 }
 
 .westgate-wiki .wiki-article-toc__ol.wiki-article-toc__ol--nest {
-	border-inline-start-color: rgba(var(--wg-gold-rgb), 0.18);
+	border-inline-start-color: rgba(194, 163, 90, 0.18);
 }
 
 .westgate-wiki .wiki-article-toc__link,
 .westgate-wiki .wiki-sidebar-nav-ns,
 .westgate-wiki .wiki-sidebar-root {
-	color: var(--wg-ledger-ink) !important;
+	color: #d8c28a !important;
 	font-family: var(--wg-font-ui);
 }
 
@@ -683,20 +683,20 @@
 	color: var(--wg-gold);
 	font-family: var(--wg-font-ui);
 	font-weight: 700;
-	text-shadow: 0 0 8px rgba(var(--wg-gold-rgb), 0.22);
+	text-shadow: 0 0 8px rgba(194, 163, 90, 0.22);
 }
 
 .westgate-wiki .wiki-namespace-directory {
 	--wiki-tree-indent: 1.28rem;
-	--wiki-tree-line-color: rgba(var(--wg-gold-rgb), 0.34);
+	--wiki-tree-line-color: rgba(194, 163, 90, 0.34);
 	margin-block-start: 0.78rem;
 }
 
 .westgate-wiki .wiki-directory-filter {
 	background:
 		linear-gradient(180deg, rgba(255, 244, 221, 0.028), rgba(0, 0, 0, 0.1)),
-		rgba(var(--wg-bg-deepest-rgb), 0.4) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
+		rgba(8, 7, 10, 0.4) !important;
+	border-color: rgba(194, 163, 90, 0.18) !important;
 	border-radius: 7px !important;
 	box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
 	color: var(--wg-text-soft) !important;
@@ -712,16 +712,16 @@
 	background:
 		linear-gradient(180deg, rgba(255, 244, 221, 0.04), rgba(0, 0, 0, 0.08)),
 		rgba(14, 11, 17, 0.76) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.38) !important;
+	border-color: rgba(194, 163, 90, 0.38) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.04),
-		0 0 0 0.18rem rgba(var(--wg-gold-rgb), 0.09) !important;
+		0 0 0 0.18rem rgba(194, 163, 90, 0.09) !important;
 	color: var(--wg-text) !important;
 }
 
 .westgate-wiki .wiki-index-jump--dynamic {
-	background: rgba(var(--wg-bg-deepest-rgb), 0.18);
-	border-block: 1px solid rgba(var(--wg-gold-rgb), 0.1);
+	background: rgba(8, 7, 10, 0.18);
+	border-block: 1px solid rgba(194, 163, 90, 0.1);
 	gap: 0.36rem;
 	margin-block: 0.72rem 0.9rem !important;
 	padding-block: 0.46rem;
@@ -730,8 +730,8 @@
 .westgate-wiki .wiki-index-jump-link {
 	background:
 		linear-gradient(180deg, rgba(255, 244, 221, 0.035), rgba(0, 0, 0, 0.1)),
-		rgba(var(--wg-gold-rgb), 0.045) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
+		rgba(194, 163, 90, 0.045) !important;
+	border-color: rgba(194, 163, 90, 0.16) !important;
 	box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.03);
 	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
 }
@@ -742,8 +742,8 @@
 	background:
 		linear-gradient(180deg, var(--wg-border), rgba(81, 25, 61, 0.12)),
 		var(--wg-border-soft) !important;
-	border-color: rgba(var(--wg-ledger-ink-rgb), 0.36) !important;
-	color: var(--wg-gold-hi) !important;
+	border-color: rgba(216, 194, 138, 0.36) !important;
+	color: #fff4dd !important;
 	transform: translateY(-1px);
 }
 
@@ -772,7 +772,7 @@
 }
 
 .westgate-wiki .wiki-namespace-directory .wiki-index-entry:not(.wiki-index-entry--subpage) .wiki-index-entry-main::before {
-	background: radial-gradient(circle, var(--wg-gold-lit) 0 30%, var(--wg-focus) 31% 58%, transparent 59%);
+	background: radial-gradient(circle, #e0c878 0 30%, var(--wg-focus) 31% 58%, transparent 59%);
 	block-size: 0.42rem;
 	content: "";
 	inline-size: 0.42rem;
@@ -793,7 +793,7 @@
 }
 
 .westgate-wiki .wiki-index-entry--subpage::before {
-	background: linear-gradient(90deg, var(--wiki-tree-line-color, rgba(var(--wg-gold-rgb), 0.34)), rgba(var(--wg-gold-rgb), 0.12));
+	background: linear-gradient(90deg, var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)), rgba(194, 163, 90, 0.12));
 	position: absolute;
 	block-size: 1px;
 	content: "";
@@ -803,7 +803,7 @@
 }
 
 .westgate-wiki .wiki-index-entry--subpage::after {
-	background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color, rgba(var(--wg-gold-rgb), 0.34)));
+	background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color, rgba(194, 163, 90, 0.34)));
 	block-size: 1.18rem;
 	content: "";
 	inline-size: 1px;
@@ -834,8 +834,8 @@
 
 .westgate-wiki .wiki-namespace-directory .wiki-index-entry-main:hover .wiki-index-entry-title,
 .westgate-wiki .wiki-namespace-directory .wiki-index-entry-main:focus-within .wiki-index-entry-title {
-	color: var(--wg-gold-hi) !important;
-	text-shadow: 0 0 10px rgba(var(--wg-gold-rgb), 0.16);
+	color: #fff4dd !important;
+	text-shadow: 0 0 10px rgba(194, 163, 90, 0.16);
 }
 
 .westgate-wiki .wiki-index-entry--subpage[style*="--wiki-title-depth: 2"] .wiki-index-entry-title,
@@ -852,7 +852,7 @@
 
 .westgate-wiki .wiki-topic-list__item--subpage {
 	--wiki-tree-indent: 1rem;
-	--wiki-tree-line-color: rgba(var(--wg-gold-rgb), 0.36);
+	--wiki-tree-line-color: rgba(194, 163, 90, 0.36);
 	list-style: none;
 	margin-block-start: -0.15rem;
 	margin-inline-start: calc(var(--wiki-title-depth, 1) * var(--wiki-tree-indent));
@@ -861,7 +861,7 @@
 }
 
 .westgate-wiki .wiki-topic-list__item--subpage::before {
-	background: linear-gradient(90deg, var(--wiki-tree-line-color), rgba(var(--wg-gold-rgb), 0.12));
+	background: linear-gradient(90deg, var(--wiki-tree-line-color), rgba(194, 163, 90, 0.12));
 	position: absolute;
 	block-size: 1px;
 	content: "";
@@ -917,11 +917,11 @@
 
 .westgate-wiki .wiki-sidebar-directory {
 	--wiki-sidebar-tree-indent: 1.1rem;
-	--wiki-sidebar-tree-line-color: rgba(var(--wg-gold-rgb), 0.26);
+	--wiki-sidebar-tree-line-color: rgba(194, 163, 90, 0.26);
 }
 
 .westgate-wiki .wiki-sidebar-directory .wiki-sidebar-nav-rows--child-pages {
-	border-inline-start-color: rgba(var(--wg-gold-rgb), 0.16) !important;
+	border-inline-start-color: rgba(194, 163, 90, 0.16) !important;
 	margin-inline-start: 0.42rem;
 	padding-inline-start: 0.66rem;
 }
@@ -959,7 +959,7 @@
 }
 
 .westgate-wiki .wiki-sidebar-directory .wiki-sidebar-nav-row--page:has(.wiki-sidebar-parent-path)::after {
-	background: linear-gradient(180deg, rgba(var(--wg-gold-rgb), 0.06), var(--wiki-sidebar-tree-line-color));
+	background: linear-gradient(180deg, rgba(194, 163, 90, 0.06), var(--wiki-sidebar-tree-line-color));
 	block-size: 0.58em;
 	content: "";
 	inline-size: 1px;
@@ -998,7 +998,7 @@
 .westgate-wiki .wiki-sidebar-list a:hover,
 .westgate-wiki .wiki-sidebar-list a:focus {
 	text-decoration: underline !important;
-	text-decoration-color: rgba(var(--wg-gold-rgb), 0.55);
+	text-decoration-color: rgba(194, 163, 90, 0.55);
 	text-underline-offset: 0.12em;
 }
 
@@ -1015,11 +1015,11 @@
 .westgate-wiki .wiki-sidebar-divider,
 .westgate-wiki .wiki-index-section-rule,
 .westgate-wiki .wiki-index-letter {
-	border-color: rgba(var(--wg-gold-rgb), 0.13) !important;
+	border-color: rgba(194, 163, 90, 0.13) !important;
 }
 
 .westgate-wiki .wiki-index-entry-badge {
-	background: rgba(var(--wg-gold-rgb), 0.055) !important;
+	background: rgba(194, 163, 90, 0.055) !important;
 	border-color: var(--wg-border) !important;
 }
 
@@ -1029,14 +1029,14 @@
 
 .westgate-wiki .wiki-fab-dock-inner {
 	background: rgba(18, 15, 22, 0.9) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
+	border-color: rgba(194, 163, 90, 0.18) !important;
 	border-radius: 8px !important;
 	box-shadow: var(--wg-velvet-shadow) !important;
 }
 
 .westgate-wiki .wiki-fab-btn {
-	background: rgba(var(--wg-gold-rgb), 0.075) !important;
-	border-color: rgba(var(--wg-ledger-ink-rgb), 0.24) !important;
+	background: rgba(194, 163, 90, 0.075) !important;
+	border-color: rgba(216, 194, 138, 0.24) !important;
 	border-radius: 6px !important;
 	color: var(--wg-gold) !important;
 	text-decoration: none !important;
@@ -1046,15 +1046,15 @@
 .westgate-wiki .wiki-fab-btn:hover,
 .westgate-wiki .wiki-fab-btn:focus,
 .westgate-wiki .wiki-fab-btn:active {
-	background: rgba(var(--wg-gold-rgb), 0.13) !important;
-	border-color: rgba(var(--wg-ledger-ink-rgb), 0.44) !important;
-	color: var(--wg-gold-hi) !important;
+	background: rgba(194, 163, 90, 0.13) !important;
+	border-color: rgba(216, 194, 138, 0.44) !important;
+	color: #fff4dd !important;
 	text-decoration: none !important;
 }
 
 .westgate-wiki .wiki-fab-btn--danger,
 .westgate-wiki .wiki-fab-btn.wiki-delete-page {
-	background: rgba(var(--wg-red-rgb), 0.16) !important;
+	background: rgba(142, 52, 56, 0.16) !important;
 	border-color: rgba(197, 90, 95, 0.36) !important;
 	color: #d98286 !important;
 }
@@ -1063,7 +1063,7 @@
 .westgate-wiki .wiki-fab-btn--danger:focus,
 .westgate-wiki .wiki-fab-btn.wiki-delete-page:hover,
 .westgate-wiki .wiki-fab-btn.wiki-delete-page:focus {
-	background: rgba(var(--wg-red-rgb), 0.24) !important;
+	background: rgba(142, 52, 56, 0.24) !important;
 	border-color: rgba(197, 90, 95, 0.54) !important;
 	color: #f0a2a5 !important;
 	text-decoration: none !important;
@@ -1144,15 +1144,15 @@
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-button.ck-on,
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on {
 	background: var(--wiki-ck-button-hover-bg) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
-	color: var(--wg-gold-hi) !important;
+	border-color: rgba(194, 163, 90, 0.2) !important;
+	color: #fff4dd !important;
 	box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035);
 }
 
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-button.ck-on,
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on {
 	background: var(--wiki-ck-button-on-bg) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.3) !important;
+	border-color: rgba(194, 163, 90, 0.3) !important;
 	color: var(--wiki-ck-button-on-color) !important;
 }
 
@@ -1161,7 +1161,7 @@
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on:hover,
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-dropdown__button.ck-on:focus {
 	background: var(--wiki-ck-button-on-hover-bg) !important;
-	color: var(--wg-gold-hi) !important;
+	color: #fff4dd !important;
 }
 
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-button:focus-visible,
@@ -1200,8 +1200,8 @@
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-splitbutton:hover > .ck.ck-button,
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-splitbutton:hover > .ck.ck-dropdown__button {
 	background: var(--wiki-ck-button-hover-bg) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
-	color: var(--wg-gold-hi) !important;
+	border-color: rgba(194, 163, 90, 0.2) !important;
+	color: #fff4dd !important;
 }
 
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-color-selector__remove-color,
@@ -1218,8 +1218,8 @@
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-button_with-text:hover,
 .westgate-wiki-compose .ck.ck-toolbar .ck.ck-button_with-text:focus {
 	background: var(--wiki-ck-button-hover-bg) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
-	color: var(--wg-gold-hi) !important;
+	border-color: rgba(194, 163, 90, 0.2) !important;
+	color: #fff4dd !important;
 }
 
 .westgate-wiki-compose .ck.ck-editor__main > .ck.ck-editor__editable,
@@ -1239,7 +1239,7 @@
 	border-radius: 7px !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.035),
-		inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.45),
+		inset 0 0 0 1px rgba(8, 7, 10, 0.45),
 		inset 0 -8px 24px rgba(0, 0, 0, 0.22),
 		0 8px 18px rgba(0, 0, 0, 0.18) !important;
 	color: var(--wiki-prose-pre-color) !important;
@@ -1281,7 +1281,7 @@
 		border: 1px solid var(--wg-border);
 		border-radius: 7px;
 		box-shadow:
-			inset -1.25rem 0 1rem -1rem rgba(var(--wg-gold-rgb), 0.16),
+			inset -1.25rem 0 1rem -1rem rgba(194, 163, 90, 0.16),
 			0 0.6rem 1.4rem rgba(0, 0, 0, 0.16);
 		display: block;
 		inline-size: 100%;
@@ -1289,7 +1289,7 @@
 		overflow-x: auto;
 		overflow-y: hidden;
 		-webkit-overflow-scrolling: touch;
-		scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
+		scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
 		scrollbar-width: thin;
 	}
 
@@ -1342,7 +1342,7 @@
 .westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-content pre[data-language]::after,
 .westgate-wiki-compose .ck-code-block-language-label {
 	background: var(--wg-border) !important;
-	border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
+	border: 1px solid rgba(194, 163, 90, 0.22) !important;
 	border-radius: 0 0 0 5px !important;
 	color: var(--wg-text-soft) !important;
 	font-family: var(--wg-font-ui) !important;
@@ -1354,30 +1354,30 @@
 .westgate-wiki-compose .ck-source-editing-area textarea,
 .westgate-wiki-compose .ck.ck-source-editing-area,
 .westgate-wiki-compose textarea.ck-source-editing-area {
-	background: rgba(var(--wg-bg-deep-rgb), 0.92) !important;
+	background: rgba(9, 8, 11, 0.92) !important;
 	color: var(--wg-text-soft) !important;
 }
 
 .westgate-wiki-compose .ck-source-editing-area textarea,
 .westgate-wiki-compose textarea.ck-source-editing-area {
-	border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
+	border-color: rgba(194, 163, 90, 0.24) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.025),
-		inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.45) !important;
+		inset 0 0 0 1px rgba(8, 7, 10, 0.45) !important;
 	caret-color: var(--wg-gold);
 	font-family: var(--wg-font-code) !important;
 }
 
 .westgate-wiki-compose .ck-source-editing-area textarea:focus,
 .westgate-wiki-compose textarea.ck-source-editing-area:focus {
-	border-color: rgba(var(--wg-gold-rgb), 0.45) !important;
+	border-color: rgba(194, 163, 90, 0.45) !important;
 	box-shadow: var(--wiki-compose-editable-focus-shadow) !important;
 	outline: none !important;
 }
 
 .westgate-wiki-compose .wiki-article-prose .ck.ck-editor__editable_inline.ck-focused,
 .westgate-wiki-compose .ck.ck-editor__editable_inline.wiki-article-prose.ck-focused {
-	border-color: rgba(var(--wg-gold-rgb), 0.45) !important;
+	border-color: rgba(194, 163, 90, 0.45) !important;
 	box-shadow: var(--wiki-compose-editable-focus-shadow) !important;
 }
 
@@ -1387,17 +1387,17 @@ body:has(#westgate-wiki-compose) .ck.ck-dialog {
 	--ck-color-button-default-background: var(--wiki-ck-button-bg);
 	--ck-color-button-default-hover-background: var(--wiki-ck-button-hover-bg);
 	--ck-color-button-default-active-background: var(--wiki-ck-button-active-bg);
-	--ck-color-button-action-background: rgba(var(--wg-gold-rgb), 0.18);
-	--ck-color-button-action-hover-background: rgba(var(--wg-gold-rgb), 0.26);
-	--ck-color-button-action-active-background: rgba(var(--wg-gold-rgb), 0.32);
+	--ck-color-button-action-background: rgba(194, 163, 90, 0.18);
+	--ck-color-button-action-hover-background: rgba(194, 163, 90, 0.26);
+	--ck-color-button-action-active-background: rgba(194, 163, 90, 0.32);
 	--ck-color-button-action-disabled-background: transparent;
-	--ck-color-button-action-text: var(--wg-gold-hi);
+	--ck-color-button-action-text: #fff4dd;
 	--ck-color-button-on-background: var(--wiki-ck-button-on-bg);
 	--ck-color-button-on-hover-background: var(--wiki-ck-button-on-hover-bg);
 	--ck-color-button-on-active-background: var(--wiki-ck-button-on-active-bg);
 	--ck-color-button-on-color: var(--wiki-ck-button-on-color);
-	--ck-color-input-disabled-background: rgba(var(--wg-bg-deep-rgb), 0.34);
-	--ck-color-input-disabled-border: rgba(var(--wg-gold-rgb), 0.12);
+	--ck-color-input-disabled-background: rgba(9, 8, 11, 0.34);
+	--ck-color-input-disabled-border: rgba(194, 163, 90, 0.12);
 	--ck-color-input-disabled-text: rgba(185, 178, 166, 0.42);
 	--ck-color-labeled-field-label-background: var(--wiki-ck-panel-background);
 	background: var(--wiki-ck-panel-background) !important;
@@ -1416,7 +1416,7 @@ body:has(#westgate-wiki-compose) .ck.ck-dialog :where(.ck, .ck-label, .ck-button
 
 body:has(#westgate-wiki-compose) .ck.ck-form__header {
 	background: linear-gradient(180deg, rgba(255, 244, 221, 0.025), rgba(0, 0, 0, 0.075)) !important;
-	border-bottom-color: rgba(var(--wg-gold-rgb), 0.16) !important;
+	border-bottom-color: rgba(194, 163, 90, 0.16) !important;
 	color: var(--wg-text) !important;
 }
 
@@ -1442,8 +1442,8 @@ body:has(#westgate-wiki-compose) .ck.ck-balloon-panel:not(.ck-powered-by-balloon
 body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid__tile):hover,
 body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid__tile):focus {
 	background: var(--wiki-ck-button-hover-bg) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
-	color: var(--wg-gold-hi) !important;
+	border-color: rgba(194, 163, 90, 0.2) !important;
+	color: #fff4dd !important;
 }
 
 body:has(#westgate-wiki-compose) .ck.ck-dropdown__panel .ck.ck-button:not(.ck-color-grid__tile).ck-on,
@@ -1456,9 +1456,9 @@ body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button:not(.ck-color-grid_
 
 body:has(#westgate-wiki-compose) .ck.ck-balloon-panel:not(.ck-powered-by-balloon) .ck.ck-button-action,
 body:has(#westgate-wiki-compose) .ck.ck-dialog .ck.ck-button-action {
-	background: rgba(var(--wg-gold-rgb), 0.18) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.3) !important;
-	color: var(--wg-gold-hi) !important;
+	background: rgba(194, 163, 90, 0.18) !important;
+	border-color: rgba(194, 163, 90, 0.3) !important;
+	color: #fff4dd !important;
 	font-weight: 700 !important;
 }
 
@@ -1518,8 +1518,8 @@ body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form .ck-label {
 
 body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form .ck.ck-input,
 body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form input.ck-input-text {
-	background: rgba(var(--wg-bg-deep-rgb), 0.68) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
+	background: rgba(9, 8, 11, 0.68) !important;
+	border-color: rgba(194, 163, 90, 0.24) !important;
 	color: var(--wg-text) !important;
 	font-family: var(--wg-font-ui) !important;
 }
@@ -1531,7 +1531,7 @@ body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form input.ck-input-tex
 }
 
 body:has(#westgate-wiki-compose) .ck.ck-find-and-replace-form .ck.ck-button-find {
-	color: var(--wg-gold-hi) !important;
+	color: #fff4dd !important;
 	font-family: var(--wg-font-ui) !important;
 	font-weight: 700 !important;
 }
@@ -1585,13 +1585,13 @@ body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile.ck-color-selector__colo
 body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile:hover:not(.ck-disabled),
 body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile:focus:not(.ck-disabled) {
 	box-shadow:
-		inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.76),
-		0 0 0 2px rgba(var(--wg-ledger-ink-rgb), 0.66) !important;
+		inset 0 0 0 1px rgba(8, 7, 10, 0.76),
+		0 0 0 2px rgba(216, 194, 138, 0.66) !important;
 }
 
 body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile.ck-on {
 	box-shadow:
-		inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.86),
+		inset 0 0 0 1px rgba(8, 7, 10, 0.86),
 		0 0 0 2px rgba(246, 223, 163, 0.82) !important;
 }
 
@@ -1601,21 +1601,21 @@ body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown__grid {
 }
 
 body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box {
-	background: rgba(var(--wg-gold-rgb), 0.075) !important;
-	border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.26) !important;
+	background: rgba(194, 163, 90, 0.075) !important;
+	border: 1px solid rgba(216, 194, 138, 0.26) !important;
 	border-radius: 4px !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.035),
-		0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.36) !important;
+		0 0 0 1px rgba(8, 7, 10, 0.36) !important;
 }
 
 body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box:hover,
 body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box:focus {
-	background: rgba(var(--wg-gold-rgb), 0.18) !important;
-	border-color: rgba(var(--wg-ledger-ink-rgb), 0.52) !important;
+	background: rgba(194, 163, 90, 0.18) !important;
+	border-color: rgba(216, 194, 138, 0.52) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.055),
-		0 0 0 1px rgba(var(--wg-gold-rgb), 0.24) !important;
+		0 0 0 1px rgba(194, 163, 90, 0.24) !important;
 	outline: none !important;
 }
 
@@ -1624,7 +1624,7 @@ body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown-grid-box.ck-on {
 	border-color: rgba(246, 223, 163, 0.64) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.08),
-		0 0 0 1px rgba(var(--wg-gold-rgb), 0.34) !important;
+		0 0 0 1px rgba(194, 163, 90, 0.34) !important;
 }
 
 body:has(#westgate-wiki-compose) .ck .ck-insert-table-dropdown__label {
@@ -1647,17 +1647,17 @@ body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-label, .ck-label
 }
 
 body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-input, .ck-input-text, input[type="text"], input[type="search"]) {
-	background: rgba(var(--wg-bg-deep-rgb), 0.74) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.26) !important;
+	background: rgba(9, 8, 11, 0.74) !important;
+	border-color: rgba(194, 163, 90, 0.26) !important;
 	color: var(--wg-text) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.025),
-		0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.42) !important;
+		0 0 0 1px rgba(8, 7, 10, 0.42) !important;
 	caret-color: var(--wg-gold);
 }
 
 body:has(#westgate-wiki-compose) .ck.ck-emoji-picker :where(.ck-input, .ck-input-text, input[type="text"], input[type="search"]):focus {
-	border-color: rgba(var(--wg-gold-rgb), 0.5) !important;
+	border-color: rgba(194, 163, 90, 0.5) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.026),
 		0 0 0 1px var(--wg-focus) !important;
@@ -1682,7 +1682,7 @@ body:has(#westgate-wiki-compose) .ck.ck-emoji-picker .ck-emoji-categories__item:
 body:has(#westgate-wiki-compose) .ck.ck-emoji-picker .ck-emoji-categories__item:focus,
 body:has(#westgate-wiki-compose) .ck.ck-emoji-picker .ck-emoji-categories__item.ck-on {
 	background: var(--wiki-ck-button-hover-bg) !important;
-	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
+	border-color: rgba(194, 163, 90, 0.2) !important;
 	box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035) !important;
 }