prototype(#53): palette candidates as runtime token swaps

Throwaway. Tokenises the theme's literal colours so candidate palettes can be
swapped in the browser, adds three candidates (Plum Noir one-metal, two-metal
pewter, two-metal plus a champagne inset), a WCAG checker, a seeder and the
screenshots they are judged on.

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

prototype/README.md

@@ -0,0 +1,21 @@
+# 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

@@ -0,0 +1,16 @@
+/* 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

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

prototype/candidate-b.css

@@ -0,0 +1,15 @@
+/* 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

@@ -0,0 +1,17 @@
+/* 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

@@ -0,0 +1,78 @@
+#!/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/probe.js

@@ -0,0 +1,48 @@
+// 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

@@ -0,0 +1,88 @@
+// 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

@@ -0,0 +1,52 @@
+// 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(194, 163, 90, 0.24) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(42, 18, 34, 0.42),
+    rgba(var(--wg-plum-rgb), 0.42),
-    rgba(9, 8, 11, 0.58)
+    rgba(var(--wg-bg-deep-rgb), 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(42, 18, 34, 0.42),
+    rgba(var(--wg-plum-rgb), 0.42),
-    rgba(9, 8, 11, 0.58)
+    rgba(var(--wg-bg-deep-rgb), 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(194, 163, 90, 0.13),
+    rgba(var(--wg-gold-rgb), 0.13),
-    rgba(194, 163, 90, 0.045) 58%,
+    rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.11);
+  border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.24);
+  border-color: rgba(var(--wg-gold-rgb), 0.24);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
 .category-children-item a {
-  color: #d8c28a !important;
+  color: var(--wg-ledger-ink) !important;
   display: block;
   min-width: 0;
   font-weight: 600;
@@ -318,14 +318,14 @@ ul.category-children {
 }
 
 .category-children-item a:hover {
-  color: #e0c878 !important;
+  color: var(--wg-gold-lit) !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(194, 163, 90, 0.09) !important;
+  border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.36) !important;
+  border-left-color: rgba(var(--wg-gold-rgb), 0.36) !important;
 }
 
 li[component="categories/category"] .teaser .avatar {

scss/westgate/_controls.scss

@@ -1,13 +1,13 @@
 .btn-primary {
-  --bs-btn-bg: #5a4a1a;
+  --bs-btn-bg: var(--wg-gold-plate);
-  --bs-btn-border-color: #a8893f;
+  --bs-btn-border-color: var(--wg-gold-soft);
   --bs-btn-color: #f0e6d8;
-  --bs-btn-hover-bg: #6a5720;
+  --bs-btn-hover-bg: var(--wg-gold-plate-hover);
-  --bs-btn-hover-border-color: #c2a35a;
+  --bs-btn-hover-border-color: var(--wg-gold);
-  --bs-btn-hover-color: #fff4dd;
+  --bs-btn-hover-color: var(--wg-gold-hi);
   --bs-btn-active-bg: #493914;
-  --bs-btn-active-border-color: #c2a35a;
+  --bs-btn-active-border-color: var(--wg-gold);
-  background-image: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
+  background-image: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 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, #6a5720 0%, #53431a 100%);
+  background-image: linear-gradient(to bottom, var(--wg-gold-plate-hover) 0%, var(--wg-gold-plate-mid) 100%);
 }
 
 .btn-secondary,
@@ -23,13 +23,13 @@
 .btn-ghost,
 .btn-outline-secondary {
   --bs-btn-color: #d8cec0;
-  --bs-btn-bg: rgba(8, 7, 10, 0.12);
+  --bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
-  --bs-btn-border-color: rgba(216, 194, 138, 0.28);
+  --bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
   --bs-btn-hover-color: var(--wg-text);
-  --bs-btn-hover-bg: rgba(194, 163, 90, 0.075);
+  --bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.075);
-  --bs-btn-hover-border-color: rgba(216, 194, 138, 0.44);
+  --bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
-  --bs-btn-active-bg: rgba(194, 163, 90, 0.12);
+  --bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
-  --bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
+  --bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 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(194, 163, 90, 0.09);
+  --bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
-  --bs-btn-hover-border-color: rgba(216, 194, 138, 0.5);
+  --bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.5);
-  --bs-btn-active-bg: rgba(194, 163, 90, 0.15);
+  --bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.15);
-  --bs-btn-active-border-color: rgba(216, 194, 138, 0.56);
+  --bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 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: #5a4a1a;
+  --bs-btn-bg: var(--wg-gold-plate);
-  --bs-btn-border-color: #a8893f;
+  --bs-btn-border-color: var(--wg-gold-soft);
   --bs-btn-color: #f0e6d8;
-  --bs-btn-hover-bg: #6a5720;
+  --bs-btn-hover-bg: var(--wg-gold-plate-hover);
-  --bs-btn-hover-border-color: #c2a35a;
+  --bs-btn-hover-border-color: var(--wg-gold);
-  --bs-btn-hover-color: #fff4dd;
+  --bs-btn-hover-color: var(--wg-gold-hi);
   --bs-btn-active-bg: #493914;
-  --bs-btn-active-border-color: #c2a35a;
+  --bs-btn-active-border-color: var(--wg-gold);
-  --bs-btn-active-color: #fff4dd;
+  --bs-btn-active-color: var(--wg-gold-hi);
-  background-image: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
+  background-image: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
 }
 
 .guest-cta-alert .btn-info {
   --bs-btn-color: #d8cec0;
-  --bs-btn-bg: rgba(8, 7, 10, 0.12);
+  --bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
-  --bs-btn-border-color: rgba(216, 194, 138, 0.28);
+  --bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
   --bs-btn-hover-color: var(--wg-text);
-  --bs-btn-hover-bg: rgba(194, 163, 90, 0.075);
+  --bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.075);
-  --bs-btn-hover-border-color: rgba(216, 194, 138, 0.44);
+  --bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
-  --bs-btn-active-bg: rgba(194, 163, 90, 0.12);
+  --bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
-  --bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
+  --bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 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(8, 7, 10, 0.16);
+  --bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.16);
-  --bs-btn-border-color: rgba(216, 194, 138, 0.34);
+  --bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.34);
-  --bs-btn-hover-color: #fff4dd;
+  --bs-btn-hover-color: var(--wg-gold-hi);
-  --bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
+  --bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
-  --bs-btn-hover-border-color: rgba(216, 194, 138, 0.52);
+  --bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.52);
-  --bs-btn-active-bg: rgba(194, 163, 90, 0.13);
+  --bs-btn-active-bg: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.18) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(216, 194, 138, 0.26) !important;
+  border-color: rgba(var(--wg-ledger-ink-rgb), 0.26) !important;
   box-shadow:
     inset 0 1px 2px rgba(0, 0, 0, 0.48),
-    0 0 0 1px rgba(8, 7, 10, 0.46) !important;
+    0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 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(216, 194, 138, 0.38) !important;
+  border-color: rgba(var(--wg-ledger-ink-rgb), 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(216, 194, 138, 0.5) !important;
+  border-color: rgba(var(--wg-ledger-ink-rgb), 0.5) !important;
   box-shadow:
     inset 0 1px 2px rgba(0, 0, 0, 0.42),
-    0 0 0 1px rgba(194, 163, 90, 0.3) !important;
+    0 0 0 1px rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.5) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.16);
+  --bs-table-border-color: rgba(var(--wg-gold-rgb), 0.16);
-  --bs-table-striped-bg: rgba(194, 163, 90, 0.035);
+  --bs-table-striped-bg: rgba(var(--wg-gold-rgb), 0.035);
   --bs-table-striped-color: var(--wg-text-soft);
-  --bs-table-hover-bg: rgba(194, 163, 90, 0.04);
+  --bs-table-hover-bg: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.16);
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.1) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.075);
+  background-color: rgba(var(--wg-gold-rgb), 0.075);
   color: var(--wg-text);
 }
 
 .tool-modal {
   background: transparent !important;
-  border-color: rgba(194, 163, 90, 0.16) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.055) calc(100% - 1px)
+      rgba(var(--wg-gold-rgb), 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(216, 194, 138, 0.13),
+    rgba(var(--wg-ledger-ink-rgb), 0.13),
     rgba(70, 45, 52, 0.28)
   ) !important;
-  border: 1px solid rgba(194, 163, 90, 0.3) !important;
+  border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.22) !important;
+  border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.055) calc(100% - 1px)
+      rgba(var(--wg-gold-rgb), 0.055) calc(100% - 1px)
     ),
     var(--wg-velvet-panel) !important;
   background-size:
     100% var(--wg-ledger-line),
     auto;
-  border-color: rgba(194, 163, 90, 0.18) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.5) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.12) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.16) !important;
+  border-color: rgba(var(--wg-gold-rgb), 0.16) !important;
   color: var(--wg-text-soft) !important;
 }
 
 .nav-tabs,
 .nav-pills,
 .list-group {
-  border-color: rgba(194, 163, 90, 0.12) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.12) !important;
+  background: rgba(var(--wg-gold-rgb), 0.12) !important;
-  border-color: rgba(194, 163, 90, 0.26) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.16) !important;
+  border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.1);
+  border-color: rgba(var(--wg-gold-rgb), 0.1);
   color: var(--wg-text-soft);
 }
 
 .page-link:hover,
 .page-link:focus,
 .active > .page-link {
-  background: rgba(194, 163, 90, 0.12);
+  background: rgba(var(--wg-gold-rgb), 0.12);
-  border-color: rgba(194, 163, 90, 0.25);
+  border-color: rgba(var(--wg-gold-rgb), 0.25);
   color: var(--wg-text);
 }
 
 .tooltip-inner {
   background: #221c24 !important;
-  border: 1px solid rgba(194, 163, 90, 0.65) !important;
+  border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.12) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.1) !important;
+  background: rgba(var(--wg-gold-rgb), 0.1) !important;
   color: var(--wg-text) !important;
   box-shadow:
-    inset 0 0 0 1px rgba(194, 163, 90, 0.12),
+    inset 0 0 0 1px rgba(var(--wg-gold-rgb), 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(8, 7, 10, 0.12);
+  --bs-btn-bg: rgba(var(--wg-bg-deepest-rgb), 0.12);
-  --bs-btn-border-color: rgba(216, 194, 138, 0.28);
+  --bs-btn-border-color: rgba(var(--wg-ledger-ink-rgb), 0.28);
   --bs-btn-hover-color: var(--wg-text);
-  --bs-btn-hover-bg: rgba(194, 163, 90, 0.09);
+  --bs-btn-hover-bg: rgba(var(--wg-gold-rgb), 0.09);
-  --bs-btn-hover-border-color: rgba(216, 194, 138, 0.46);
+  --bs-btn-hover-border-color: rgba(var(--wg-ledger-ink-rgb), 0.46);
   --bs-btn-active-color: var(--wg-text);
-  --bs-btn-active-bg: rgba(194, 163, 90, 0.12);
+  --bs-btn-active-bg: rgba(var(--wg-gold-rgb), 0.12);
-  --bs-btn-active-border-color: rgba(216, 194, 138, 0.5);
+  --bs-btn-active-border-color: rgba(var(--wg-ledger-ink-rgb), 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(194, 163, 90, 0.16);
+	border-top: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.1);
+	border-top: 1px solid rgba(var(--wg-gold-rgb), 0.1);
 
 	p {
 		margin: 0;
@@ -164,9 +164,9 @@
 
 	&:hover,
 	&:focus {
-		border-color: rgba(194, 163, 90, 0.22);
+		border-color: rgba(var(--wg-gold-rgb), 0.22);
 		color: var(--wg-text-soft);
-		background: rgba(194, 163, 90, 0.06);
+		background: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.06);
+	background: rgba(var(--wg-gold-rgb), 0.06);
 	padding: 12px 24px;
 	border-radius: 6px;
-	border: 1px solid rgba(216, 194, 138, 0.28);
+	border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.28);
 	transition: background 0.2s, border-color 0.2s;
 
 	&:hover,
 	&:focus {
 		color: var(--wg-text);
-		background: rgba(194, 163, 90, 0.075);
+		background: rgba(var(--wg-gold-rgb), 0.075);
-		border-color: rgba(216, 194, 138, 0.44);
+		border-color: rgba(var(--wg-ledger-ink-rgb), 0.44);
 	}
 
 	// Matches the theme's .btn-primary dark gold plate (see _controls.scss).
 	&.primary {
 		color: #f0e6d8;
-		background: linear-gradient(to bottom, #5a4a1a 0%, #473914 100%);
+		background: linear-gradient(to bottom, var(--wg-gold-plate) 0%, var(--wg-gold-plate-deep) 100%);
-		border-color: #a8893f;
+		border-color: var(--wg-gold-soft);
 		box-shadow:
 			inset 0 1px 0 rgba(255, 255, 255, 0.06),
 			0 2px 8px rgba(0, 0, 0, 0.24);
 
 		&:hover,
 		&:focus {
-			color: #fff4dd;
+			color: var(--wg-gold-hi);
-			background: linear-gradient(to bottom, #6a5720 0%, #53431a 100%);
+			background: linear-gradient(to bottom, var(--wg-gold-plate-hover) 0%, var(--wg-gold-plate-mid) 100%);
-			border-color: #c2a35a;
+			border-color: var(--wg-gold);
 		}
 	}
 }
@@ -434,7 +434,7 @@ a.sow-card:hover {
 	position: absolute;
 	inset: 0;
 	pointer-events: none;
-	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%);
+	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%);
 }
 
 .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(194, 163, 90, 0.32);
+	border-left-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.06);
+	background: rgba(var(--wg-gold-rgb), 0.06);
 	padding: 12px 24px;
-	border: 1px solid rgba(216, 194, 138, 0.28);
+	border: 1px solid rgba(var(--wg-ledger-ink-rgb), 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(8, 7, 10, 0.22) !important;
+	background: rgba(var(--wg-bg-deepest-rgb), 0.22) !important;
-	border-color: rgba(194, 163, 90, 0.16) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.18), rgba(194, 163, 90, 0.07));
+	background: linear-gradient(to bottom, rgba(var(--wg-gold-rgb), 0.18), rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.18) !important;
+	box-shadow: 0 0 0 5px var(--wg-bg), 0 0 0 6px rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.32) !important;
+	border-left: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.16), rgba(194, 163, 90, 0.05), transparent);
+	background: linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.16), rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.46) !important;
+	border-left-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
+	scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 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(8, 7, 10, 0.45);
+	background: rgba(var(--wg-bg-deepest-rgb), 0.45);
-	border: 1px solid rgba(194, 163, 90, 0.12);
+	border: 1px solid rgba(var(--wg-gold-rgb), 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(8, 7, 10, 0.82)) !important;
+	background: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(var(--wg-bg-deepest-rgb), 0.82)) !important;
-	border: 1px solid rgba(194, 163, 90, 0.22) !important;
+	border: 1px solid rgba(var(--wg-gold-rgb), 0.22) !important;
 	border-radius: 6px;
 	padding: 0.85rem 1rem;
 	color: var(--wg-text-soft) !important;
-	scrollbar-color: rgba(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
+	scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 0.48);
 	scrollbar-width: thin;
 }
 
@@ -178,7 +178,7 @@ li[component="post"] .content pre code.hljs,
 	.hljs-selector-tag,
 	.hljs-literal,
 	.hljs-tag {
-		color: #e0c878;
+		color: var(--wg-gold-lit);
 	}
 
 	.hljs-string,
@@ -225,29 +225,29 @@ li[component="post"] .content pre code.hljs,
 }
 
 li[component="post"] .content blockquote {
-	background: rgba(42, 18, 34, 0.4);
+	background: rgba(var(--wg-plum-rgb), 0.4);
-	border: 1px solid rgba(194, 163, 90, 0.14);
+	border: 1px solid rgba(var(--wg-gold-rgb), 0.14);
 	border-radius: 6px;
 	padding: 0.75rem 1rem;
 }
 
 li[component="post"] .post-footer {
 	border-bottom: 0 !important;
-	border-top: 1px solid rgba(194, 163, 90, 0.095);
+	border-top: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.1) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.2) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.82);
+		color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.1) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.12);
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.5) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.05) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 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(8, 7, 10, 0.22) !important;
+	background: rgba(var(--wg-bg-deepest-rgb), 0.22) !important;
-	border-color: rgba(194, 163, 90, 0.12) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.1);
+	background: rgba(var(--wg-gold-rgb), 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: #e0c878;
+  --bs-link-hover-color: var(--wg-gold-lit);
   --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: #e0c878;
+    color: var(--wg-gold-lit);
   }
 }
 
@@ -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(194, 163, 90, 0.22) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.18);
+  border-color: rgba(var(--wg-gold-rgb), 0.18);
   color: var(--wg-text-soft);
 }
 
 .alert-danger {
-  background: rgba(142, 52, 56, 0.16);
+  background: rgba(var(--wg-red-rgb), 0.16);
-  border-color: rgba(142, 52, 56, 0.32);
+  border-color: rgba(var(--wg-red-rgb), 0.32);
   color: #d8b1b1;
 }
 
@@ -157,7 +157,7 @@ samp,
 .user-icon,
 .avatar-tooltip .avatar,
 .avatar-tooltip img {
-  border: 1px solid rgba(216, 194, 138, 0.32);
+  border: 1px solid rgba(var(--wg-ledger-ink-rgb), 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(216, 194, 138, 0.14),
+    0 0 0 3px rgba(var(--wg-ledger-ink-rgb), 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, #2a1222, #110f15 55%, #09080b) !important;
+    linear-gradient(100deg, var(--wg-plum), var(--wg-panel-2) 55%, var(--wg-bg-deep)) !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(8, 7, 10, 0.08)
+      rgba(var(--wg-bg-deepest-rgb), 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(194, 163, 90, 0.18) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.12) !important;
+  border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.24) !important;
+  border-color: rgba(var(--wg-gold-rgb), 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(216, 194, 138, 0.13),
+    rgba(var(--wg-ledger-ink-rgb), 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(194, 163, 90, 0.12) !important;
+  border-bottom-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.1) !important;
+  border-color: rgba(var(--wg-gold-rgb), 0.1) !important;
 }
 
 .page-flags [component="flags/list"] thead :where(th, td) {

scss/westgate/_tokens.scss

@@ -92,23 +92,37 @@
 	--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(9, 8, 11, 0.9);
+	--wg-status-ring: rgba(var(--wg-bg-deep-rgb), 0.9);
 	--wg-text: #e6e0d6;
 	--wg-text-soft: #b9b2a6;
 	--wg-text-muted: #9a9086;
-	--wg-border: rgba(194, 163, 90, 0.14);
+	--wg-border: rgba(var(--wg-gold-rgb), 0.14);
-	--wg-border-soft: rgba(194, 163, 90, 0.08);
+	--wg-border-soft: rgba(var(--wg-gold-rgb), 0.08);
-	--wg-focus: rgba(194, 163, 90, 0.28);
+	--wg-focus: rgba(var(--wg-gold-rgb), 0.28);
 	--wg-focus-ring: #c2a35a;
 	--wg-ledger-panel: rgba(21, 17, 26, 0.97);
-	--wg-ledger-ruling: rgba(194, 163, 90, 0.055);
+	--wg-ledger-ruling: rgba(var(--wg-gold-rgb), 0.055);
-	--wg-ledger-rule-strong: rgba(194, 163, 90, 0.16);
+	--wg-ledger-rule-strong: rgba(var(--wg-gold-rgb), 0.16);
-	--wg-ledger-border: rgba(194, 163, 90, 0.18);
+	--wg-ledger-border: rgba(var(--wg-gold-rgb), 0.18);
 		--wg-ledger-ink: #d8c28a;
 		--wg-ledger-ink-muted: #a99d8f;
 		--wg-ledger-stamp: #a84a4e;
@@ -118,11 +132,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(194, 163, 90, 0.15), rgba(194, 163, 90, 0.05));
+	--wg-control-bg: linear-gradient(to bottom, rgba(var(--wg-gold-rgb), 0.15), rgba(var(--wg-gold-rgb), 0.05));
 }
 
 ::selection {
-	background: rgba(194, 163, 90, 0.32);
+	background: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.2);
+  border-bottom: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.36);
+  border: 1px solid rgba(var(--wg-gold-rgb), 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(9, 8, 11, 0.66),
+    inset 0 0 0 1px rgba(var(--wg-bg-deep-rgb), 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(194, 163, 90, 0.2);
+  border-color: rgba(var(--wg-gold-rgb), 0.2);
-  background: rgba(194, 163, 90, 0.075);
+  background: rgba(var(--wg-gold-rgb), 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(142, 52, 56, 0.92), rgba(84, 28, 39, 0.96)) !important;
+  background: linear-gradient(to bottom, rgba(var(--wg-red-rgb), 0.92), rgba(84, 28, 39, 0.96)) !important;
-  border: 1px solid rgba(216, 194, 138, 0.26);
+  border: 1px solid rgba(var(--wg-ledger-ink-rgb), 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(194, 163, 90, 0.22) !important;
+  border: 1px solid rgba(var(--wg-gold-rgb), 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, #5a4a1a, #473914) !important;
+  background: linear-gradient(to bottom, var(--wg-gold-plate), var(--wg-gold-plate-deep)) !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: #fff4dd !important;
+  color: var(--wg-gold-hi) !important;
-  background: linear-gradient(to bottom, #6a5720, #53431a) !important;
+  background: linear-gradient(to bottom, var(--wg-gold-plate-hover), var(--wg-gold-plate-mid)) !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(194, 163, 90, 0.2);
+  border: 1px solid rgba(var(--wg-gold-rgb), 0.2);
-  background: rgba(194, 163, 90, 0.055);
+  background: rgba(var(--wg-gold-rgb), 0.055);
 }
 
 .wg-topbar__login:hover,
 .wg-topbar__login:focus {
   color: var(--wg-text);
-  border-color: rgba(194, 163, 90, 0.3);
+  border-color: rgba(var(--wg-gold-rgb), 0.3);
-  background: rgba(194, 163, 90, 0.1);
+  background: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.22);
+  border: 1px solid rgba(var(--wg-gold-rgb), 0.22);
   border-radius: 6px;
   color: var(--wg-text-soft);
-  background: rgba(194, 163, 90, 0.055);
+  background: rgba(var(--wg-gold-rgb), 0.055);
 }
 
 .wg-topbar__burger:hover,
 .wg-topbar__burger:focus {
   color: var(--wg-text);
-  background: rgba(194, 163, 90, 0.1);
+  background: rgba(var(--wg-gold-rgb), 0.1);
 }
 
 .wg-topbar__drawer {
   display: none;
-  border-top: 1px solid rgba(194, 163, 90, 0.12);
+  border-top: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.18);
+  border: 1px solid rgba(var(--wg-gold-rgb), 0.18);
   border-radius: 8px;
   padding: 0.5rem 0.65rem;
-  background: rgba(9, 8, 11, 0.45);
+  background: rgba(var(--wg-bg-deep-rgb), 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(194, 163, 90, 0.5);
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.12);
+  border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.22);
+  border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.075) !important;
+	background: rgba(var(--wg-gold-rgb), 0.075) !important;
-	border-color: rgba(194, 163, 90, 0.26) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.34) !important;
+	border-left: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.026) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.026) calc(100% - 1px)),
-		linear-gradient(to right, rgba(194, 163, 90, 0.024), transparent 5.25rem),
+		linear-gradient(to right, rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.085) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.085) !important;
-	border-left-color: rgba(194, 163, 90, 0.12) !important;
+	border-left-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.05), transparent);
+	background: linear-gradient(to right, var(--wg-focus), rgba(var(--wg-gold-rgb), 0.05), transparent);
 	pointer-events: none;
 }
 
 li[component="category/topic"].unread:nth-child(even) {
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(216, 194, 138, 0.055) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.055) calc(100% - 1px)),
-		linear-gradient(to right, rgba(216, 194, 138, 0.09), transparent 5.25rem),
+		linear-gradient(to right, rgba(var(--wg-ledger-ink-rgb), 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(194, 163, 90, 0.18) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(216, 194, 138, 0.052) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.052) calc(100% - 1px)),
-		linear-gradient(to right, rgba(216, 194, 138, 0.085), transparent 5.65rem),
+		linear-gradient(to right, rgba(var(--wg-ledger-ink-rgb), 0.085), transparent 5.65rem),
 		var(--wg-ledger-panel) !important;
-	border-color: rgba(216, 194, 138, 0.17) !important;
+	border-color: rgba(var(--wg-ledger-ink-rgb), 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(216, 194, 138, 0.045) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-ledger-ink-rgb), 0.045) calc(100% - 1px)),
-		linear-gradient(90deg, rgba(194, 163, 90, 0.075), transparent 5.75rem),
+		linear-gradient(90deg, rgba(var(--wg-gold-rgb), 0.075), transparent 5.75rem),
 		var(--wg-ledger-panel) !important;
-	border-left-color: rgba(216, 194, 138, 0.44) !important;
+	border-left-color: rgba(var(--wg-ledger-ink-rgb), 0.44) !important;
 	box-shadow:
 		var(--wg-ledger-shadow),
-		inset 0 -1px 0 rgba(216, 194, 138, 0.055) !important;
+		inset 0 -1px 0 rgba(var(--wg-ledger-ink-rgb), 0.055) !important;
 }
 
 li[component="category/topic"].pinned:not(.unread) {
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.036) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.12) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(216, 194, 138, 0.22), rgba(142, 52, 56, 0.1), transparent);
+		linear-gradient(to right, transparent, rgba(var(--wg-ledger-ink-rgb), 0.22), rgba(var(--wg-red-rgb), 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(168, 74, 78, 0.18) !important;
+	border-color: rgba(var(--wg-stamp-rgb), 0.18) !important;
-	border-left-color: rgba(168, 74, 78, 0.42) !important;
+	border-left-color: rgba(var(--wg-stamp-rgb), 0.42) !important;
 	box-shadow:
 		var(--wg-ledger-shadow),
-		0 0 12px rgba(142, 52, 56, 0.09) !important;
+		0 0 12px rgba(var(--wg-red-rgb), 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(168, 74, 78, 0.14) !important;
+	border-color: rgba(var(--wg-stamp-rgb), 0.14) !important;
 }
 
 li[component="category/topic"].locked.pinned {
 	background:
-		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(194, 163, 90, 0.045) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 0.045) calc(100% - 1px)),
-		linear-gradient(90deg, rgba(168, 74, 78, 0.1), rgba(194, 163, 90, 0.065) 4.4rem, transparent 7rem),
+		linear-gradient(90deg, rgba(var(--wg-stamp-rgb), 0.1), rgba(var(--wg-gold-rgb), 0.065) 4.4rem, transparent 7rem),
 		var(--wg-ledger-panel) !important;
-	border-color: rgba(168, 74, 78, 0.2) !important;
+	border-color: rgba(var(--wg-stamp-rgb), 0.2) !important;
-	border-left-color: rgba(168, 74, 78, 0.58) !important;
+	border-left-color: rgba(var(--wg-stamp-rgb), 0.58) !important;
 	box-shadow:
 		var(--wg-ledger-shadow),
-		0 0 14px rgba(142, 52, 56, 0.085) !important;
+		0 0 14px rgba(var(--wg-red-rgb), 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(216, 194, 138, 0.28) !important;
+	border-color: rgba(var(--wg-ledger-ink-rgb), 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(168, 74, 78, 0.32) !important;
+	border-color: rgba(var(--wg-stamp-rgb), 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(216, 194, 138, 0.045);
+	text-shadow: 0 0 7px rgba(var(--wg-ledger-ink-rgb), 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(8, 7, 10, 0.2)) !important;
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
-	border-color: rgba(194, 163, 90, 0.18) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(8, 7, 10, 0.2)) !important;
+	background: linear-gradient(to bottom, rgba(59, 72, 50, 0.25), rgba(var(--wg-bg-deepest-rgb), 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(8, 7, 10, 0.18)) !important;
+	background: linear-gradient(to bottom, rgba(72, 67, 58, 0.22), rgba(var(--wg-bg-deepest-rgb), 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(8, 7, 10, 0.2)) !important;
+	background: linear-gradient(to bottom, rgba(70, 56, 90, 0.24), rgba(var(--wg-bg-deepest-rgb), 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(8, 7, 10, 0.2)) !important;
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.026), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
-	border-color: rgba(194, 163, 90, 0.22) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.22) !important;
-	border-left: 1px solid rgba(216, 194, 138, 0.32) !important;
+	border-left: 1px solid rgba(var(--wg-ledger-ink-rgb), 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: #d8c28a;
+	color: var(--wg-ledger-ink);
 	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(8, 7, 10, 0.28));
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.045), rgba(var(--wg-bg-deepest-rgb), 0.28));
-	border: 1px solid rgba(194, 163, 90, 0.22);
+	border: 1px solid rgba(var(--wg-gold-rgb), 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(216, 194, 138, 0.42);
+	border-color: rgba(var(--wg-ledger-ink-rgb), 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(194, 163, 90, 0.09) !important;
+	border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.42) !important;
+	border-left-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.12);
+	border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.045) calc(100% - 1px)),
+		linear-gradient(to bottom, transparent calc(100% - 1px), rgba(var(--wg-gold-rgb), 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(8, 7, 10, 0.08)),
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.024), rgba(var(--wg-bg-deepest-rgb), 0.08)),
 		var(--wg-velvet-panel) !important;
-	border: 1px solid rgba(194, 163, 90, 0.15) !important;
+	border: 1px solid rgba(var(--wg-gold-rgb), 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(42, 18, 34, 0.2), transparent),
+		linear-gradient(to right, var(--wg-border-soft), rgba(var(--wg-plum-rgb), 0.2), transparent),
-		rgba(8, 7, 10, 0.24) !important;
+		rgba(var(--wg-bg-deepest-rgb), 0.24) !important;
-	border-color: rgba(194, 163, 90, 0.13) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.055), transparent 5rem),
+		linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.055), transparent 5rem),
 		var(--wg-velvet-panel) !important;
-	border: 1px solid rgba(194, 163, 90, 0.2) !important;
+	border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.07), transparent 5rem),
+		linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.07), transparent 5rem),
 		var(--wg-velvet-panel) !important;
-	border-color: rgba(194, 163, 90, 0.2) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
-	border-left-color: rgba(194, 163, 90, 0.5) !important;
+	border-left-color: rgba(var(--wg-gold-rgb), 0.5) !important;
 	color: var(--wg-text-soft) !important;
 }
 
 [data-widget-area] .alert-warning {
 	background:
-		linear-gradient(to right, rgba(194, 163, 90, 0.12), transparent 5rem),
+		linear-gradient(to right, rgba(var(--wg-gold-rgb), 0.12), transparent 5rem),
 		var(--wg-velvet-panel) !important;
 	border-color: var(--wg-focus) !important;
-	border-left-color: rgba(194, 163, 90, 0.62) !important;
+	border-left-color: rgba(var(--wg-gold-rgb), 0.62) !important;
 	color: #e0cea2 !important;
 }
 
 [data-widget-area] .alert-danger {
 	background:
-		linear-gradient(to right, rgba(142, 52, 56, 0.12), transparent 5rem),
+		linear-gradient(to right, rgba(var(--wg-red-rgb), 0.12), transparent 5rem),
 		var(--wg-velvet-panel) !important;
-	border-color: rgba(142, 52, 56, 0.32) !important;
+	border-color: rgba(var(--wg-red-rgb), 0.32) !important;
-	border-left-color: rgba(142, 52, 56, 0.62) !important;
+	border-left-color: rgba(var(--wg-red-rgb), 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: #e0c878;
+	color: var(--wg-gold-lit);
 	text-decoration: underline;
 }
 
 [data-widget-area] .list-group {
 	background: transparent !important;
-	border: 1px solid rgba(194, 163, 90, 0.12);
+	border: 1px solid rgba(var(--wg-gold-rgb), 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(8, 7, 10, 0.2)) !important;
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.035), rgba(var(--wg-bg-deepest-rgb), 0.2)) !important;
-	border: 1px solid rgba(194, 163, 90, 0.18) !important;
+	border: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.09) !important;
+	border: 1px solid rgba(var(--wg-gold-rgb), 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(8, 7, 10, 0.08)),
+		linear-gradient(to bottom, rgba(255, 241, 196, 0.018), rgba(var(--wg-bg-deepest-rgb), 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(194, 163, 90, 0.06) !important;
+	background: rgba(var(--wg-gold-rgb), 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: #e0c878;
+	--wiki-chrome-link-hover-color: var(--wg-gold-lit);
 	--wiki-chrome-accent-color: var(--wg-gold-soft);
 	--wiki-chrome-hero-bg: linear-gradient(
 		180deg,
-		rgba(42, 18, 34, 0.55) 0%,
+		rgba(var(--wg-plum-rgb), 0.55) 0%,
 		rgba(18, 16, 23, 0.98) 100%
 	);
-	--wiki-chrome-warning-border: rgba(194, 163, 90, 0.45);
+	--wiki-chrome-warning-border: rgba(var(--wg-gold-rgb), 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(9, 8, 11, 0.55);
+	--wiki-scrim: rgba(var(--wg-bg-deep-rgb), 0.55);
-	--wiki-scrim-strong: rgba(9, 8, 11, 0.8);
+	--wiki-scrim-strong: rgba(var(--wg-bg-deep-rgb), 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(194, 163, 90, 0.42),
+		rgba(var(--wg-gold-rgb), 0.42),
-		rgba(194, 163, 90, 0.1) 54%,
+		rgba(var(--wg-gold-rgb), 0.1) 54%,
 		transparent
 	);
 
 	--wiki-prose-link-color: var(--wg-gold);
-	--wiki-prose-link-hover-color: #e0c878;
+	--wiki-prose-link-hover-color: var(--wg-gold-lit);
 
 	--wiki-prose-blockquote-bg: rgba(35, 27, 23, 0.36);
-	--wiki-prose-blockquote-border: rgba(194, 163, 90, 0.4);
+	--wiki-prose-blockquote-border: rgba(var(--wg-gold-rgb), 0.4);
 	--wiki-prose-blockquote-color: var(--wg-text-soft);
 
 	--wiki-prose-code-font-family: var(--wg-font-code);
-	--wiki-prose-code-bg: rgba(8, 7, 10, 0.45);
+	--wiki-prose-code-bg: rgba(var(--wg-bg-deepest-rgb), 0.45);
-	--wiki-prose-code-border: rgba(194, 163, 90, 0.12);
+	--wiki-prose-code-border: rgba(var(--wg-gold-rgb), 0.12);
 	--wiki-prose-code-color: var(--wg-text);
 
-	--wiki-prose-pre-bg: linear-gradient(180deg, rgba(18, 15, 22, 0.92), rgba(8, 7, 10, 0.82));
+	--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(194, 163, 90, 0.22);
+	--wiki-prose-pre-border: rgba(var(--wg-gold-rgb), 0.22);
 	--wiki-prose-pre-color: var(--wg-text-soft);
 
-	--wiki-prose-hr-color: rgba(194, 163, 90, 0.18);
+	--wiki-prose-hr-color: rgba(var(--wg-gold-rgb), 0.18);
-	--wiki-prose-table-border: rgba(194, 163, 90, 0.12);
+	--wiki-prose-table-border: rgba(var(--wg-gold-rgb), 0.12);
 	--wiki-prose-table-head-color: var(--wg-ledger-ink-muted);
-	--wiki-prose-table-hover-bg: rgba(194, 163, 90, 0.04);
+	--wiki-prose-table-hover-bg: rgba(var(--wg-gold-rgb), 0.04);
 	--wiki-prose-table-hover-color: var(--wg-text);
 
-	--wiki-prose-caption-bg: rgba(8, 7, 10, 0.42);
+	--wiki-prose-caption-bg: rgba(var(--wg-bg-deepest-rgb), 0.42);
 	--wiki-prose-caption-color: var(--wg-text-muted);
 	--wiki-prose-caption-font-family: var(--wg-font-text);
-	--wiki-prose-footnote-border: rgba(194, 163, 90, 0.2);
+	--wiki-prose-footnote-border: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.26);
+	--wiki-prose-footnote-popover-border: rgba(var(--wg-gold-rgb), 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(8, 7, 10, 0.36);
+	--wiki-prose-image-bg: rgba(var(--wg-bg-deepest-rgb), 0.36);
-	--wiki-prose-image-border: rgba(194, 163, 90, 0.18);
+	--wiki-prose-image-border: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.15);
+	--wiki-prose-media-iframe-border: rgba(var(--wg-gold-rgb), 0.15);
 
-	--wiki-prose-raw-embed-bg: rgba(8, 7, 10, 0.4);
+	--wiki-prose-raw-embed-bg: rgba(var(--wg-bg-deepest-rgb), 0.4);
-	--wiki-prose-raw-embed-border: rgba(194, 163, 90, 0.25);
+	--wiki-prose-raw-embed-border: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.3),
+		0 0 0 1px rgba(var(--wg-gold-rgb), 0.3),
 		0 0 18px var(--wg-border-soft);
 
-	--wiki-ck-base-background: #18141d;
+	--wiki-ck-base-background: var(--wg-panel);
 	--wiki-ck-base-foreground: #1e1824;
-	--wiki-ck-base-border: rgba(194, 163, 90, 0.22);
+	--wiki-ck-base-border: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.45);
+	--wiki-ck-focus-border: rgba(var(--wg-gold-rgb), 0.45);
-	--wiki-ck-focus-outer-shadow: rgba(194, 163, 90, 0.12);
+	--wiki-ck-focus-outer-shadow: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.18);
+	--wiki-ck-toolbar-border: rgba(var(--wg-gold-rgb), 0.18);
 	--wiki-ck-button-bg: transparent;
-	--wiki-ck-button-hover-bg: rgba(194, 163, 90, 0.1);
+	--wiki-ck-button-hover-bg: rgba(var(--wg-gold-rgb), 0.1);
 	--wiki-ck-button-active-bg: var(--wg-border);
-	--wiki-ck-button-on-bg: rgba(194, 163, 90, 0.12);
+	--wiki-ck-button-on-bg: rgba(var(--wg-gold-rgb), 0.12);
-	--wiki-ck-button-on-hover-bg: rgba(194, 163, 90, 0.18);
+	--wiki-ck-button-on-hover-bg: rgba(var(--wg-gold-rgb), 0.18);
-	--wiki-ck-button-on-active-bg: rgba(194, 163, 90, 0.22);
+	--wiki-ck-button-on-active-bg: rgba(var(--wg-gold-rgb), 0.22);
 	--wiki-ck-button-on-color: #e6d9b8;
 	--wiki-ck-dropdown-background: #1a1520;
-	--wiki-ck-dropdown-border: rgba(194, 163, 90, 0.2);
+	--wiki-ck-dropdown-border: rgba(var(--wg-gold-rgb), 0.2);
-	--wiki-ck-input-background: rgba(9, 8, 11, 0.55);
+	--wiki-ck-input-background: rgba(var(--wg-bg-deep-rgb), 0.55);
-	--wiki-ck-input-border: rgba(194, 163, 90, 0.22);
+	--wiki-ck-input-border: rgba(var(--wg-gold-rgb), 0.22);
-	--wiki-ck-input-text: #e6e0d6;
+	--wiki-ck-input-text: var(--wg-text);
 	--wiki-ck-list-background: #1a1520;
-	--wiki-ck-list-hover-bg: rgba(194, 163, 90, 0.1);
+	--wiki-ck-list-hover-bg: rgba(var(--wg-gold-rgb), 0.1);
-	--wiki-ck-list-on-bg: rgba(194, 163, 90, 0.16);
+	--wiki-ck-list-on-bg: rgba(var(--wg-gold-rgb), 0.16);
 	--wiki-ck-list-on-text: #f0e6cc;
 	--wiki-ck-panel-background: #1a1520;
-	--wiki-ck-panel-border: rgba(194, 163, 90, 0.2);
+	--wiki-ck-panel-border: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.18);
+	--wiki-fab-border-color: rgba(var(--wg-gold-rgb), 0.18);
 	--wiki-fab-shadow: var(--wg-velvet-shadow);
-	--wiki-fab-btn-bg: rgba(194, 163, 90, 0.075);
+	--wiki-fab-btn-bg: rgba(var(--wg-gold-rgb), 0.075);
-	--wiki-fab-btn-border: rgba(216, 194, 138, 0.24);
+	--wiki-fab-btn-border: rgba(var(--wg-ledger-ink-rgb), 0.24);
-	--wiki-fab-danger-bg: rgba(142, 52, 56, 0.16);
+	--wiki-fab-danger-bg: rgba(var(--wg-red-rgb), 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(194, 163, 90, 0.22) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.82) 50%,
+					rgba(var(--wg-gold-rgb), 0.82) 50%,
 					var(--wg-focus) 78%,
 					transparent
 				)
@@ -428,8 +428,8 @@
 				--wiki-prose-heading-rule-right,
 				linear-gradient(
 					270deg,
-					rgba(194, 163, 90, 0.82),
+					rgba(var(--wg-gold-rgb), 0.82),
-					rgba(194, 163, 90, 0.24) 54%,
+					rgba(var(--wg-gold-rgb), 0.24) 54%,
 					transparent
 				)
 			);
@@ -464,7 +464,7 @@
 				90deg,
 				transparent,
 				var(--wg-focus) 22%,
-				rgba(194, 163, 90, 0.82) 50%,
+				rgba(var(--wg-gold-rgb), 0.82) 50%,
 				var(--wg-focus) 78%,
 				transparent
 			)
@@ -479,8 +479,8 @@
 			--wiki-prose-heading-rule-right,
 			linear-gradient(
 				270deg,
-				rgba(194, 163, 90, 0.82),
+				rgba(var(--wg-gold-rgb), 0.82),
-				rgba(194, 163, 90, 0.24) 54%,
+				rgba(var(--wg-gold-rgb), 0.24) 54%,
 				transparent
 			)
 		);
@@ -587,7 +587,7 @@
 
 .westgate-wiki .wiki-breadcrumb-trail__link:hover,
 .westgate-wiki .wiki-breadcrumb-trail__link:focus {
-	color: #e0c878;
+	color: var(--wg-gold-lit);
 	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(194, 163, 90, 0.5);
+	text-decoration-color: rgba(var(--wg-gold-rgb), 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: #e0c878 !important;
+	color: var(--wg-gold-lit) !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(194, 163, 90, 0.11) !important;
+	border-bottom-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.18);
+	border-inline-start-color: rgba(var(--wg-gold-rgb), 0.18);
 }
 
 .westgate-wiki .wiki-article-toc__link,
 .westgate-wiki .wiki-sidebar-nav-ns,
 .westgate-wiki .wiki-sidebar-root {
-	color: #d8c28a !important;
+	color: var(--wg-ledger-ink) !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(194, 163, 90, 0.22);
+	text-shadow: 0 0 8px rgba(var(--wg-gold-rgb), 0.22);
 }
 
 .westgate-wiki .wiki-namespace-directory {
 	--wiki-tree-indent: 1.28rem;
-	--wiki-tree-line-color: rgba(194, 163, 90, 0.34);
+	--wiki-tree-line-color: rgba(var(--wg-gold-rgb), 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(8, 7, 10, 0.4) !important;
+		rgba(var(--wg-bg-deepest-rgb), 0.4) !important;
-	border-color: rgba(194, 163, 90, 0.18) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.38) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.38) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.04),
-		0 0 0 0.18rem rgba(194, 163, 90, 0.09) !important;
+		0 0 0 0.18rem rgba(var(--wg-gold-rgb), 0.09) !important;
 	color: var(--wg-text) !important;
 }
 
 .westgate-wiki .wiki-index-jump--dynamic {
-	background: rgba(8, 7, 10, 0.18);
+	background: rgba(var(--wg-bg-deepest-rgb), 0.18);
-	border-block: 1px solid rgba(194, 163, 90, 0.1);
+	border-block: 1px solid rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.045) !important;
+		rgba(var(--wg-gold-rgb), 0.045) !important;
-	border-color: rgba(194, 163, 90, 0.16) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(216, 194, 138, 0.36) !important;
+	border-color: rgba(var(--wg-ledger-ink-rgb), 0.36) !important;
-	color: #fff4dd !important;
+	color: var(--wg-gold-hi) !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, #e0c878 0 30%, var(--wg-focus) 31% 58%, transparent 59%);
+	background: radial-gradient(circle, var(--wg-gold-lit) 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(194, 163, 90, 0.34)), rgba(194, 163, 90, 0.12));
+	background: linear-gradient(90deg, var(--wiki-tree-line-color, rgba(var(--wg-gold-rgb), 0.34)), rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.34)));
+	background: linear-gradient(180deg, var(--wg-border-soft), var(--wiki-tree-line-color, rgba(var(--wg-gold-rgb), 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: #fff4dd !important;
+	color: var(--wg-gold-hi) !important;
-	text-shadow: 0 0 10px rgba(194, 163, 90, 0.16);
+	text-shadow: 0 0 10px rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.36);
+	--wiki-tree-line-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.12));
+	background: linear-gradient(90deg, var(--wiki-tree-line-color), rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.26);
+	--wiki-sidebar-tree-line-color: rgba(var(--wg-gold-rgb), 0.26);
 }
 
 .westgate-wiki .wiki-sidebar-directory .wiki-sidebar-nav-rows--child-pages {
-	border-inline-start-color: rgba(194, 163, 90, 0.16) !important;
+	border-inline-start-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.06), var(--wiki-sidebar-tree-line-color));
+	background: linear-gradient(180deg, rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.55);
+	text-decoration-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.13) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.13) !important;
 }
 
 .westgate-wiki .wiki-index-entry-badge {
-	background: rgba(194, 163, 90, 0.055) !important;
+	background: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.18) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.18) !important;
 	border-radius: 8px !important;
 	box-shadow: var(--wg-velvet-shadow) !important;
 }
 
 .westgate-wiki .wiki-fab-btn {
-	background: rgba(194, 163, 90, 0.075) !important;
+	background: rgba(var(--wg-gold-rgb), 0.075) !important;
-	border-color: rgba(216, 194, 138, 0.24) !important;
+	border-color: rgba(var(--wg-ledger-ink-rgb), 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(194, 163, 90, 0.13) !important;
+	background: rgba(var(--wg-gold-rgb), 0.13) !important;
-	border-color: rgba(216, 194, 138, 0.44) !important;
+	border-color: rgba(var(--wg-ledger-ink-rgb), 0.44) !important;
-	color: #fff4dd !important;
+	color: var(--wg-gold-hi) !important;
 	text-decoration: none !important;
 }
 
 .westgate-wiki .wiki-fab-btn--danger,
 .westgate-wiki .wiki-fab-btn.wiki-delete-page {
-	background: rgba(142, 52, 56, 0.16) !important;
+	background: rgba(var(--wg-red-rgb), 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(142, 52, 56, 0.24) !important;
+	background: rgba(var(--wg-red-rgb), 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(194, 163, 90, 0.2) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
-	color: #fff4dd !important;
+	color: var(--wg-gold-hi) !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(194, 163, 90, 0.3) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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: #fff4dd !important;
+	color: var(--wg-gold-hi) !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(194, 163, 90, 0.2) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
-	color: #fff4dd !important;
+	color: var(--wg-gold-hi) !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(194, 163, 90, 0.2) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
-	color: #fff4dd !important;
+	color: var(--wg-gold-hi) !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(8, 7, 10, 0.45),
+		inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 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(194, 163, 90, 0.16),
+			inset -1.25rem 0 1rem -1rem rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.5) rgba(8, 7, 10, 0.48);
+		scrollbar-color: rgba(var(--wg-gold-rgb), 0.5) rgba(var(--wg-bg-deepest-rgb), 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(194, 163, 90, 0.22) !important;
+	border: 1px solid rgba(var(--wg-gold-rgb), 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(9, 8, 11, 0.92) !important;
+	background: rgba(var(--wg-bg-deep-rgb), 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(194, 163, 90, 0.24) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.24) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.025),
-		inset 0 0 0 1px rgba(8, 7, 10, 0.45) !important;
+		inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 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(194, 163, 90, 0.45) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.45) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.18);
+	--ck-color-button-action-background: rgba(var(--wg-gold-rgb), 0.18);
-	--ck-color-button-action-hover-background: rgba(194, 163, 90, 0.26);
+	--ck-color-button-action-hover-background: rgba(var(--wg-gold-rgb), 0.26);
-	--ck-color-button-action-active-background: rgba(194, 163, 90, 0.32);
+	--ck-color-button-action-active-background: rgba(var(--wg-gold-rgb), 0.32);
 	--ck-color-button-action-disabled-background: transparent;
-	--ck-color-button-action-text: #fff4dd;
+	--ck-color-button-action-text: var(--wg-gold-hi);
 	--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(9, 8, 11, 0.34);
+	--ck-color-input-disabled-background: rgba(var(--wg-bg-deep-rgb), 0.34);
-	--ck-color-input-disabled-border: rgba(194, 163, 90, 0.12);
+	--ck-color-input-disabled-border: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.16) !important;
+	border-bottom-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.2) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
-	color: #fff4dd !important;
+	color: var(--wg-gold-hi) !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(194, 163, 90, 0.18) !important;
+	background: rgba(var(--wg-gold-rgb), 0.18) !important;
-	border-color: rgba(194, 163, 90, 0.3) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.3) !important;
-	color: #fff4dd !important;
+	color: var(--wg-gold-hi) !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(9, 8, 11, 0.68) !important;
+	background: rgba(var(--wg-bg-deep-rgb), 0.68) !important;
-	border-color: rgba(194, 163, 90, 0.24) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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: #fff4dd !important;
+	color: var(--wg-gold-hi) !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(8, 7, 10, 0.76),
+		inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 0.76),
-		0 0 0 2px rgba(216, 194, 138, 0.66) !important;
+		0 0 0 2px rgba(var(--wg-ledger-ink-rgb), 0.66) !important;
 }
 
 body:has(#westgate-wiki-compose) .ck.ck-color-grid__tile.ck-on {
 	box-shadow:
-		inset 0 0 0 1px rgba(8, 7, 10, 0.86),
+		inset 0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 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(194, 163, 90, 0.075) !important;
+	background: rgba(var(--wg-gold-rgb), 0.075) !important;
-	border: 1px solid rgba(216, 194, 138, 0.26) !important;
+	border: 1px solid rgba(var(--wg-ledger-ink-rgb), 0.26) !important;
 	border-radius: 4px !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.035),
-		0 0 0 1px rgba(8, 7, 10, 0.36) !important;
+		0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 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(194, 163, 90, 0.18) !important;
+	background: rgba(var(--wg-gold-rgb), 0.18) !important;
-	border-color: rgba(216, 194, 138, 0.52) !important;
+	border-color: rgba(var(--wg-ledger-ink-rgb), 0.52) !important;
 	box-shadow:
 		inset 0 1px 0 rgba(255, 244, 221, 0.055),
-		0 0 0 1px rgba(194, 163, 90, 0.24) !important;
+		0 0 0 1px rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.34) !important;
+		0 0 0 1px rgba(var(--wg-gold-rgb), 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(9, 8, 11, 0.74) !important;
+	background: rgba(var(--wg-bg-deep-rgb), 0.74) !important;
-	border-color: rgba(194, 163, 90, 0.26) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(8, 7, 10, 0.42) !important;
+		0 0 0 1px rgba(var(--wg-bg-deepest-rgb), 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(194, 163, 90, 0.5) !important;
+	border-color: rgba(var(--wg-gold-rgb), 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(194, 163, 90, 0.2) !important;
+	border-color: rgba(var(--wg-gold-rgb), 0.2) !important;
 	box-shadow: inset 0 1px 0 rgba(255, 244, 221, 0.035) !important;
 }