@guildofgleks/ui 21.6.1 → 21.7.1

package/styles/theme.css

@@ -19,25 +19,6 @@
  * No component stylesheet declares a `--gog-*` default of its own — everything a
  * component paints resolves to a token below.
  *
- * ── The pre-21.5.0 spellings, and why they sit in a fallback ─────────────────────
- * Three prefixes were abbreviations of a component's name, which is the one thing a
- * consumer cannot guess: `--gog-btn-*`, `--gog-ms-*`, `--gog-confirm-*`. 21.5.0 spells them
- * out — `--gog-button-*`, `--gog-multiselect-*`, `--gog-confirmation-dialog-*` — and keeps
- * the old ones working by putting each one in its replacement's fallback:
- *
- *     --gog-button-md-padding: var(--gog-btn-md-padding, 0.75rem 1.25rem);
- *
- * The spelled-out name is the declaration; the old name is declared nowhere, so a consumer
- * who set it still feeds the component from wherever they set it, in every scope. Do not
- * "simplify" this into an alias declared beside the original (`--gog-button-x: var(--gog-btn-x)`):
- * the derived block re-declares itself inside every nested `[data-theme]`, so that shape
- * silently discards a root-level override of the *new* name inside any themed subtree. That
- * was measured, not theorised.
- *
- * @deprecated since 21.5.0 (2026-08-19) — use the spelled-out prefixes. Removed in 21.7.0.
- * Removing them is deleting the `var(--gog-btn-…, )` wrapper from each declaration below;
- * nothing else moves.
- *
  * ── Why there are two blocks, and which one to add a token to ────────────────────
  * A custom property's `var()` references are substituted on the element that *declares*
  * it, not where it is read. So `--gog-button-primary-bg: var(--gog-accent-color)` declared on
@@ -76,14 +57,57 @@
   --gog-text-2xl: 2rem;
   --gog-text-3xl: 3rem;
 
-  /* ── Spacing & geometry ─────────────────────────────────────────────────────── */
-  --gog-space-xs: 4px;
-  --gog-space-sm: 8px;
-  --gog-space-md: 16px;
-  --gog-space-lg: 24px;
-  --gog-space-2xl: 48px;
+  /* The "emphasis" casing character — labels, buttons, section and table headers all shout
+     the same way by default. Not every uppercase/1px-tracking declaration in this file reads
+     these two: only the ones that genuinely share this idea do. A few (gog-tabs among them)
+     stay their own literal on purpose, because normal case or a different tracking reads
+     better there — see docs/themes.md, iteration 1, for the full audit of what did and did
+     not qualify. */
+  --gog-text-transform: uppercase;
+  --gog-letter-spacing: 1px;
+
+  /* ── Spacing & geometry ───────────────────────────────────────────────────────
+
+     `--gog-density` is the whole spacing system in one number. It multiplies every step
+     of the scale below, and every component padding and gap derives from that scale, so
+     a theme makes the entire library compact or roomy without naming a single component:
+
+       [data-theme='compact'] { --gog-density: 0.75; }
+
+     This is the density half of docs/themes.md's character layer — the same idea as
+     --gog-radius for corners. Before it existed, 177 component paddings and gaps were
+     literals in two different units, and a theme that wanted tighter controls had to
+     re-list all of them; check-tokens.mjs rule G now fails a build that adds another.
+
+     The steps are named for their pixel value at density 1, because a t-shirt scale
+     stops being readable somewhere around the fourth size and this one has fourteen.
+     The five original t-shirt names are kept as aliases: they are public API, they are
+     what `theme-starter.css` and every existing consumer theme use, and they cost
+     nothing to keep.
+
+     Only the multiplier itself lives here — the scale is in the derived block below,
+     because every step reads this token and so has to re-resolve inside each theme
+     scope. A step declared here would be computed once against :root's density and a
+     [data-theme] subtree would inherit that number, not its own. */
+  --gog-density: 1;
+
+  /* The ground a *raised* surface paints. Equal to the plain surface by default, because on a
+     light theme elevation reads as a shadow and the surface itself does not change.
+
+     On a dark theme a shadow has nothing to darken — 21.7.1 found `elevated` and `outlined`
+     cards rendering identically under `data-theme="dark"`, both a thin ring on the same fill.
+     Dark themes therefore lift this token instead, which is how elevation has to be expressed
+     when the page is already near-black. Each dark theme sets it; light themes leave it alone. */
 
   --gog-radius: 8px;
+  /* Three border-weight tiers, not one: --gog-control-border-width (2px) is form fields,
+     --gog-panel-border-width (1px) is raised/floating surfaces (card, dialog, dropdown panel,
+     tooltip — see README.md's note on --gog-panel-*), and this pair is everything smaller and
+     inline — chip, tag, badge, toggle, table rows, tabs, calendar cells. It happens to share
+     panel's value today; kept separate anyway; a theme wanting thick floating panels but thin
+     inline chips (or the reverse) needs the two independently settable. */
+  --gog-border-width: 1px;
+  --gog-border-style: solid;
   --gog-panel-border-width: 1px;
   --gog-panel-border-style: solid;
 
@@ -104,13 +128,9 @@
      Five-tier scale: xsm/slg bookend the original sm/md/lg (restored below to
      their pre-compaction numbers) as new extremes for extra-tight or extra-roomy
      layouts. */
-  --gog-control-padding-y: 10px;
-  --gog-control-padding-x: 14px;
-  --gog-control-icon-offset: 10px;
   --gog-control-border-width: 2px;
   --gog-control-border-style: solid;
 
-  --gog-control-checkbox-padding: 6px;
   --gog-control-checkbox-box-size-xsm: 12px;
   --gog-control-checkbox-box-size-sm: 18px;
   --gog-control-checkbox-box-size-md: 24px;
@@ -129,29 +149,22 @@
 
   /* ── Button sizing ─────────────────────────────────────────────────────────── */
 
-  /* ── Field sizing (input / select / multiselect share one scale) ───────────── */
-  --gog-field-xsm-padding-y: 4px;
-  --gog-field-xsm-padding-x: 8px;
-  --gog-field-xsm-icon-offset: 6px;
-  --gog-field-xsm-icon-inset: 24px;
-
-  --gog-field-sm-padding-y: 6px;
-  --gog-field-sm-padding-x: 10px;
-  --gog-field-sm-icon-offset: 8px;
-  --gog-field-sm-icon-inset: 30px;
+  /* ── Field sizing (input / select / multiselect share one scale) ─────────────
+     The offsets are spacing and follow --gog-density with everything else; the glyph
+     box does not, because an icon that shrinks with the padding stops being legible
+     well before the padding stops being usable. Only the offsets move.
+
+     Each inset is the text's start edge: one offset before the glyph, the glyph, one
+     offset after. It was five hand-measured literals (docs/iteration-8-plan.md tuned
+     them in a browser) that happened to satisfy that identity, so nothing here moves
+     at density 1 — but a literal cannot follow the density knob, and at 0.75 the text
+     used to keep a 36px inset against 7px of padding. Stated as the sum it always was,
+     it just works. */
+  --gog-field-icon-glyph-xsm: 12px;
+  --gog-field-icon-glyph-sm: 14px;
+  --gog-field-icon-glyph: 16px;
 
-  --gog-field-md-icon-inset: 36px;
-
-  --gog-field-lg-padding-y: 14px;
-  --gog-field-lg-padding-x: 18px;
-  --gog-field-lg-icon-offset: 14px;
-  --gog-field-lg-icon-inset: 44px;
-
-  --gog-field-slg-padding-y: 18px;
-  --gog-field-slg-padding-x: 22px;
   --gog-field-slg-font-size: 1.25rem;
-  --gog-field-slg-icon-offset: 18px;
-  --gog-field-slg-icon-inset: 52px;
 
   /* ── Float label geometry (input / textarea / select / multiselect) ─────────
      One scale for every field that can float its label. Each control reads these
@@ -163,7 +176,6 @@
      kept clear for the 'over' variant. */
   --gog-field-float-label-reserve: 14px;
   --gog-field-float-label-in-top: 6px;
-  --gog-field-float-label-over-gap: 8px;
   --gog-field-float-label-over-reserve: 1.4em;
 
   /* ── Icon & spinner ───────────────────────────────────────────────────────── */
@@ -179,8 +191,6 @@
   /* ── Toast stack ──────────────────────────────────────────────────────────── */
   --gog-toast-min-width: 280px;
   --gog-toast-max-width: 400px;
-  --gog-toast-gap: 10px;
-  --gog-toast-stack-padding: 16px;
   --gog-toast-z-index: 9999;
   --gog-toast-enter-distance: 110%;
   --gog-toast-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
@@ -193,32 +203,36 @@
 
   /* ── Light palette (also the no-data-theme default) ───────────────────────── */
   color-scheme: light;
-  /* Фоновые и поверхностные тона */
-  --gog-background-color: #f7f3eb; /* Тёплый пергаментный фон страницы */
-  --gog-surface-color: #ffffff; /* КИСЛО-БЕЛЫЙ ПЕРГАМЕНТ карточек (создает контраст со слоем 1!) */
-  --gog-hover-color: #f0e7d7; /* Состояние наведения (мягкий воск) */
-  --gog-border-color: #d8c7ad; /* Состаренная латунная рамка */
-
-  /* Типографика (Старинные дубовые чернила) */
-  --gog-text-color: #17120c; /* Глубокие чернила (высокий контраст WCAG AAA) */
+  /* Backgrounds and surfaces */
+  --gog-background-color: #f7f3eb; /* Warm parchment page ground */
+  --gog-surface-color: #ffffff; /* Bleached parchment for cards — lighter than the page on purpose, so the two tiers read apart */
+  --gog-hover-color: #f0e7d7; /* Hover state — soft wax */
+  --gog-border-color: #d8c7ad; /* Aged brass rule */
+
+  /* Type — old oak-gall ink */
+  --gog-text-color: #17120c; /* Deep ink — clears WCAG AAA against both surfaces */
   --gog-accent-text-color: #ffffff;
-  --gog-muted-text-color: #63503c; /* Приглушенные печные чернила */
+  --gog-muted-text-color: #63503c; /* Muted kiln ink */
 
-  /* Бренд и акценты (Гильдейское Сусальное Золото) */
+  /* Brand and accents — guild gold leaf */
   --gog-primary-color: #17120c;
-  --gog-accent-color: #9e6f00; /* Насыщенный благородный золотисто-бронзовый */
-  --gog-accent-bright: #c88e00; /* Яркий отблеск золота */
-  --gog-accent-dim: #735100; /* Темная бронза */
-  --gog-accent-pale: #f8f1df; /* Светлая подложка под золото */
+  /* Deep guild gold. Darkened from #9e6f00 in 21.7.0: white on the old value was 4.44:1,
+     just under WCAG AA's 4.5, and its hover fill was 2.87:1 — the hover was the worse half.
+     The hover is now *darker* than the rest state rather than brighter, because gold light
+     enough to read as "a brighter gleam" cannot carry white text at all. */
+  --gog-accent-color: #926600;
+  --gog-accent-bright: #7a5500;
+  --gog-accent-dim: #735100; /* Dark bronze */
+  --gog-accent-pale: #f8f1df; /* Pale wash beneath the gold */
   --gog-secondary-color: #6b5328;
 
-  /* Гармонизированная алхимическая семантика */
-  --gog-success-color: #216e4e; /* Изумруд */
-  --gog-danger-color: #a7232b; /* Рубин */
-  --gog-warning-color: #c45100; /* Тёмный янтарь */
-  --gog-info-color: #2b5c8f; /* Лазурит */
+  /* Semantic colours, kept in the alchemical family */
+  --gog-success-color: #216e4e; /* Emerald */
+  --gog-danger-color: #a7232b; /* Ruby */
+  --gog-warning-color: #c45100; /* Dark amber */
+  --gog-info-color: #2b5c8f; /* Lapis */
 
-  /* Объёмная мягкая тень старой кожи */
+  /* Soft, deep shadow — old leather */
   --gog-panel-shadow: 0 4px 20px rgba(23, 18, 12, 0.08), 0 1px 3px rgba(23, 18, 12, 0.04);
   --gog-spinner-overlay-bg: rgba(247, 243, 235, 0.85);
 }
@@ -227,32 +241,36 @@
 [data-theme='light'] {
   color-scheme: light;
 
-  /* Фоновые и поверхностные тона */
-  --gog-background-color: #f7f3eb; /* Тёплый пергаментный фон страницы */
-  --gog-surface-color: #ffffff; /* КИСЛО-БЕЛЫЙ ПЕРГАМЕНТ карточек (создает контраст со слоем 1!) */
-  --gog-hover-color: #f0e7d7; /* Состояние наведения (мягкий воск) */
-  --gog-border-color: #d8c7ad; /* Состаренная латунная рамка */
+  /* Backgrounds and surfaces */
+  --gog-background-color: #f7f3eb; /* Warm parchment page ground */
+  --gog-surface-color: #ffffff; /* Bleached parchment for cards — lighter than the page on purpose, so the two tiers read apart */
+  --gog-hover-color: #f0e7d7; /* Hover state — soft wax */
+  --gog-border-color: #d8c7ad; /* Aged brass rule */
 
-  /* Типографика (Старинные дубовые чернила) */
-  --gog-text-color: #17120c; /* Глубокие чернила (высокий контраст WCAG AAA) */
+  /* Type — old oak-gall ink */
+  --gog-text-color: #17120c; /* Deep ink — clears WCAG AAA against both surfaces */
   --gog-accent-text-color: #ffffff;
-  --gog-muted-text-color: #63503c; /* Приглушенные печные чернила */
+  --gog-muted-text-color: #63503c; /* Muted kiln ink */
 
-  /* Бренд и акценты (Гильдейское Сусальное Золото) */
+  /* Brand and accents — guild gold leaf */
   --gog-primary-color: #17120c;
-  --gog-accent-color: #9e6f00; /* Насыщенный благородный золотисто-бронзовый */
-  --gog-accent-bright: #c88e00; /* Яркий отблеск золота */
-  --gog-accent-dim: #735100; /* Темная бронза */
-  --gog-accent-pale: #f8f1df; /* Светлая подложка под золото */
+  /* Deep guild gold. Darkened from #9e6f00 in 21.7.0: white on the old value was 4.44:1,
+     just under WCAG AA's 4.5, and its hover fill was 2.87:1 — the hover was the worse half.
+     The hover is now *darker* than the rest state rather than brighter, because gold light
+     enough to read as "a brighter gleam" cannot carry white text at all. */
+  --gog-accent-color: #926600;
+  --gog-accent-bright: #7a5500;
+  --gog-accent-dim: #735100; /* Dark bronze */
+  --gog-accent-pale: #f8f1df; /* Pale wash beneath the gold */
   --gog-secondary-color: #6b5328;
 
-  /* Гармонизированная алхимическая семантика */
-  --gog-success-color: #216e4e; /* Изумруд */
-  --gog-danger-color: #a7232b; /* Рубин */
-  --gog-warning-color: #c45100; /* Тёмный янтарь */
-  --gog-info-color: #2b5c8f; /* Лазурит */
+  /* Semantic colours, kept in the alchemical family */
+  --gog-success-color: #216e4e; /* Emerald */
+  --gog-danger-color: #a7232b; /* Ruby */
+  --gog-warning-color: #c45100; /* Dark amber */
+  --gog-info-color: #2b5c8f; /* Lapis */
 
-  /* Объёмная мягкая тень старой кожи */
+  /* Soft, deep shadow — old leather */
   --gog-panel-shadow: 0 4px 20px rgba(23, 18, 12, 0.08), 0 1px 3px rgba(23, 18, 12, 0.04);
   --gog-spinner-overlay-bg: rgba(247, 243, 235, 0.85);
 }
@@ -261,32 +279,52 @@
 [data-theme='dark'] {
   color-scheme: dark;
 
-  /* Фоновые и поверхностные тона */
-  --gog-background-color: #0d0b08; /* Глубокий кузнечный обсидиан */
-  --gog-surface-color: #16120e; /* Тёмное обожженное железо (карточки) */
-  --gog-hover-color: #241d17; /* Наведение на элементы */
-  --gog-border-color: #3d3122; /* Состаренная чеканенная бронза */
-
-  /* Типографика (Светящаяся Слоновая Кость) */
-  --gog-text-color: #f3ebd8; /* Мягкий светящийся пергамент */
+  /* Backgrounds and surfaces */
+  --gog-background-color: #0d0b08; /* Deep forge obsidian */
+  --gog-surface-color: #16120e; /* Dark fired iron — cards */
+  /* Lifted, not shadowed — see --gog-elevated-surface-color. Deliberately a step above
+     --gog-hover-color, not equal to it: hover and the header strips are a light lift, elevation
+     is a bigger one, and the first attempt gave all three the same value. */
+  --gog-hover-color: #241d17; /* Hover state */
+  --gog-border-color: #3d3122; /* Aged chased bronze */
+
+  /* Type — glowing ivory */
+  --gog-text-color: #f3ebd8; /* Soft luminous parchment */
   --gog-accent-text-color: #0d0b08;
-  --gog-muted-text-color: #9e8d76; /* Приглушенная бронза */
+  --gog-muted-text-color: #9e8d76; /* Muted bronze */
 
-  /* Бренд и акценты (Светящееся Золото Алхимии) */
+  /* Brand and accents — the alchemist's glowing gold */
   --gog-primary-color: #f3ebd8;
-  --gog-accent-color: #fbbf24; /* Плазменный янтарь */
-  --gog-accent-bright: #fde047; /* Яркий золотой луч */
-  --gog-accent-dim: #b48310; /* Приглушенное золото */
-  --gog-accent-pale: #2b210c; /* Тёмный золотой отсвет */
+  --gog-accent-color: #fbbf24; /* Plasma amber */
+  --gog-accent-bright: #fde047; /* Bright gold ray */
+  --gog-accent-dim: #b48310; /* Muted gold */
+  --gog-accent-pale: #2b210c; /* Dark gold reflection */
   --gog-secondary-color: #d4a373;
 
-  /* Семантика */
-  --gog-success-color: #34d399; /* Светящийся изумруд */
-  --gog-danger-color: #f87171; /* Светящийся рубин */
-  --gog-warning-color: #fbbf24; /* Янтарь */
-  --gog-info-color: #38bdf8; /* Сапфир */
+  /* Semantics */
+  --gog-success-color: #34d399; /* Glowing emerald */
+  --gog-danger-color: #f87171; /* Glowing ruby */
+  --gog-warning-color: #fbbf24; /* Amber */
+  --gog-info-color: #38bdf8; /* Sapphire */
 
   --gog-panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--gog-border-color);
+  /* `elevated` drops the 1px ring `--gog-panel-shadow` carries for real overlays (dialog,
+     dropdown, tooltip), because that ring is exactly what `outlined` draws — with it, the two
+     card/panel variants render identically on a dark ground. The blur stays; the ring goes,
+     so outlined has an edge and elevated does not. Light themes need none of this: their
+     shadow has no ring and reads on its own. */
+  /* `elevated` cannot use `--gog-panel-shadow` here. That shadow carries a `0 0 0 1px` ring so
+     overlays keep an edge against the page, and the ring is exactly what `outlined` draws — with
+     it the two variants render identically. Dropping the ring and keeping the 30px black blur was
+     worse: black blurred over a near-black page reads as smudge rather than lift.
+
+     So elevation is stated the way a dark UI actually states it — a hairline of light along the
+     top edge, where a raised surface would catch it, over a tighter, darker shadow that stays
+     close to the element instead of hazing the page. */
+  --gog-card-elevated-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.55);
+  --gog-panel-elevated-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.55);
   --gog-spinner-overlay-bg: rgba(13, 11, 8, 0.85);
 }
 
@@ -300,11 +338,67 @@
   /* ── Derived foundation tokens ───────────────────────────────────────────────
      Split out of the literal block above because they read other tokens: they have
      to re-resolve inside each theme scope. */
+  --gog-space-2: calc(2px * var(--gog-density));
+  --gog-space-4: calc(4px * var(--gog-density));
+  --gog-space-6: calc(6px * var(--gog-density));
+  --gog-space-8: calc(8px * var(--gog-density));
+  --gog-space-10: calc(10px * var(--gog-density));
+  --gog-space-12: calc(12px * var(--gog-density));
+  --gog-space-14: calc(14px * var(--gog-density));
+  --gog-space-16: calc(16px * var(--gog-density));
+  --gog-space-18: calc(18px * var(--gog-density));
+  --gog-space-20: calc(20px * var(--gog-density));
+  --gog-space-24: calc(24px * var(--gog-density));
+  --gog-space-28: calc(28px * var(--gog-density));
+  --gog-space-32: calc(32px * var(--gog-density));
+  --gog-space-48: calc(48px * var(--gog-density));
+  --gog-space-xs: var(--gog-space-4);
+  --gog-space-sm: var(--gog-space-8);
+  --gog-space-md: var(--gog-space-16);
+  --gog-space-lg: var(--gog-space-24);
+  --gog-space-2xl: var(--gog-space-48);
+  --gog-control-padding-y: var(--gog-space-10);
+  --gog-control-padding-x: var(--gog-space-14);
+  --gog-control-checkbox-padding: var(--gog-space-6);
+  --gog-field-xsm-padding-y: var(--gog-space-4);
+  --gog-field-xsm-padding-x: var(--gog-space-8);
+  --gog-field-sm-padding-y: var(--gog-space-6);
+  --gog-field-sm-padding-x: var(--gog-space-10);
+  --gog-field-lg-padding-y: var(--gog-space-14);
+  --gog-field-lg-padding-x: var(--gog-space-18);
+  --gog-field-slg-padding-y: var(--gog-space-18);
+  --gog-field-slg-padding-x: var(--gog-space-20);
+  --gog-field-float-label-over-gap: var(--gog-space-8);
+  --gog-toast-gap: var(--gog-space-10);
+  --gog-toast-stack-padding: var(--gog-space-16);
+  --gog-field-xsm-icon-offset: var(--gog-space-6);
+  --gog-field-sm-icon-offset: var(--gog-space-8);
+  --gog-field-lg-icon-offset: var(--gog-space-14);
+  --gog-field-slg-icon-offset: var(--gog-space-18);
+  --gog-control-icon-offset: var(--gog-space-10);
+  --gog-elevated-surface-color: var(--gog-surface-color);
   --gog-panel-radius: calc(var(--gog-radius) + 8px);
   --gog-field-xsm-font-size: var(--gog-text-xs);
   --gog-field-sm-font-size: var(--gog-text-sm);
   --gog-field-md-padding-y: var(--gog-control-padding-y);
   --gog-field-md-padding-x: var(--gog-control-padding-x);
+
+  /* offset + glyph + offset — see the icon-chrome comment in the literal block above. */
+  --gog-field-xsm-icon-inset: calc(
+    var(--gog-field-xsm-icon-offset) * 2 + var(--gog-field-icon-glyph-xsm)
+  );
+  --gog-field-sm-icon-inset: calc(
+    var(--gog-field-sm-icon-offset) * 2 + var(--gog-field-icon-glyph-sm)
+  );
+  --gog-field-md-icon-inset: calc(
+    var(--gog-field-md-icon-offset) * 2 + var(--gog-field-icon-glyph)
+  );
+  --gog-field-lg-icon-inset: calc(
+    var(--gog-field-lg-icon-offset) * 2 + var(--gog-field-icon-glyph)
+  );
+  --gog-field-slg-icon-inset: calc(
+    var(--gog-field-slg-icon-offset) * 2 + var(--gog-field-icon-glyph)
+  );
   --gog-field-md-font-size: var(--gog-text-md);
   --gog-field-md-icon-offset: var(--gog-control-icon-offset);
   --gog-field-lg-font-size: var(--gog-text-lg);
@@ -324,13 +418,13 @@
   --gog-accordion-border-style: var(--gog-control-border-style);
   --gog-accordion-text-color: var(--gog-text-color);
   --gog-accordion-accent-color: var(--gog-accent-color);
-  --gog-accordion-hover-bg: color-mix(in srgb, var(--gog-accent-dim) 10%, transparent);
-  --gog-accordion-hover-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
+  --gog-accordion-hover-bg: var(--gog-hover-color);
+  --gog-accordion-hover-ring: var(--gog-accent-dim);
   --gog-accordion-focus-ring-width: var(--gog-focus-ring-width);
   --gog-accordion-body-color: var(--gog-text-color);
   --gog-accordion-body-line-height: 1.6;
-  --gog-accordion-header-text-transform: uppercase;
-  --gog-accordion-header-gap: 12px;
+  --gog-accordion-header-text-transform: var(--gog-text-transform);
+  --gog-accordion-header-gap: var(--gog-space-12);
   --gog-accordion-disabled-opacity: 0.5;
   --gog-accordion-transition-duration: var(--gog-duration-base);
   --gog-accordion-body-transition-duration: var(--gog-duration-slow);
@@ -340,68 +434,73 @@
      opt in per-instance or theme-wide by overriding these two. */
   --gog-accordion-radius: 0px;
   --gog-accordion-body-radius: 0px;
-  --gog-accordion-header-bg: transparent;
-  /* A subtle black wash over whatever sits behind the accordion, so the body always
-     reads slightly darker than the header regardless of the surrounding surface color. */
-  --gog-accordion-body-bg: color-mix(in srgb, black 6%, transparent);
+  /* The header carries its own ground and the body does not. Both were `transparent` until
+     21.7.1, which made every open item one continuous band: header and content painted the
+     surrounding surface, and the only thing between two open items was a hairline in the accent
+     colour. With several open at once nobody could tell where one ended and the next began.
+
+     Only the header changed. The body stays transparent on purpose, so an accordion dropped on
+     a coloured surface still sits on that colour rather than punching a hole in it. */
+  --gog-accordion-header-bg: var(--gog-hover-color);
+  --gog-accordion-body-bg: transparent;
   /* Per-size metrics. `lg` is the default size. */
-  --gog-accordion-xsm-padding-y: 4px;
-  --gog-accordion-xsm-padding-x: 8px;
+  --gog-accordion-xsm-padding-y: var(--gog-space-4);
+  --gog-accordion-xsm-padding-x: var(--gog-space-8);
   --gog-accordion-xsm-font-size: var(--gog-text-xs);
   --gog-accordion-xsm-letter-spacing: 0.2px;
-  --gog-accordion-xsm-content-gap: 2px;
+  --gog-accordion-xsm-content-gap: var(--gog-space-2);
   --gog-accordion-xsm-body-font-size: var(--gog-text-xs);
   --gog-accordion-xsm-body-line-height: 1.5;
-  --gog-accordion-xsm-body-padding-top: 4px;
-  --gog-accordion-xsm-body-padding-bottom: 6px;
+  --gog-accordion-xsm-body-padding-top: var(--gog-space-4);
+  --gog-accordion-xsm-body-padding-bottom: var(--gog-space-6);
   --gog-accordion-xsm-chevron-size: 11px;
   --gog-accordion-xsm-chevron-font-size: 10px;
 
-  --gog-accordion-sm-padding-y: 6px;
-  --gog-accordion-sm-padding-x: 10px;
+  --gog-accordion-sm-padding-y: var(--gog-space-6);
+  --gog-accordion-sm-padding-x: var(--gog-space-10);
   --gog-accordion-sm-font-size: var(--gog-text-xs);
   --gog-accordion-sm-letter-spacing: 0.4px;
-  --gog-accordion-sm-content-gap: 2px;
+  --gog-accordion-sm-content-gap: var(--gog-space-2);
   --gog-accordion-sm-body-font-size: var(--gog-text-xs);
   --gog-accordion-sm-body-line-height: var(--gog-accordion-body-line-height);
-  --gog-accordion-sm-body-padding-top: 6px;
-  --gog-accordion-sm-body-padding-bottom: 8px;
+  --gog-accordion-sm-body-padding-top: var(--gog-space-6);
+  --gog-accordion-sm-body-padding-bottom: var(--gog-space-8);
   --gog-accordion-sm-chevron-size: 13px;
   --gog-accordion-sm-chevron-font-size: 12px;
 
-  --gog-accordion-md-padding-y: 10px;
-  --gog-accordion-md-padding-x: 14px;
+  --gog-accordion-md-padding-y: var(--gog-space-10);
+  --gog-accordion-md-padding-x: var(--gog-space-14);
   --gog-accordion-md-font-size: var(--gog-text-xs);
   --gog-accordion-md-letter-spacing: 0.8px;
-  --gog-accordion-md-content-gap: 2px;
+  --gog-accordion-md-content-gap: var(--gog-space-2);
   --gog-accordion-md-body-font-size: var(--gog-text-sm);
   --gog-accordion-md-body-line-height: var(--gog-accordion-body-line-height);
-  --gog-accordion-md-body-padding-top: 8px;
-  --gog-accordion-md-body-padding-bottom: 12px;
+  --gog-accordion-md-body-padding-top: var(--gog-space-8);
+  --gog-accordion-md-body-padding-bottom: var(--gog-space-12);
   --gog-accordion-md-chevron-size: 15px;
   --gog-accordion-md-chevron-font-size: 14px;
 
-  --gog-accordion-lg-padding-y: 14px;
-  --gog-accordion-lg-padding-x: 16px;
+  --gog-accordion-lg-padding-y: var(--gog-space-14);
+  --gog-accordion-lg-padding-x: var(--gog-space-16);
   --gog-accordion-lg-font-size: var(--gog-text-sm);
   --gog-accordion-lg-letter-spacing: 0.8px;
-  --gog-accordion-lg-content-gap: 4px;
+  --gog-accordion-lg-content-gap: var(--gog-space-4);
   --gog-accordion-lg-body-font-size: var(--gog-text-md);
   --gog-accordion-lg-body-line-height: var(--gog-accordion-body-line-height);
-  --gog-accordion-lg-body-padding-top: 12px;
-  --gog-accordion-lg-body-padding-bottom: 16px;
+  --gog-accordion-lg-body-padding-top: var(--gog-space-12);
+  --gog-accordion-lg-body-padding-bottom: var(--gog-space-16);
   --gog-accordion-lg-chevron-size: 18px;
   --gog-accordion-lg-chevron-font-size: 16px;
 
-  --gog-accordion-slg-padding-y: 18px;
-  --gog-accordion-slg-padding-x: 18px;
+  --gog-accordion-slg-padding-y: var(--gog-space-18);
+  --gog-accordion-slg-padding-x: var(--gog-space-18);
   --gog-accordion-slg-font-size: var(--gog-text-md);
   --gog-accordion-slg-letter-spacing: 0.8px;
-  --gog-accordion-slg-content-gap: 4px;
+  --gog-accordion-slg-content-gap: var(--gog-space-4);
   --gog-accordion-slg-body-font-size: var(--gog-text-lg);
   --gog-accordion-slg-body-line-height: var(--gog-accordion-body-line-height);
-  --gog-accordion-slg-body-padding-top: 16px;
-  --gog-accordion-slg-body-padding-bottom: 20px;
+  --gog-accordion-slg-body-padding-top: var(--gog-space-16);
+  --gog-accordion-slg-body-padding-bottom: var(--gog-space-20);
   --gog-accordion-slg-chevron-size: 20px;
   --gog-accordion-slg-chevron-font-size: 18px;
 
@@ -425,113 +524,84 @@
      `--gog-button-bg`, `--gog-button-color`, `--gog-button-border`, `--gog-button-shadow`,
      `--gog-button-hover-bg`, `--gog-button-hover-shadow`, `--gog-button-padding` and
      `--gog-button-font-size` are intentionally NOT declared — they are the per-instance
-     escape hatch the variant/size classes fall back through. Their `--gog-btn-*` spellings
-     are honoured by button.css's own fallback chain until 21.7.0, which is why they are the
-     only `--gog-btn-*` names that do not appear below. */
-  /* The size scale, moved out of the literals-only `:root` block by 21.5.0's rename: each
-     now carries its pre-21.5.0 spelling as a fallback, and a value containing var() has to
-     live here. The literals themselves have not changed. */
-  --gog-button-xsm-padding: var(--gog-btn-xsm-padding, 0.25rem 0.5rem);
-  --gog-button-sm-padding: var(--gog-btn-sm-padding, 0.5rem 0.875rem);
-  --gog-button-md-padding: var(--gog-btn-md-padding, 0.75rem 1.25rem);
-  --gog-button-lg-padding: var(--gog-btn-lg-padding, 1rem 1.5rem);
-  --gog-button-slg-padding: var(--gog-btn-slg-padding, 1.25rem 1.75rem);
-  --gog-button-xsm-font-size: var(--gog-btn-xsm-font-size, 0.75rem);
-  --gog-button-sm-font-size: var(--gog-btn-sm-font-size, 0.875rem);
-  --gog-button-md-font-size: var(--gog-btn-md-font-size, 1rem);
-  --gog-button-lg-font-size: var(--gog-btn-lg-font-size, 1.125rem);
-  --gog-button-slg-font-size: var(--gog-btn-slg-font-size, 1.25rem);
-
-  --gog-button-font-family: var(--gog-btn-font-family, var(--gog-font-heading));
-  --gog-button-font-weight: var(--gog-btn-font-weight, 900);
-  --gog-button-letter-spacing: var(--gog-btn-letter-spacing, 1px);
-  --gog-button-text-transform: var(--gog-btn-text-transform, uppercase);
-  --gog-button-line-height: var(--gog-btn-line-height, 1);
-  --gog-button-gap: var(--gog-btn-gap, var(--gog-space-sm));
-  --gog-button-radius: var(--gog-btn-radius, var(--gog-radius));
-  --gog-button-border-width: var(--gog-btn-border-width, var(--gog-control-border-width));
-  --gog-button-border-style: var(--gog-btn-border-style, var(--gog-control-border-style));
-  --gog-button-transition-duration: var(--gog-btn-transition-duration, var(--gog-duration-base));
-  --gog-button-focus-ring-width: var(--gog-btn-focus-ring-width, var(--gog-focus-ring-width));
-  --gog-button-focus-ring-offset: var(--gog-btn-focus-ring-offset, 3px);
-  --gog-button-active-scale: var(--gog-btn-active-scale, 0.97);
-  --gog-button-disabled-opacity: var(--gog-btn-disabled-opacity, var(--gog-disabled-opacity));
-  --gog-button-loading-opacity: var(--gog-btn-loading-opacity, 0.7);
-  --gog-button-spinner-max-size: var(--gog-btn-spinner-max-size, 70%);
-
-  --gog-button-primary-bg: var(--gog-btn-primary-bg, var(--gog-accent-color));
-  --gog-button-primary-color: var(
-    --gog-btn-primary-color,
-    var(--gog-accent-text-color, var(--gog-primary-color))
-  );
-  --gog-button-primary-border: var(--gog-btn-primary-border, transparent);
-  --gog-button-primary-shadow: var(--gog-btn-primary-shadow, none);
-  --gog-button-primary-hover-bg: var(--gog-btn-primary-hover-bg, var(--gog-accent-bright));
-  --gog-button-primary-hover-color: var(
-    --gog-btn-primary-hover-color,
-    var(--gog-button-primary-color)
-  );
-  --gog-button-primary-hover-shadow: var(
-    --gog-btn-primary-hover-shadow,
-    0 0 16px color-mix(in srgb, var(--gog-accent-bright) 45%, transparent)
-  );
+     escape hatch the variant/size classes fall back through. */
+  --gog-button-xsm-padding: var(--gog-space-4) var(--gog-space-8);
+  --gog-button-sm-padding: var(--gog-space-8) var(--gog-space-14);
+  --gog-button-md-padding: var(--gog-space-12) var(--gog-space-20);
+  --gog-button-lg-padding: var(--gog-space-16) var(--gog-space-24);
+  --gog-button-slg-padding: var(--gog-space-20) var(--gog-space-28);
+  --gog-button-xsm-font-size: 0.75rem;
+  --gog-button-sm-font-size: 0.875rem;
+  --gog-button-md-font-size: 1rem;
+  --gog-button-lg-font-size: 1.125rem;
+  --gog-button-slg-font-size: 1.25rem;
+
+  --gog-button-font-family: var(--gog-font-heading);
+  --gog-button-font-weight: 900;
+  --gog-button-letter-spacing: var(--gog-letter-spacing);
+  --gog-button-text-transform: var(--gog-text-transform);
+  --gog-button-line-height: 1;
+  --gog-button-gap: var(--gog-space-sm);
+  --gog-button-radius: var(--gog-radius);
+  --gog-button-border-width: var(--gog-control-border-width);
+  --gog-button-border-style: var(--gog-control-border-style);
+  --gog-button-transition-duration: var(--gog-duration-base);
+  --gog-button-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-button-focus-ring-offset: 3px;
+  --gog-button-active-scale: 0.97;
+  --gog-button-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-button-loading-opacity: 0.7;
+  --gog-button-spinner-max-size: 70%;
+
+  --gog-button-primary-bg: var(--gog-accent-color);
+  --gog-button-primary-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-button-primary-border: transparent;
+  --gog-button-primary-shadow: none;
+  --gog-button-primary-hover-bg: var(--gog-accent-bright);
+  --gog-button-primary-hover-color: var(--gog-button-primary-color);
+  --gog-button-primary-hover-shadow: 0 0 16px var(--gog-accent-pale);
   /* The label's colour, not the page's. `--gog-text-color` is the colour of text on the page
      background, and a filled button is not the page background — on the dark theme that put pale
      parchment on bright amber, which read as a washed-out spinner beside a near-black label. */
-  --gog-button-primary-spinner-color: var(
-    --gog-btn-primary-spinner-color,
-    var(--gog-button-primary-color)
-  );
-
-  --gog-button-secondary-bg: var(--gog-btn-secondary-bg, var(--gog-secondary-color));
-  --gog-button-secondary-color: var(
-    --gog-btn-secondary-color,
-    var(--gog-accent-text-color, var(--gog-primary-color))
-  );
-  --gog-button-secondary-border: var(--gog-btn-secondary-border, transparent);
-  --gog-button-secondary-shadow: var(--gog-btn-secondary-shadow, none);
-  --gog-button-secondary-hover-bg: var(--gog-btn-secondary-hover-bg, var(--gog-accent-color));
-  --gog-button-secondary-hover-color: var(
-    --gog-btn-secondary-hover-color,
-    var(--gog-button-secondary-color)
-  );
-  --gog-button-secondary-hover-shadow: var(--gog-btn-secondary-hover-shadow, none);
+  --gog-button-primary-spinner-color: var(--gog-button-primary-color);
+
+  --gog-button-secondary-bg: var(--gog-secondary-color);
+  --gog-button-secondary-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-button-secondary-border: transparent;
+  --gog-button-secondary-shadow: none;
+  --gog-button-secondary-hover-bg: var(--gog-accent-color);
+  --gog-button-secondary-hover-color: var(--gog-button-secondary-color);
+  --gog-button-secondary-hover-shadow: none;
   /* Same reasoning as primary: the other filled variant, the same mismatch. */
-  --gog-button-secondary-spinner-color: var(
-    --gog-btn-secondary-spinner-color,
-    var(--gog-button-secondary-color)
-  );
-
-  --gog-button-outline-bg: var(--gog-btn-outline-bg, transparent);
-  --gog-button-outline-color: var(--gog-btn-outline-color, var(--gog-accent-color));
-  --gog-button-outline-border: var(--gog-btn-outline-border, var(--gog-accent-color));
-  --gog-button-outline-shadow: var(--gog-btn-outline-shadow, none);
-  --gog-button-outline-hover-bg: var(--gog-btn-outline-hover-bg, var(--gog-accent-color));
-  --gog-button-outline-hover-color: var(--gog-btn-outline-hover-color, var(--gog-primary-color));
-  --gog-button-outline-hover-shadow: var(--gog-btn-outline-hover-shadow, none);
-  --gog-button-outline-spinner-color: var(--gog-btn-outline-spinner-color, var(--gog-accent-color));
-
-  --gog-button-ghost-bg: var(--gog-btn-ghost-bg, transparent);
-  --gog-button-ghost-color: var(--gog-btn-ghost-color, var(--gog-accent-color));
-  --gog-button-ghost-border: var(--gog-btn-ghost-border, transparent);
-  --gog-button-ghost-shadow: var(--gog-btn-ghost-shadow, none);
-  --gog-button-ghost-hover-bg: var(
-    --gog-btn-ghost-hover-bg,
-    color-mix(in srgb, var(--gog-accent-color) 12%, transparent)
-  );
-  --gog-button-ghost-hover-color: var(--gog-btn-ghost-hover-color, var(--gog-button-ghost-color));
-  --gog-button-ghost-hover-shadow: var(--gog-btn-ghost-hover-shadow, none);
-  --gog-button-ghost-spinner-color: var(--gog-btn-ghost-spinner-color, var(--gog-accent-color));
+  --gog-button-secondary-spinner-color: var(--gog-button-secondary-color);
+
+  --gog-button-outline-bg: transparent;
+  --gog-button-outline-color: var(--gog-accent-color);
+  --gog-button-outline-border: var(--gog-accent-color);
+  --gog-button-outline-shadow: none;
+  --gog-button-outline-hover-bg: var(--gog-accent-color);
+  --gog-button-outline-hover-color: var(--gog-primary-color);
+  --gog-button-outline-hover-shadow: none;
+  --gog-button-outline-spinner-color: var(--gog-accent-color);
+
+  --gog-button-ghost-bg: transparent;
+  --gog-button-ghost-color: var(--gog-accent-color);
+  --gog-button-ghost-border: transparent;
+  --gog-button-ghost-shadow: none;
+  --gog-button-ghost-hover-bg: var(--gog-hover-color);
+  --gog-button-ghost-hover-color: var(--gog-button-ghost-color);
+  --gog-button-ghost-hover-shadow: none;
+  --gog-button-ghost-spinner-color: var(--gog-accent-color);
 
   /* ── Button toggle group ───────────────────────────────────────────────────
      `--gog-button-toggle-bg`, `-color`, `-padding` and `-font-size` are intentionally NOT
      declared — they are the per-instance escape hatch the size classes fall back through.
-     Padding/font-size reuse the `--gog-btn-<size>-*` scale so a toggle group and a
+     Padding/font-size reuse the `--gog-button-<size>-*` scale so a toggle group and a
      `<gog-button>` at the same `size` line up in a toolbar. */
   --gog-button-toggle-font-family: var(--gog-font-heading);
   --gog-button-toggle-font-weight: 700;
   --gog-button-toggle-letter-spacing: 0.5px;
-  --gog-button-toggle-text-transform: uppercase;
+  --gog-button-toggle-text-transform: var(--gog-text-transform);
   --gog-button-toggle-line-height: 1;
   --gog-button-toggle-gap: var(--gog-space-sm);
   --gog-button-toggle-icon-size: 1.1em;
@@ -559,14 +629,14 @@
   /* Caps the host at its month grid instead of letting the header spread to the container.
      `100%` restores the pre-21.5.0 full-width behaviour. */
   --gog-calendar-max-width: max-content;
-  --gog-calendar-padding: 12px;
-  --gog-calendar-header-gap: 4px;
+  --gog-calendar-padding: var(--gog-space-12);
+  --gog-calendar-header-gap: var(--gog-space-4);
   --gog-calendar-header-margin: 8px;
-  --gog-calendar-months-gap: 16px;
+  --gog-calendar-months-gap: var(--gog-space-16);
   --gog-calendar-title-color: var(--gog-text-color);
   --gog-calendar-title-font-weight: 700;
   --gog-calendar-nav-size: 28px;
-  --gog-calendar-nav-radius: 6px;
+  --gog-calendar-nav-radius: calc(var(--gog-radius) - 2px);
   --gog-calendar-nav-bg: transparent;
   --gog-calendar-nav-color: var(--gog-muted-text-color);
   --gog-calendar-nav-hover-bg: var(--gog-hover-color);
@@ -574,14 +644,14 @@
   --gog-calendar-nav-icon-size: 0.8rem;
   /* Pulls the two chevrons of a year step together so they read as one control. */
   --gog-calendar-nav-icon-overlap: -0.35em;
-  --gog-calendar-weekday-padding: 4px 0;
+  --gog-calendar-weekday-padding: var(--gog-space-4) 0;
   --gog-calendar-weekday-color: var(--gog-muted-text-color);
   --gog-calendar-weekday-font-size: var(--gog-text-xs);
   --gog-calendar-weekday-font-weight: 600;
-  --gog-calendar-weekday-text-transform: uppercase;
-  --gog-calendar-day-radius: 6px;
-  --gog-calendar-day-border-width: 1px;
-  --gog-calendar-day-border-style: solid;
+  --gog-calendar-weekday-text-transform: var(--gog-text-transform);
+  --gog-calendar-day-radius: calc(var(--gog-radius) - 2px);
+  --gog-calendar-day-border-width: var(--gog-border-width);
+  --gog-calendar-day-border-style: var(--gog-border-style);
   --gog-calendar-day-rest-bg: transparent;
   --gog-calendar-day-rest-color: var(--gog-text-color);
   --gog-calendar-day-hover-bg: var(--gog-hover-color);
@@ -593,7 +663,7 @@
   --gog-calendar-selected-font-weight: 700;
   /* The wash between the two ends of a range: same hue, low enough to read as a band rather
      than as a second selection. */
-  --gog-calendar-range-bg: color-mix(in srgb, var(--gog-accent-color) 16%, transparent);
+  --gog-calendar-range-bg: var(--gog-accent-pale);
   --gog-calendar-range-color: var(--gog-text-color);
   --gog-calendar-disabled-opacity: var(--gog-disabled-opacity);
   --gog-calendar-transition-duration: var(--gog-duration-fast);
@@ -603,13 +673,13 @@
   --gog-calendar-divider-width: 1px;
   --gog-calendar-divider-style: solid;
   --gog-calendar-divider-color: var(--gog-border-color);
-  --gog-calendar-time-gap: 6px;
+  --gog-calendar-time-gap: var(--gog-space-6);
   --gog-calendar-time-margin: 10px;
   --gog-calendar-time-input-width: 3.5rem;
-  --gog-calendar-time-input-padding: 4px 6px;
+  --gog-calendar-time-input-padding: var(--gog-space-4) var(--gog-space-6);
   --gog-calendar-time-input-bg: var(--gog-background-color);
-  --gog-calendar-action-padding: 4px 10px;
-  --gog-calendar-footer-gap: 8px;
+  --gog-calendar-action-padding: var(--gog-space-4) var(--gog-space-10);
+  --gog-calendar-footer-gap: var(--gog-space-8);
   --gog-calendar-xsm-font-size: var(--gog-text-xs);
   --gog-calendar-xsm-day-size: 24px;
   --gog-calendar-sm-font-size: var(--gog-text-sm);
@@ -641,17 +711,17 @@
   --gog-card-outlined-bg: var(--gog-surface-color);
   --gog-card-outlined-border-color: var(--gog-border-color);
   --gog-card-outlined-shadow: none;
-  --gog-card-elevated-bg: var(--gog-surface-color);
+  --gog-card-elevated-bg: var(--gog-elevated-surface-color);
   --gog-card-elevated-border-color: transparent;
   /* The shared surface shadow, so a card sits at the same elevation as a dialog or a
      dropdown panel instead of inventing a second house style for "raised". */
   --gog-card-elevated-shadow: var(--gog-panel-shadow);
-  --gog-card-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
+  --gog-card-filled-bg: var(--gog-accent-pale);
   --gog-card-filled-border-color: transparent;
   --gog-card-filled-shadow: none;
 
   /* Hover and focus only ever show on a card that holds a `gogCardLink`. */
-  --gog-card-hover-border-color: color-mix(in srgb, var(--gog-accent-color) 45%, transparent);
+  --gog-card-hover-border-color: var(--gog-accent-dim);
   --gog-card-hover-shadow: var(--gog-panel-shadow);
   --gog-card-focus-ring: var(--gog-accent-color);
   --gog-card-focus-ring-width: var(--gog-focus-ring-width);
@@ -662,27 +732,27 @@
   --gog-card-footer-gap: var(--gog-space-sm);
   --gog-card-footer-padding-top: var(--gog-space-sm);
 
-  --gog-card-xsm-padding-y: 8px;
-  --gog-card-xsm-padding-x: 10px;
-  --gog-card-xsm-gap: 6px;
-  --gog-card-sm-padding-y: 12px;
-  --gog-card-sm-padding-x: 14px;
+  --gog-card-xsm-padding-y: var(--gog-space-8);
+  --gog-card-xsm-padding-x: var(--gog-space-10);
+  --gog-card-xsm-gap: var(--gog-space-6);
+  --gog-card-sm-padding-y: var(--gog-space-12);
+  --gog-card-sm-padding-x: var(--gog-space-14);
   --gog-card-sm-gap: var(--gog-space-sm);
   --gog-card-md-padding-y: var(--gog-space-md);
-  --gog-card-md-padding-x: 20px;
-  --gog-card-md-gap: 12px;
-  --gog-card-lg-padding-y: 20px;
+  --gog-card-md-padding-x: var(--gog-space-20);
+  --gog-card-md-gap: var(--gog-space-12);
+  --gog-card-lg-padding-y: var(--gog-space-20);
   --gog-card-lg-padding-x: var(--gog-space-lg);
-  --gog-card-lg-gap: 14px;
-  --gog-card-slg-padding-y: 28px;
-  --gog-card-slg-padding-x: 32px;
+  --gog-card-lg-gap: var(--gog-space-14);
+  --gog-card-slg-padding-y: var(--gog-space-28);
+  --gog-card-slg-padding-x: var(--gog-space-32);
   --gog-card-slg-gap: var(--gog-space-md);
 
   /* ── Checkbox ──────────────────────────────────────────────────────────────
      Box/label/icon size and padding come from the `--gog-control-checkbox-*` scale;
      checkbox.component.ts maps the `size` input onto the host. */
   --gog-checkbox-font-family: var(--gog-font-body);
-  --gog-checkbox-gap: 10px;
+  --gog-checkbox-gap: var(--gog-space-10);
   --gog-checkbox-radius: var(--gog-radius);
   --gog-checkbox-border-width: var(--gog-control-border-width);
   --gog-checkbox-border-style: var(--gog-control-border-style);
@@ -693,7 +763,7 @@
   --gog-checkbox-icon-color: var(--gog-accent-text-color, var(--gog-primary-color));
   --gog-checkbox-label-color: var(--gog-muted-text-color);
   --gog-checkbox-label-line-height: 1.3;
-  --gog-checkbox-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+  --gog-checkbox-focus-ring: var(--gog-accent-pale);
   --gog-checkbox-focus-ring-width: var(--gog-focus-ring-width);
   --gog-checkbox-focus-ring-offset: var(--gog-focus-ring-offset);
   --gog-checkbox-disabled-opacity: var(--gog-disabled-opacity);
@@ -706,12 +776,12 @@
      Box/label size reuse the `--gog-control-checkbox-*` scale (see Checkbox above);
      radio-group.component.ts maps the `size` input onto the host the same way. */
   --gog-radio-font-family: var(--gog-font-body);
-  --gog-radio-group-gap: 10px;
+  --gog-radio-group-gap: var(--gog-space-10);
   --gog-radio-group-label-size: var(--gog-text-sm);
   --gog-radio-group-label-color: var(--gog-muted-text-color);
-  --gog-radio-group-option-gap: 8px;
-  --gog-radio-group-option-gap-horizontal: 20px;
-  --gog-radio-gap: 10px;
+  --gog-radio-group-option-gap: var(--gog-space-8);
+  --gog-radio-group-option-gap-horizontal: var(--gog-space-20);
+  --gog-radio-gap: var(--gog-space-10);
   --gog-radio-border-width: var(--gog-control-border-width);
   --gog-radio-border-style: var(--gog-control-border-style);
   --gog-radio-border-color: var(--gog-accent-dim);
@@ -722,7 +792,7 @@
   --gog-radio-dot-size-ratio: 0.45;
   --gog-radio-label-color: var(--gog-muted-text-color);
   --gog-radio-label-line-height: 1.3;
-  --gog-radio-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+  --gog-radio-focus-ring: var(--gog-accent-pale);
   --gog-radio-focus-ring-width: var(--gog-focus-ring-width);
   --gog-radio-focus-ring-offset: var(--gog-focus-ring-offset);
   --gog-radio-disabled-opacity: var(--gog-disabled-opacity);
@@ -735,11 +805,11 @@
      `--gog-chip-font-size`/`-padding-*`/`-gap`/`-avatar-size`/`-icon-size`/
      `-remove-size` are left undeclared as the per-instance escape hatch. */
   --gog-chip-font-family: inherit;
-  --gog-chip-bg: color-mix(in srgb, var(--gog-surface-color) 88%, var(--gog-hover-color));
-  --gog-chip-hover-bg: color-mix(in srgb, var(--gog-hover-color) 45%, var(--gog-surface-color));
+  --gog-chip-bg: var(--gog-surface-color);
+  --gog-chip-hover-bg: var(--gog-hover-color);
   --gog-chip-border: var(--gog-border-color);
-  --gog-chip-border-width: 1px;
-  --gog-chip-border-style: solid;
+  --gog-chip-border-width: var(--gog-border-width);
+  --gog-chip-border-style: var(--gog-border-style);
   --gog-chip-color: var(--gog-text-color);
   --gog-chip-font-weight: 500;
   --gog-chip-line-height: 1.2;
@@ -755,41 +825,41 @@
   --gog-chip-focus-ring-offset: var(--gog-focus-ring-offset);
 
   --gog-chip-xsm-font-size: 0.6875rem;
-  --gog-chip-xsm-padding-block: 0.225rem;
-  --gog-chip-xsm-padding-inline: 0.375rem;
-  --gog-chip-xsm-gap: 0.275rem;
+  --gog-chip-xsm-padding-block: var(--gog-space-4);
+  --gog-chip-xsm-padding-inline: var(--gog-space-6);
+  --gog-chip-xsm-gap: var(--gog-space-4);
   --gog-chip-xsm-avatar-size: 0.875rem;
   --gog-chip-xsm-icon-size: 0.6875rem;
   --gog-chip-xsm-remove-size: 0.75rem;
 
   --gog-chip-sm-font-size: 0.75rem;
-  --gog-chip-sm-padding-block: 0.3rem;
-  --gog-chip-sm-padding-inline: 0.5rem;
-  --gog-chip-sm-gap: 0.375rem;
+  --gog-chip-sm-padding-block: var(--gog-space-4);
+  --gog-chip-sm-padding-inline: var(--gog-space-8);
+  --gog-chip-sm-gap: var(--gog-space-6);
   --gog-chip-sm-avatar-size: 1rem;
   --gog-chip-sm-icon-size: 0.75rem;
   --gog-chip-sm-remove-size: 0.875rem;
 
   --gog-chip-md-font-size: 0.875rem;
-  --gog-chip-md-padding-block: 0.45rem;
-  --gog-chip-md-padding-inline: 0.75rem;
-  --gog-chip-md-gap: 0.5rem;
+  --gog-chip-md-padding-block: var(--gog-space-8);
+  --gog-chip-md-padding-inline: var(--gog-space-12);
+  --gog-chip-md-gap: var(--gog-space-8);
   --gog-chip-md-avatar-size: 1.25rem;
   --gog-chip-md-icon-size: 0.875rem;
   --gog-chip-md-remove-size: 1rem;
 
   --gog-chip-lg-font-size: 1rem;
-  --gog-chip-lg-padding-block: 0.6rem;
-  --gog-chip-lg-padding-inline: 0.875rem;
-  --gog-chip-lg-gap: 0.625rem;
+  --gog-chip-lg-padding-block: var(--gog-space-10);
+  --gog-chip-lg-padding-inline: var(--gog-space-14);
+  --gog-chip-lg-gap: var(--gog-space-10);
   --gog-chip-lg-avatar-size: 1.5rem;
   --gog-chip-lg-icon-size: 1rem;
   --gog-chip-lg-remove-size: 1.125rem;
 
   --gog-chip-slg-font-size: 1.125rem;
-  --gog-chip-slg-padding-block: 0.75rem;
-  --gog-chip-slg-padding-inline: 1rem;
-  --gog-chip-slg-gap: 0.75rem;
+  --gog-chip-slg-padding-block: var(--gog-space-12);
+  --gog-chip-slg-padding-inline: var(--gog-space-16);
+  --gog-chip-slg-gap: var(--gog-space-12);
   --gog-chip-slg-avatar-size: 1.75rem;
   --gog-chip-slg-icon-size: 1.125rem;
   --gog-chip-slg-remove-size: 1.25rem;
@@ -813,32 +883,29 @@
   --gog-dialog-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
   --gog-dialog-min-width: 320px;
   --gog-dialog-max-height: 90vh;
-  --gog-dialog-header-padding: 16px 20px 14px;
-  --gog-dialog-header-gap: 12px;
+  --gog-dialog-header-padding: var(--gog-space-16) var(--gog-space-20) var(--gog-space-14);
+  --gog-dialog-header-gap: var(--gog-space-12);
   --gog-dialog-header-border-color: var(--gog-border-color);
-  --gog-dialog-body-padding: 20px;
+  --gog-dialog-body-padding: var(--gog-space-20);
   --gog-dialog-body-max-height: calc(var(--gog-dialog-max-height) - 60px);
   --gog-dialog-close-size: 2rem;
   --gog-dialog-close-font-size: 0.875rem;
   --gog-dialog-close-color: var(--gog-muted-text-color);
   --gog-dialog-close-hover-color: var(--gog-text-color);
-  --gog-dialog-close-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
+  --gog-dialog-close-hover-bg: var(--gog-hover-color);
   --gog-dialog-close-hover-border: var(--gog-border-color);
   --gog-dialog-close-focus-ring: var(--gog-accent-color);
   --gog-dialog-close-focus-ring-width: var(--gog-focus-ring-width);
   --gog-dialog-close-focus-ring-offset: var(--gog-focus-ring-offset);
 
   /* Confirmation dialog */
-  --gog-confirmation-dialog-gap: var(--gog-confirm-gap, 12px);
-  --gog-confirmation-dialog-min-width: var(--gog-confirm-min-width, 320px);
-  --gog-confirmation-dialog-max-width: var(--gog-confirm-max-width, 440px);
-  --gog-confirmation-dialog-color: var(--gog-confirm-color, var(--gog-text-color));
-  --gog-confirmation-dialog-description-color: var(
-    --gog-confirm-description-color,
-    var(--gog-muted-text-color)
-  );
-  --gog-confirmation-dialog-actions-gap: var(--gog-confirm-actions-gap, var(--gog-space-sm));
-  --gog-confirmation-dialog-actions-offset: var(--gog-confirm-actions-offset, var(--gog-space-sm));
+  --gog-confirmation-dialog-gap: var(--gog-space-12);
+  --gog-confirmation-dialog-min-width: 320px;
+  --gog-confirmation-dialog-max-width: 440px;
+  --gog-confirmation-dialog-color: var(--gog-text-color);
+  --gog-confirmation-dialog-description-color: var(--gog-muted-text-color);
+  --gog-confirmation-dialog-actions-gap: var(--gog-space-sm);
+  --gog-confirmation-dialog-actions-offset: var(--gog-space-sm);
 
   /* ── Autocomplete ──────────────────────────────────────────────────────────
      A combobox whose trigger is a real text input. Padding/font-size reuse the shared
@@ -848,12 +915,12 @@
      back through. */
   --gog-autocomplete-font-family: var(--gog-font-body);
   --gog-autocomplete-label-font-family: var(--gog-font-heading);
-  --gog-autocomplete-gap: 4px;
+  --gog-autocomplete-gap: var(--gog-space-4);
   --gog-autocomplete-label-color: var(--gog-accent-color);
   --gog-autocomplete-label-font-size: var(--gog-text-sm);
   --gog-autocomplete-label-font-weight: 600;
-  --gog-autocomplete-label-letter-spacing: 1px;
-  --gog-autocomplete-label-text-transform: uppercase;
+  --gog-autocomplete-label-letter-spacing: var(--gog-letter-spacing);
+  --gog-autocomplete-label-text-transform: var(--gog-text-transform);
   --gog-autocomplete-field-bg: var(--gog-surface-color);
   --gog-autocomplete-text-color: var(--gog-text-color);
   --gog-autocomplete-placeholder-color: var(--gog-muted-text-color);
@@ -877,7 +944,7 @@
   /* Trailing chrome: spinner and clear button, clear outermost — the arrangement the other
      dropdowns settled on, so all of them line up in a form. */
   --gog-autocomplete-actions-inset: var(--gog-control-icon-offset);
-  --gog-autocomplete-actions-gap: 6px;
+  --gog-autocomplete-actions-gap: var(--gog-space-6);
   /* Right padding on the input, reserving room for the actions above. */
   --gog-autocomplete-actions-reserve: 40px;
   --gog-autocomplete-clear-color: var(--gog-autocomplete-placeholder-color);
@@ -891,22 +958,18 @@
   --gog-autocomplete-panel-border-style: var(--gog-panel-border-style);
   --gog-autocomplete-panel-border-color: var(--gog-border-color);
   --gog-autocomplete-panel-radius: var(--gog-radius);
-  --gog-autocomplete-panel-gap: 2px;
+  --gog-autocomplete-panel-gap: var(--gog-space-2);
   --gog-autocomplete-panel-max-height: 260px;
   /* Ceiling for a content-sized panel, so one very long option cannot span the viewport. */
   --gog-autocomplete-panel-max-width: 420px;
-  --gog-autocomplete-options-padding: 4px;
-  --gog-autocomplete-option-padding: 8px 10px;
-  --gog-autocomplete-option-radius: 4px;
-  --gog-autocomplete-option-gap: 10px;
+  --gog-autocomplete-options-padding: var(--gog-space-4);
+  --gog-autocomplete-option-padding: var(--gog-space-8) var(--gog-space-10);
+  --gog-autocomplete-option-radius: calc(var(--gog-radius) - 4px);
+  --gog-autocomplete-option-gap: var(--gog-space-10);
   --gog-autocomplete-option-color: var(--gog-text-color);
-  --gog-autocomplete-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
+  --gog-autocomplete-option-hover-bg: var(--gog-hover-color);
   --gog-autocomplete-option-hover-color: var(--gog-text-color);
-  --gog-autocomplete-option-selected-bg: color-mix(
-    in srgb,
-    var(--gog-accent-color) 16%,
-    transparent
-  );
+  --gog-autocomplete-option-selected-bg: var(--gog-accent-pale);
   --gog-autocomplete-option-selected-color: var(--gog-accent-color);
   /* Estimated row height fed into the panel's up/down placement math; not itself a real
      layout property, so it has no effect unless the JS reads it. */
@@ -927,12 +990,12 @@
      sideways only. */
   --gog-badge-size: 1.25rem;
   --gog-badge-dot-size: 0.5rem;
-  --gog-badge-padding-inline: 5px;
+  --gog-badge-padding-inline: var(--gog-space-4);
   --gog-badge-radius: 999px;
   /* How far the badge hangs outside its host's corner. */
   --gog-badge-offset: 6px;
   --gog-badge-border-width: 0;
-  --gog-badge-border-style: solid;
+  --gog-badge-border-style: var(--gog-border-style);
   --gog-badge-border-color: transparent;
   /* Above the host's own chrome but below any overlay panel (--gog-dropdown-z is 300). */
   --gog-badge-z: 1;
@@ -953,11 +1016,11 @@
      back through. */
   --gog-datepicker-font-family: var(--gog-font-body);
   --gog-datepicker-label-font-family: var(--gog-font-heading);
-  --gog-datepicker-gap: 4px;
+  --gog-datepicker-gap: var(--gog-space-4);
   --gog-datepicker-label-color: var(--gog-accent-color);
   --gog-datepicker-label-font-size: var(--gog-text-sm);
-  --gog-datepicker-label-letter-spacing: 1px;
-  --gog-datepicker-label-text-transform: uppercase;
+  --gog-datepicker-label-letter-spacing: var(--gog-letter-spacing);
+  --gog-datepicker-label-text-transform: var(--gog-text-transform);
   --gog-datepicker-field-bg: var(--gog-surface-color);
   --gog-datepicker-text-color: var(--gog-text-color);
   --gog-datepicker-placeholder-color: var(--gog-muted-text-color);
@@ -978,7 +1041,7 @@
   --gog-datepicker-error-font-size: var(--gog-text-xs);
   --gog-datepicker-min-width: 150px;
   --gog-datepicker-actions-inset: var(--gog-control-icon-offset);
-  --gog-datepicker-actions-gap: 6px;
+  --gog-datepicker-actions-gap: var(--gog-space-6);
   /* Right padding on the input, reserving room for the calendar and clear buttons. */
   --gog-datepicker-actions-reserve: 40px;
   --gog-datepicker-icon-color: var(--gog-accent-color);
@@ -992,7 +1055,7 @@
   --gog-datepicker-panel-border-style: var(--gog-panel-border-style);
   --gog-datepicker-panel-border-color: var(--gog-border-color);
   --gog-datepicker-panel-radius: var(--gog-radius);
-  --gog-datepicker-panel-gap: 2px;
+  --gog-datepicker-panel-gap: var(--gog-space-2);
   /* The dropdown surface. Inline mode is `gog-calendar` itself, so it sizes from
      `--gog-calendar-max-width` rather than from this. */
   --gog-datepicker-panel-width: max-content;
@@ -1028,11 +1091,11 @@
   /* ── Input field ───────────────────────────────────────────────────────────── */
   --gog-input-font-family: var(--gog-font-body);
   --gog-input-label-font-family: var(--gog-font-heading);
-  --gog-input-gap: 4px;
+  --gog-input-gap: var(--gog-space-4);
   --gog-input-label-color: var(--gog-accent-color);
   --gog-input-label-font-size: var(--gog-text-sm);
-  --gog-input-label-letter-spacing: 1px;
-  --gog-input-label-text-transform: uppercase;
+  --gog-input-label-letter-spacing: var(--gog-letter-spacing);
+  --gog-input-label-text-transform: var(--gog-text-transform);
   --gog-input-field-bg: var(--gog-surface-color);
   --gog-input-field-border: var(--gog-accent-dim);
   --gog-input-field-border-width: var(--gog-control-border-width);
@@ -1041,7 +1104,7 @@
   --gog-input-field-color: var(--gog-text-color);
   --gog-input-placeholder-color: var(--gog-muted-text-color);
   --gog-input-focus-border: var(--gog-accent-color);
-  --gog-input-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+  --gog-input-focus-ring: var(--gog-accent-pale);
   --gog-input-focus-glow: 0 0 8px var(--gog-input-focus-ring);
   --gog-input-focus-ring-width: var(--gog-focus-ring-width);
   --gog-input-focus-ring-offset: var(--gog-focus-ring-offset);
@@ -1050,11 +1113,11 @@
   --gog-input-error-offset: 2px;
   --gog-input-icon-color: var(--gog-muted-text-color);
   --gog-input-icon-hover-color: var(--gog-accent-color);
-  --gog-input-icon-action-radius: 4px;
+  --gog-input-icon-action-radius: calc(var(--gog-radius) - 4px);
   --gog-input-icon-focus-ring-width: 2px;
   /* Number field's spin buttons — a subtle fill on hover, since they sit flush against the
      field's own border rather than floating with their own padding like the other icons. */
-  --gog-input-spin-hover-bg: color-mix(in srgb, var(--gog-input-icon-hover-color) 12%, transparent);
+  --gog-input-spin-hover-bg: var(--gog-hover-color);
   --gog-input-disabled-opacity: var(--gog-disabled-opacity);
   --gog-input-transition-duration: var(--gog-duration-base);
   /* Float label — also used by gog-textarea, which shares the --gog-input-* block. */
@@ -1074,7 +1137,7 @@
   --gog-textarea-resize-grip-color: var(--gog-input-field-border);
   --gog-textarea-resize-grip-opacity: 0.8;
   --gog-textarea-resize-grip-stripe-width: 1.5px;
-  --gog-textarea-resize-grip-stripe-gap: 3px;
+  --gog-textarea-resize-grip-stripe-gap: var(--gog-space-2);
   --gog-textarea-resize-grip-offset: 3px;
   /*
      Both default to 0 and are overwritten per instance, as an inline style on the field, from
@@ -1101,149 +1164,87 @@
   --gog-input-float-label-over-gap: var(--gog-field-float-label-over-gap);
   --gog-input-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
 
-  /* ── Multiselect ─────────────────────────────────────────────────────────────
-     `--gog-ms-*` was the pre-21.3.0 spelling and sits in each token's fallback, so an
-     existing override of it still feeds the component — see the header's note on the
-     pre-21.5.0 spellings for why it is a fallback rather than a second declaration.
-     Until 21.5.0 these were two declarations per token, which had that bug.
-     @deprecated since 21.3.0 (2026-08-07) — use `--gog-multiselect-*`. Removed in 21.7.0. */
-  --gog-multiselect-font-family: var(--gog-ms-font-family, var(--gog-font-body));
-  --gog-multiselect-label-font-family: var(--gog-ms-label-font-family, var(--gog-font-heading));
-  --gog-multiselect-gap: var(--gog-ms-gap, 4px);
-  --gog-multiselect-option-gap: var(--gog-ms-option-gap, 4px);
-  --gog-multiselect-options-padding: var(--gog-ms-options-padding, 4px);
-  --gog-multiselect-label-color: var(--gog-ms-label-color, var(--gog-accent-color));
-  --gog-multiselect-label-font-size: var(--gog-ms-label-font-size, var(--gog-text-sm));
-  --gog-multiselect-label-letter-spacing: var(--gog-ms-label-letter-spacing, 1px);
-  --gog-multiselect-label-text-transform: var(--gog-ms-label-text-transform, uppercase);
-  --gog-multiselect-field-bg: var(--gog-ms-field-bg, var(--gog-surface-color));
-  --gog-multiselect-field-border: var(--gog-ms-field-border, var(--gog-accent-dim));
-  --gog-multiselect-field-border-width: var(
-    --gog-ms-field-border-width,
-    var(--gog-control-border-width)
-  );
-  --gog-multiselect-field-border-style: var(
-    --gog-ms-field-border-style,
-    var(--gog-control-border-style)
-  );
-  --gog-multiselect-radius: var(--gog-ms-radius, var(--gog-radius));
-  --gog-multiselect-field-color: var(--gog-ms-field-color, var(--gog-text-color));
-  --gog-multiselect-value-color: var(--gog-ms-value-color, var(--gog-text-color));
-  --gog-multiselect-placeholder-color: var(--gog-ms-placeholder-color, var(--gog-muted-text-color));
-  --gog-multiselect-focus-border: var(--gog-ms-focus-border, var(--gog-accent-color));
-  --gog-multiselect-focus-ring: var(
-    --gog-ms-focus-ring,
-    color-mix(in srgb, var(--gog-accent-color) 25%, transparent)
-  );
-  --gog-multiselect-focus-glow: var(--gog-ms-focus-glow, 0 0 8px var(--gog-ms-focus-ring));
-  --gog-multiselect-focus-ring-width: var(--gog-ms-focus-ring-width, var(--gog-focus-ring-width));
-  --gog-multiselect-focus-ring-offset: var(
-    --gog-ms-focus-ring-offset,
-    var(--gog-focus-ring-offset)
-  );
-  --gog-multiselect-error-color: var(--gog-ms-error-color, var(--gog-danger-color));
-  --gog-multiselect-error-font-size: var(--gog-ms-error-font-size, var(--gog-text-xs));
-  --gog-multiselect-error-offset: var(--gog-ms-error-offset, 2px);
-  --gog-multiselect-border-color: var(--gog-ms-border-color, var(--gog-accent-color));
-  --gog-multiselect-panel-bg: var(--gog-ms-panel-bg, var(--gog-surface-color));
-  --gog-multiselect-panel-border: var(--gog-ms-panel-border, var(--gog-accent-color));
-  --gog-multiselect-panel-shadow: var(--gog-ms-panel-shadow, var(--gog-panel-shadow));
-  --gog-multiselect-panel-max-height: var(--gog-ms-panel-max-height, 260px);
-  --gog-multiselect-panel-offset: var(--gog-ms-panel-offset, 2px);
-  --gog-multiselect-option-hover-bg: var(
-    --gog-ms-option-hover-bg,
-    color-mix(in srgb, var(--gog-accent-color) 10%, transparent)
-  );
-  --gog-multiselect-option-color: var(--gog-ms-option-color, var(--gog-text-color));
-  --gog-multiselect-option-gap-inline: var(--gog-ms-option-gap-inline, 10px);
+  /* ── Multiselect ───────────────────────────────────────────────────────────── */
+  --gog-multiselect-font-family: var(--gog-font-body);
+  --gog-multiselect-label-font-family: var(--gog-font-heading);
+  --gog-multiselect-gap: var(--gog-space-4);
+  --gog-multiselect-option-gap: var(--gog-space-4);
+  --gog-multiselect-options-padding: var(--gog-space-4);
+  --gog-multiselect-label-color: var(--gog-accent-color);
+  --gog-multiselect-label-font-size: var(--gog-text-sm);
+  --gog-multiselect-label-letter-spacing: var(--gog-letter-spacing);
+  --gog-multiselect-label-text-transform: var(--gog-text-transform);
+  --gog-multiselect-field-bg: var(--gog-surface-color);
+  --gog-multiselect-field-border: var(--gog-accent-dim);
+  --gog-multiselect-field-border-width: var(--gog-control-border-width);
+  --gog-multiselect-field-border-style: var(--gog-control-border-style);
+  --gog-multiselect-radius: var(--gog-radius);
+  --gog-multiselect-field-color: var(--gog-text-color);
+  --gog-multiselect-value-color: var(--gog-text-color);
+  --gog-multiselect-placeholder-color: var(--gog-muted-text-color);
+  --gog-multiselect-focus-border: var(--gog-accent-color);
+  --gog-multiselect-focus-ring: var(--gog-accent-pale);
+  --gog-multiselect-focus-glow: 0 0 8px var(--gog-multiselect-focus-ring);
+  --gog-multiselect-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-multiselect-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-multiselect-error-color: var(--gog-danger-color);
+  --gog-multiselect-error-font-size: var(--gog-text-xs);
+  --gog-multiselect-error-offset: 2px;
+  --gog-multiselect-border-color: var(--gog-accent-color);
+  --gog-multiselect-panel-bg: var(--gog-surface-color);
+  --gog-multiselect-panel-border: var(--gog-accent-color);
+  --gog-multiselect-panel-shadow: var(--gog-panel-shadow);
+  --gog-multiselect-panel-max-height: 260px;
+  --gog-multiselect-panel-offset: 2px;
+  --gog-multiselect-option-hover-bg: var(--gog-hover-color);
+  --gog-multiselect-option-color: var(--gog-text-color);
+  --gog-multiselect-option-gap-inline: var(--gog-space-10);
   /* Estimated row height fed into the panel's up/down placement math; not itself a real
      layout property, so it has no effect unless the JS reads it. */
-  --gog-multiselect-option-height: var(--gog-ms-option-height, 40px);
-  --gog-multiselect-option-radius: var(--gog-ms-option-radius, calc(var(--gog-radius) - 2px));
-  --gog-multiselect-option-disabled-opacity: var(--gog-ms-option-disabled-opacity, 0.5);
-  --gog-multiselect-option-transition-duration: var(
-    --gog-ms-option-transition-duration,
-    var(--gog-duration-fast)
-  );
-  --gog-multiselect-checkbox-border: var(--gog-ms-checkbox-border, var(--gog-accent-dim));
-  --gog-multiselect-checkbox-bg: var(--gog-ms-checkbox-bg, var(--gog-background-color));
-  --gog-multiselect-checkbox-checked-bg: var(--gog-ms-checkbox-checked-bg, var(--gog-accent-color));
-  --gog-multiselect-checkbox-checked-color: var(
-    --gog-ms-checkbox-checked-color,
-    var(--gog-primary-color)
-  );
-  --gog-multiselect-controls-gap: var(--gog-ms-controls-gap, 4px);
-  --gog-multiselect-controls-padding: var(--gog-ms-controls-padding, 6px 10px);
-  --gog-multiselect-actions-gap: var(--gog-ms-actions-gap, 6px);
-  --gog-multiselect-filter-padding: var(--gog-ms-filter-padding, 6px);
-  --gog-multiselect-filter-input-padding-y: var(--gog-ms-filter-input-padding-y, 6px);
-  --gog-multiselect-filter-input-padding-x: var(--gog-ms-filter-input-padding-x, 8px);
-  --gog-multiselect-filter-input-bg: var(--gog-ms-filter-input-bg, var(--gog-background-color));
-  --gog-multiselect-filter-input-color: var(
-    --gog-ms-filter-input-color,
-    var(--gog-multiselect-control-color)
-  );
-  --gog-multiselect-filter-input-border: var(
-    --gog-ms-filter-input-border,
-    var(--gog-multiselect-control-border)
-  );
-  --gog-multiselect-filter-input-radius: var(--gog-ms-filter-input-radius, var(--gog-radius));
-  --gog-multiselect-filter-border-width: var(
-    --gog-ms-filter-border-width,
-    var(--gog-panel-border-width)
-  );
-  --gog-multiselect-filter-border-style: var(
-    --gog-ms-filter-border-style,
-    var(--gog-panel-border-style)
-  );
-  --gog-multiselect-filter-border-color: var(--gog-ms-filter-border-color, var(--gog-border-color));
-  --gog-multiselect-filter-empty-padding: var(--gog-ms-filter-empty-padding, 10px);
-  --gog-multiselect-filter-empty-color: var(
-    --gog-ms-filter-empty-color,
-    var(--gog-multiselect-placeholder-color)
-  );
+  --gog-multiselect-option-height: 40px;
+  --gog-multiselect-option-radius: calc(var(--gog-radius) - 2px);
+  --gog-multiselect-option-disabled-opacity: 0.5;
+  --gog-multiselect-option-transition-duration: var(--gog-duration-fast);
+  --gog-multiselect-checkbox-border: var(--gog-accent-dim);
+  --gog-multiselect-checkbox-bg: var(--gog-background-color);
+  --gog-multiselect-checkbox-checked-bg: var(--gog-accent-color);
+  --gog-multiselect-checkbox-checked-color: var(--gog-primary-color);
+  --gog-multiselect-controls-gap: var(--gog-space-4);
+  --gog-multiselect-controls-padding: var(--gog-space-6) var(--gog-space-10);
+  --gog-multiselect-actions-gap: var(--gog-space-6);
+  --gog-multiselect-filter-padding: var(--gog-space-6);
+  --gog-multiselect-filter-input-padding-y: var(--gog-space-6);
+  --gog-multiselect-filter-input-padding-x: var(--gog-space-8);
+  --gog-multiselect-filter-input-bg: var(--gog-background-color);
+  --gog-multiselect-filter-input-color: var(--gog-multiselect-field-color);
+  --gog-multiselect-filter-input-border: var(--gog-multiselect-field-border);
+  --gog-multiselect-filter-input-radius: var(--gog-radius);
+  --gog-multiselect-filter-border-width: var(--gog-panel-border-width);
+  --gog-multiselect-filter-border-style: var(--gog-panel-border-style);
+  --gog-multiselect-filter-border-color: var(--gog-border-color);
+  --gog-multiselect-filter-empty-padding: var(--gog-space-10);
+  --gog-multiselect-filter-empty-color: var(--gog-multiselect-placeholder-color);
   /* Matches --gog-select-chevron-inset; see the note there. */
   /* "+N" badge shown when the selection does not fit on one line. */
-  --gog-multiselect-overflow-color: var(
-    --gog-ms-overflow-color,
-    var(--gog-multiselect-placeholder-color)
-  );
-  --gog-multiselect-overflow-font-size: var(--gog-ms-overflow-font-size, var(--gog-text-sm));
-  --gog-multiselect-overflow-gap: var(--gog-ms-overflow-gap, 6px);
-  --gog-multiselect-min-width: var(--gog-ms-min-width, 120px);
-  --gog-multiselect-panel-max-width: var(--gog-ms-panel-max-width, 420px);
-  --gog-multiselect-actions-inset: var(--gog-ms-actions-inset, var(--gog-control-icon-offset));
-  --gog-multiselect-clear-radius: var(--gog-ms-clear-radius, 2px);
-  --gog-multiselect-disabled-opacity: var(--gog-ms-disabled-opacity, var(--gog-disabled-opacity));
-  --gog-multiselect-transition-duration: var(
-    --gog-ms-transition-duration,
-    var(--gog-duration-base)
-  );
-  --gog-multiselect-float-label-reserve: var(
-    --gog-ms-float-label-reserve,
-    var(--gog-field-float-label-reserve)
-  );
-  --gog-multiselect-float-label-in-top: var(
-    --gog-ms-float-label-in-top,
-    var(--gog-field-float-label-in-top)
-  );
-  --gog-multiselect-float-label-over-gap: var(
-    --gog-ms-float-label-over-gap,
-    var(--gog-field-float-label-over-gap)
-  );
-  --gog-multiselect-float-label-over-reserve: var(
-    --gog-ms-float-label-over-reserve,
-    var(--gog-field-float-label-over-reserve)
-  );
-  --gog-multiselect-arrow-transition-duration: var(
-    --gog-ms-arrow-transition-duration,
-    var(--gog-duration-slow)
-  );
+  --gog-multiselect-overflow-color: var(--gog-multiselect-placeholder-color);
+  --gog-multiselect-overflow-font-size: var(--gog-text-sm);
+  --gog-multiselect-overflow-gap: var(--gog-space-6);
+  --gog-multiselect-min-width: 120px;
+  --gog-multiselect-panel-max-width: 420px;
+  --gog-multiselect-actions-inset: var(--gog-control-icon-offset);
+  --gog-multiselect-clear-radius: 2px;
+  --gog-multiselect-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-multiselect-transition-duration: var(--gog-duration-base);
+  --gog-multiselect-float-label-reserve: var(--gog-field-float-label-reserve);
+  --gog-multiselect-float-label-in-top: var(--gog-field-float-label-in-top);
+  --gog-multiselect-float-label-over-gap: var(--gog-field-float-label-over-gap);
+  --gog-multiselect-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
+  --gog-multiselect-arrow-transition-duration: var(--gog-duration-slow);
   /* Icon geometry, expressed as a ratio of the control's font size. */
-  --gog-multiselect-clear-icon-ratio: var(--gog-ms-clear-icon-ratio, 0.7);
-  --gog-multiselect-arrow-icon-ratio: var(--gog-ms-arrow-icon-ratio, 0.875);
-  --gog-multiselect-mark-size-ratio: var(--gog-ms-mark-size-ratio, 1.2375);
-  --gog-multiselect-mark-icon-ratio: var(--gog-ms-mark-icon-ratio, 1.125);
+  --gog-multiselect-clear-icon-ratio: 0.7;
+  --gog-multiselect-arrow-icon-ratio: 0.875;
+  --gog-multiselect-mark-size-ratio: 1.2375;
+  --gog-multiselect-mark-icon-ratio: 1.125;
 
   /* ── Menu ──────────────────────────────────────────────────────────────────
      The command menu opened by `[gogMenuTrigger]`. Metrics follow the dropdown panel's, so a
@@ -1256,8 +1257,8 @@
   --gog-menu-radius: var(--gog-panel-radius);
   --gog-menu-shadow: var(--gog-dialog-shadow);
   --gog-menu-font-family: var(--gog-font-body);
-  --gog-menu-padding: 4px;
-  --gog-menu-gap: 2px;
+  --gog-menu-padding: var(--gog-space-4);
+  --gog-menu-gap: var(--gog-space-2);
   --gog-menu-offset: 4px;
   --gog-menu-min-width: 180px;
   --gog-menu-max-width: 320px;
@@ -1269,7 +1270,7 @@
   --gog-menu-item-hover-bg: var(--gog-hover-color);
   --gog-menu-item-hover-color: var(--gog-text-color);
   --gog-menu-item-font-size: var(--gog-text-sm);
-  --gog-menu-item-padding: 8px 12px;
+  --gog-menu-item-padding: var(--gog-space-8) var(--gog-space-12);
   --gog-menu-item-radius: var(--gog-radius);
   --gog-menu-item-gap: var(--gog-space-sm);
   --gog-menu-item-disabled-opacity: var(--gog-disabled-opacity);
@@ -1278,7 +1279,7 @@
   --gog-menu-item-icon-size: 1em;
 
   /* ── Paginator ─────────────────────────────────────────────────────────────── */
-  --gog-paginator-gap: 4px;
+  --gog-paginator-gap: var(--gog-space-4);
   --gog-paginator-ellipsis-color: var(--gog-muted-text-color);
   --gog-paginator-ellipsis-font-size: var(--gog-text-sm);
   --gog-paginator-ellipsis-font-family: var(--gog-font-body);
@@ -1310,9 +1311,9 @@
   --gog-panel-outlined-bg: var(--gog-surface-color);
   --gog-panel-outlined-border-color: var(--gog-border-color);
   --gog-panel-outlined-shadow: none;
-  --gog-panel-elevated-bg: var(--gog-surface-color);
+  --gog-panel-elevated-bg: var(--gog-elevated-surface-color);
   --gog-panel-elevated-border-color: transparent;
-  --gog-panel-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
+  --gog-panel-filled-bg: var(--gog-accent-pale);
   --gog-panel-filled-border-color: transparent;
   --gog-panel-filled-shadow: none;
 
@@ -1320,7 +1321,7 @@
   --gog-panel-toggle-size: 2rem;
   --gog-panel-toggle-radius: var(--gog-radius);
   --gog-panel-toggle-color: var(--gog-muted-text-color);
-  --gog-panel-toggle-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
+  --gog-panel-toggle-hover-bg: var(--gog-hover-color);
   --gog-panel-chevron-size: 1rem;
   --gog-panel-focus-ring: var(--gog-accent-color);
   --gog-panel-focus-ring-width: var(--gog-focus-ring-width);
@@ -1331,28 +1332,24 @@
   --gog-panel-footer-gap: var(--gog-space-sm);
   --gog-panel-footer-padding-top: var(--gog-space-sm);
 
-  --gog-panel-xsm-padding-y: 10px;
-  --gog-panel-xsm-padding-x: 12px;
+  --gog-panel-xsm-padding-y: var(--gog-space-10);
+  --gog-panel-xsm-padding-x: var(--gog-space-12);
   --gog-panel-xsm-gap: var(--gog-space-sm);
-  --gog-panel-sm-padding-y: 14px;
+  --gog-panel-sm-padding-y: var(--gog-space-14);
   --gog-panel-sm-padding-x: var(--gog-space-md);
-  --gog-panel-sm-gap: 10px;
-  --gog-panel-md-padding-y: 18px;
-  --gog-panel-md-padding-x: 20px;
-  --gog-panel-md-gap: 12px;
+  --gog-panel-sm-gap: var(--gog-space-10);
+  --gog-panel-md-padding-y: var(--gog-space-18);
+  --gog-panel-md-padding-x: var(--gog-space-20);
+  --gog-panel-md-gap: var(--gog-space-12);
   --gog-panel-lg-padding-y: var(--gog-space-lg);
-  --gog-panel-lg-padding-x: 28px;
+  --gog-panel-lg-padding-x: var(--gog-space-28);
   --gog-panel-lg-gap: var(--gog-space-md);
-  --gog-panel-slg-padding-y: 32px;
-  --gog-panel-slg-padding-x: 36px;
-  --gog-panel-slg-gap: 20px;
+  --gog-panel-slg-padding-y: var(--gog-space-32);
+  --gog-panel-slg-padding-x: var(--gog-space-32);
+  --gog-panel-slg-gap: var(--gog-space-20);
 
   /* ── Progressbar ──────────────────────────────────────────────────────────── */
-  --gog-progressbar-track-base-bg: color-mix(
-    in srgb,
-    var(--gog-text-color) 20%,
-    var(--gog-border-color)
-  );
+  --gog-progressbar-track-base-bg: var(--gog-border-color);
   --gog-progressbar-radius: 999px;
   --gog-progressbar-transition-duration: var(--gog-duration-slow);
   --gog-progressbar-xsm-height: 2px;
@@ -1369,27 +1366,19 @@
   --gog-progressbar-indeterminate-easing: cubic-bezier(0.65, 0.05, 0.36, 1);
   /* The reduced-motion stand-in for the indeterminate animation. */
   --gog-progressbar-stripe-size: 6px;
-  --gog-progressbar-stripe-color: color-mix(in srgb, var(--gog-surface-color) 45%, transparent);
+  --gog-progressbar-stripe-color: var(--gog-surface-color);
   /* The buffer tier is the same hue at low opacity, so it reads as "ahead of the fill"
      rather than as a second, competing colour. */
   --gog-progressbar-accent-bg: var(--gog-accent-color);
-  --gog-progressbar-accent-buffer-bg: color-mix(in srgb, var(--gog-accent-color) 35%, transparent);
+  --gog-progressbar-accent-buffer-bg: var(--gog-accent-pale);
   --gog-progressbar-success-bg: var(--gog-success-color);
-  --gog-progressbar-success-buffer-bg: color-mix(
-    in srgb,
-    var(--gog-success-color) 35%,
-    transparent
-  );
+  --gog-progressbar-success-buffer-bg: var(--gog-border-color);
   --gog-progressbar-danger-bg: var(--gog-danger-color);
-  --gog-progressbar-danger-buffer-bg: color-mix(in srgb, var(--gog-danger-color) 35%, transparent);
+  --gog-progressbar-danger-buffer-bg: var(--gog-border-color);
   --gog-progressbar-warning-bg: var(--gog-warning-color);
-  --gog-progressbar-warning-buffer-bg: color-mix(
-    in srgb,
-    var(--gog-warning-color) 35%,
-    transparent
-  );
+  --gog-progressbar-warning-buffer-bg: var(--gog-border-color);
   --gog-progressbar-info-bg: var(--gog-info-color);
-  --gog-progressbar-info-buffer-bg: color-mix(in srgb, var(--gog-info-color) 35%, transparent);
+  --gog-progressbar-info-buffer-bg: var(--gog-border-color);
 
   /* ── Ripple (the `gogRipple` directive; its classes live in ripple.css) ────
      `currentColor` rather than a fixed colour on purpose: the wash then reads as the host's
@@ -1428,17 +1417,17 @@
      `thin` variant gets more of it since its 6px track leaves the least visible thumb to aim
      at; both land the effective hit width in the ~22-24px range generally recommended for a
      comfortable pointer target. */
-  --gog-scroll-normal-thumb-hit-padding: 6px;
-  --gog-scroll-thin-thumb-hit-padding: 9px;
+  --gog-scroll-normal-thumb-hit-padding: var(--gog-space-6);
+  --gog-scroll-thin-thumb-hit-padding: var(--gog-space-8);
 
   /* ── Select ────────────────────────────────────────────────────────────────── */
   --gog-select-font-family: var(--gog-font-body);
   --gog-select-label-font-family: var(--gog-font-heading);
-  --gog-select-gap: 4px;
+  --gog-select-gap: var(--gog-space-4);
   --gog-select-label-color: var(--gog-accent-color);
   --gog-select-label-font-size: var(--gog-text-sm);
-  --gog-select-label-letter-spacing: 1px;
-  --gog-select-label-text-transform: uppercase;
+  --gog-select-label-letter-spacing: var(--gog-letter-spacing);
+  --gog-select-label-text-transform: var(--gog-text-transform);
   --gog-select-field-bg: var(--gog-surface-color);
   --gog-select-field-border: var(--gog-accent-dim);
   --gog-select-field-border-width: var(--gog-control-border-width);
@@ -1447,7 +1436,7 @@
   --gog-select-field-color: var(--gog-text-color);
   --gog-select-placeholder-color: var(--gog-muted-text-color);
   --gog-select-focus-border: var(--gog-accent-color);
-  --gog-select-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+  --gog-select-focus-ring: var(--gog-accent-pale);
   --gog-select-focus-glow: 0 0 8px var(--gog-select-focus-ring);
   --gog-select-focus-ring-width: var(--gog-focus-ring-width);
   --gog-select-focus-ring-offset: var(--gog-focus-ring-offset);
@@ -1467,33 +1456,33 @@
   /* Ceiling for a content-sized panel, so one very long option cannot span the viewport. */
   --gog-select-panel-max-width: 420px;
   /* Filter box — only rendered when `filter` is on. */
-  --gog-select-filter-padding: 6px;
-  --gog-select-filter-input-padding-y: 6px;
-  --gog-select-filter-input-padding-x: 8px;
+  --gog-select-filter-padding: var(--gog-space-6);
+  --gog-select-filter-input-padding-y: var(--gog-space-6);
+  --gog-select-filter-input-padding-x: var(--gog-space-8);
   --gog-select-filter-input-bg: var(--gog-background-color);
-  --gog-select-filter-input-color: var(--gog-select-control-color);
-  --gog-select-filter-input-border: var(--gog-select-control-border);
+  --gog-select-filter-input-color: var(--gog-select-field-color);
+  --gog-select-filter-input-border: var(--gog-select-field-border);
   --gog-select-filter-input-radius: var(--gog-radius);
   --gog-select-filter-border-width: var(--gog-panel-border-width);
   --gog-select-filter-border-style: var(--gog-panel-border-style);
   --gog-select-filter-border-color: var(--gog-select-option-border-color, var(--gog-border-color));
-  --gog-select-filter-empty-padding: 10px;
+  --gog-select-filter-empty-padding: var(--gog-space-10);
   --gog-select-filter-empty-color: var(--gog-select-placeholder-color);
   /* Clear button — only rendered once a value is selected, see `clearable`. */
   --gog-select-clear-radius: 2px;
   --gog-select-clear-icon-ratio: 0.7;
-  --gog-select-clear-gap: 6px;
+  --gog-select-clear-gap: var(--gog-space-6);
   --gog-select-clear-color: var(--gog-select-placeholder-color);
   --gog-select-clear-hover-color: var(--gog-select-label-color);
-  --gog-select-control-gap: 12px;
+  --gog-select-control-gap: var(--gog-space-12);
   --gog-select-panel-bg: var(--gog-surface-color);
   --gog-select-panel-shadow: var(--gog-panel-shadow);
   --gog-select-panel-max-height: 260px;
   --gog-select-panel-offset: 2px;
-  --gog-select-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
+  --gog-select-option-hover-bg: var(--gog-hover-color);
   --gog-select-option-selected-color: var(--gog-accent-color);
   --gog-select-option-color: var(--gog-text-color);
-  --gog-select-option-gap: 10px;
+  --gog-select-option-gap: var(--gog-space-10);
   /* Estimated row height fed into the panel's up/down placement math; not itself a real
      layout property, so it has no effect unless the JS reads it. */
   --gog-select-option-height: 40px;
@@ -1511,8 +1500,8 @@
   --gog-select-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
 
   /* ── Skeleton ─────────────────────────────────────────────────────────────── */
-  --gog-skeleton-base: color-mix(in srgb, var(--gog-border-color) 40%, var(--gog-surface-color));
-  --gog-skeleton-shine: color-mix(in srgb, var(--gog-skeleton-base), white 35%);
+  --gog-skeleton-base: var(--gog-hover-color);
+  --gog-skeleton-shine: var(--gog-surface-color);
   --gog-skeleton-radius: var(--gog-radius);
   --gog-skeleton-square-radius: 0px;
   --gog-skeleton-line-radius: calc(var(--gog-skeleton-radius) / 2);
@@ -1545,11 +1534,11 @@
   --gog-slider-label-font-family: var(--gog-font-heading);
   --gog-slider-value-font-family: var(--gog-font-mono);
   --gog-slider-error-font-family: var(--gog-font-body);
-  --gog-slider-gap: 6px;
+  --gog-slider-gap: var(--gog-space-6);
   --gog-slider-label-color: var(--gog-accent-color);
   --gog-slider-label-font-size: var(--gog-text-sm);
-  --gog-slider-label-letter-spacing: 1px;
-  --gog-slider-label-text-transform: uppercase;
+  --gog-slider-label-letter-spacing: var(--gog-letter-spacing);
+  --gog-slider-label-text-transform: var(--gog-text-transform);
   --gog-slider-value-color: var(--gog-accent-color);
   --gog-slider-value-font-size: var(--gog-text-sm);
   --gog-slider-value-min-width: 40px;
@@ -1567,10 +1556,10 @@
    * warm gray in both — always visibly distinct from the saturated accent fill, and always
    * legible against its own theme's surface.
    */
-  --gog-slider-track-bg: color-mix(in srgb, var(--gog-text-color) 30%, var(--gog-border-color));
-  --gog-slider-track-border-width: 1px;
-  --gog-slider-track-border-style: solid;
-  /* Transparent by default — same opt-in convention as --gog-btn-primary-border: the
+  --gog-slider-track-bg: var(--gog-border-color);
+  --gog-slider-track-border-width: var(--gog-border-width);
+  --gog-slider-track-border-style: var(--gog-border-style);
+  /* Transparent by default — same opt-in convention as --gog-button-primary-border: the
      width/style are always in the box model, but invisible until a theme sets a color. */
   --gog-slider-track-border-color: transparent;
   /* Bound via `background` (not `background-color`) in slider.component.scss, so this
@@ -1580,11 +1569,11 @@
   --gog-slider-thumb-size: 16px;
   --gog-slider-thumb-bg: var(--gog-accent-color);
   --gog-slider-thumb-border: var(--gog-background-color);
-  --gog-slider-thumb-border-width: 2px;
+  --gog-slider-thumb-border-width: var(--gog-control-border-width);
   --gog-slider-thumb-radius: 50%;
-  --gog-slider-thumb-shadow: color-mix(in srgb, var(--gog-accent-bright) 40%, transparent);
+  --gog-slider-thumb-shadow: var(--gog-accent-pale);
   --gog-slider-thumb-glow-size: 6px;
-  --gog-slider-focus-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
+  --gog-slider-focus-ring: var(--gog-accent-pale);
   --gog-slider-focus-ring-width: var(--gog-focus-ring-width);
   --gog-slider-range-color: var(--gog-muted-text-color);
   --gog-slider-range-font-size: var(--gog-text-xs);
@@ -1627,14 +1616,19 @@
   --gog-table-font-family: var(--gog-font-body);
   --gog-table-header-font-family: var(--gog-font-heading);
   --gog-table-numeric-font-family: var(--gog-font-mono);
-  --gog-table-gap: 12px;
+  --gog-table-gap: var(--gog-space-12);
   --gog-table-border-color: var(--gog-accent-dim);
-  --gog-table-border-width: 2px;
-  --gog-table-border-style: solid;
-  --gog-table-row-border-width: 1px;
+  --gog-table-border-width: var(--gog-control-border-width);
+  --gog-table-border-style: var(--gog-border-style);
+  --gog-table-row-border-width: var(--gog-border-width);
   /* The selection column is sized to its checkbox and never grows with content. */
   --gog-table-select-col-width: 44px;
   --gog-table-surface: var(--gog-surface-color);
+  /* The header needs its own ground, not the table's. It used to paint `--gog-table-surface`,
+     which is the same colour the body paints, so on a scrolling table with a sticky header the
+     column names slid over rows of identical background and the only thing separating them was
+     the accent colour and the caps — legible on a light theme, not on a dark one. */
+  --gog-table-header-bg: var(--gog-hover-color);
   --gog-table-text-color: var(--gog-text-color);
   --gog-table-accent-color: var(--gog-accent-color);
   --gog-table-accent-bright: var(--gog-accent-bright);
@@ -1644,38 +1638,38 @@
   --gog-table-muted-color: var(--gog-muted-text-color);
   --gog-table-focus-ring: var(--gog-accent-color);
   --gog-table-focus-ring-width: var(--gog-focus-ring-width);
-  --gog-table-header-letter-spacing: 1px;
-  --gog-table-header-text-transform: uppercase;
+  --gog-table-header-letter-spacing: var(--gog-letter-spacing);
+  --gog-table-header-text-transform: var(--gog-text-transform);
   --gog-table-num-col-width: 48px;
-  --gog-table-th-inner-gap: 6px;
+  --gog-table-th-inner-gap: var(--gog-space-6);
   --gog-table-sort-icon-size: 0.9em;
   --gog-table-sort-icon-width: 1.1em;
   --gog-table-sort-icon-opacity: 0.6;
-  --gog-table-empty-padding: 24px 14px;
+  --gog-table-empty-padding: var(--gog-space-24) var(--gog-space-14);
   --gog-table-empty-font-size: var(--gog-text-md);
-  --gog-table-loading-padding: 32px 14px;
+  --gog-table-loading-padding: var(--gog-space-32) var(--gog-space-14);
   --gog-table-loading-opacity: 0.5;
   --gog-table-row-transition-duration: var(--gog-duration-fast);
   --gog-table-footer-gap: var(--gog-space-sm);
   --gog-table-footer-min-height: 32px;
   --gog-table-total-font-size: var(--gog-text-xs);
   --gog-table-total-letter-spacing: 0.5px;
-  --gog-table-total-text-transform: uppercase;
+  --gog-table-total-text-transform: var(--gog-text-transform);
   --gog-table-num-font-size: var(--gog-text-xs);
-  --gog-table-padding-h: 14px;
-  --gog-table-xsm-padding-v: 2px;
+  --gog-table-padding-h: var(--gog-space-14);
+  --gog-table-xsm-padding-v: var(--gog-space-2);
   --gog-table-xsm-th-font-size: var(--gog-text-xs);
   --gog-table-xsm-td-font-size: var(--gog-text-xs);
-  --gog-table-sm-padding-v: 3px;
+  --gog-table-sm-padding-v: var(--gog-space-2);
   --gog-table-sm-th-font-size: var(--gog-text-xs);
   --gog-table-sm-td-font-size: var(--gog-text-xs);
-  --gog-table-md-padding-v: 6px;
+  --gog-table-md-padding-v: var(--gog-space-6);
   --gog-table-md-th-font-size: var(--gog-text-xs);
   --gog-table-md-td-font-size: var(--gog-text-sm);
-  --gog-table-lg-padding-v: 10px;
+  --gog-table-lg-padding-v: var(--gog-space-10);
   --gog-table-lg-th-font-size: var(--gog-text-sm);
   --gog-table-lg-td-font-size: var(--gog-text-md);
-  --gog-table-slg-padding-v: 14px;
+  --gog-table-slg-padding-v: var(--gog-space-14);
   --gog-table-slg-th-font-size: var(--gog-text-md);
   --gog-table-slg-td-font-size: var(--gog-text-lg);
 
@@ -1696,8 +1690,8 @@
   --gog-tabs-rest-color: var(--gog-muted-text-color);
   --gog-tabs-hover-color: var(--gog-text-color);
   --gog-tabs-active-color: var(--gog-accent-color);
-  --gog-tabs-header-border-width: 1px;
-  --gog-tabs-header-border-style: solid;
+  --gog-tabs-header-border-width: var(--gog-border-width);
+  --gog-tabs-header-border-style: var(--gog-border-style);
   --gog-tabs-header-border-color: var(--gog-border-color);
   --gog-tabs-indicator-color: var(--gog-accent-color);
   --gog-tabs-indicator-thickness: 2px;
@@ -1709,15 +1703,15 @@
   --gog-tabs-focus-ring-color: var(--gog-accent-color);
   --gog-tabs-panel-padding: var(--gog-space-md);
   --gog-tabs-panel-color: var(--gog-text-color);
-  --gog-tabs-xsm-padding: 0.375rem 0.625rem;
+  --gog-tabs-xsm-padding: var(--gog-space-6) var(--gog-space-10);
   --gog-tabs-xsm-font-size: var(--gog-text-xs);
-  --gog-tabs-sm-padding: 0.5rem 0.875rem;
+  --gog-tabs-sm-padding: var(--gog-space-8) var(--gog-space-14);
   --gog-tabs-sm-font-size: var(--gog-text-sm);
-  --gog-tabs-md-padding: 0.75rem 1.125rem;
+  --gog-tabs-md-padding: var(--gog-space-12) var(--gog-space-18);
   --gog-tabs-md-font-size: var(--gog-text-md);
-  --gog-tabs-lg-padding: 1rem 1.5rem;
+  --gog-tabs-lg-padding: var(--gog-space-16) var(--gog-space-24);
   --gog-tabs-lg-font-size: var(--gog-text-lg);
-  --gog-tabs-slg-padding: 1.25rem 1.75rem;
+  --gog-tabs-slg-padding: var(--gog-space-20) var(--gog-space-28);
   --gog-tabs-slg-font-size: var(--gog-text-xl);
 
   /* ── Tag ──────────────────────────────────────────────────────────────────
@@ -1733,42 +1727,42 @@
   --gog-tag-color-mix: 82%;
   --gog-tag-bg-base: var(--gog-surface-color);
   --gog-tag-color-base: black;
-  --gog-tag-border-width: 1px;
-  --gog-tag-border-style: solid;
-  --gog-tag-inner-border-width: 1px;
+  --gog-tag-border-width: var(--gog-border-width);
+  --gog-tag-border-style: var(--gog-border-style);
+  --gog-tag-inner-border-width: var(--gog-border-width);
   --gog-tag-font-weight: 600;
   --gog-tag-line-height: 1;
   --gog-tag-radius: max(var(--gog-radius), 2px);
   --gog-tag-pill-radius: 9999px;
 
   --gog-tag-xsm-font-size: 0.6875rem;
-  --gog-tag-xsm-padding-block: 0.1875rem;
-  --gog-tag-xsm-padding-inline: 0.375rem;
-  --gog-tag-xsm-gap: 0.1875rem;
+  --gog-tag-xsm-padding-block: var(--gog-space-2);
+  --gog-tag-xsm-padding-inline: var(--gog-space-6);
+  --gog-tag-xsm-gap: var(--gog-space-2);
   --gog-tag-xsm-icon-size: 0.6875rem;
 
   --gog-tag-sm-font-size: 0.75rem;
-  --gog-tag-sm-padding-block: 0.25rem;
-  --gog-tag-sm-padding-inline: 0.5rem;
-  --gog-tag-sm-gap: 0.25rem;
+  --gog-tag-sm-padding-block: var(--gog-space-4);
+  --gog-tag-sm-padding-inline: var(--gog-space-8);
+  --gog-tag-sm-gap: var(--gog-space-4);
   --gog-tag-sm-icon-size: 0.75rem;
 
   --gog-tag-md-font-size: 0.875rem;
-  --gog-tag-md-padding-block: 0.375rem;
-  --gog-tag-md-padding-inline: 0.75rem;
-  --gog-tag-md-gap: 0.375rem;
+  --gog-tag-md-padding-block: var(--gog-space-6);
+  --gog-tag-md-padding-inline: var(--gog-space-12);
+  --gog-tag-md-gap: var(--gog-space-6);
   --gog-tag-md-icon-size: 0.875rem;
 
   --gog-tag-lg-font-size: 1rem;
-  --gog-tag-lg-padding-block: 0.5rem;
-  --gog-tag-lg-padding-inline: 0.875rem;
-  --gog-tag-lg-gap: 0.5rem;
+  --gog-tag-lg-padding-block: var(--gog-space-8);
+  --gog-tag-lg-padding-inline: var(--gog-space-14);
+  --gog-tag-lg-gap: var(--gog-space-8);
   --gog-tag-lg-icon-size: 1rem;
 
   --gog-tag-slg-font-size: 1.125rem;
-  --gog-tag-slg-padding-block: 0.625rem;
-  --gog-tag-slg-padding-inline: 1rem;
-  --gog-tag-slg-gap: 0.625rem;
+  --gog-tag-slg-padding-block: var(--gog-space-10);
+  --gog-tag-slg-padding-inline: var(--gog-space-16);
+  --gog-tag-slg-gap: var(--gog-space-10);
   --gog-tag-slg-icon-size: 1.125rem;
 
   /* ── Toast ────────────────────────────────────────────────────────────────── */
@@ -1782,18 +1776,18 @@
   --gog-toast-warning-color: var(--gog-accent-bright);
   --gog-toast-info-color: var(--gog-accent-color);
   --gog-toast-accent-width: 4px;
-  --gog-toast-padding: 12px 14px;
+  --gog-toast-padding: var(--gog-space-12) var(--gog-space-14);
   --gog-toast-radius: 0px;
-  --gog-toast-content-gap: 10px;
+  --gog-toast-content-gap: var(--gog-space-10);
   --gog-toast-main-gap: var(--gog-space-sm);
-  --gog-toast-actions-gap: 6px;
+  --gog-toast-actions-gap: var(--gog-space-6);
   --gog-toast-message-font-size: var(--gog-text-sm);
   --gog-toast-message-line-height: 1.5;
   --gog-toast-icon-size: 1rem;
   --gog-toast-icon-line-height: 1.4;
-  --gog-toast-action-padding: 0.25rem 0.5rem;
+  --gog-toast-action-padding: var(--gog-space-4) var(--gog-space-8);
   --gog-toast-action-font-size: 0.75rem;
-  --gog-toast-close-padding: 0.125rem 0.25rem;
+  --gog-toast-close-padding: var(--gog-space-2) var(--gog-space-4);
   --gog-toast-close-font-size: 0.75rem;
   --gog-toast-progress-height: 3px;
   --gog-toast-progress-opacity: 30%;
@@ -1815,11 +1809,11 @@
   --gog-toggle-font-family: var(--gog-font-body);
   --gog-toggle-gap: var(--gog-space-sm);
   --gog-toggle-radius: 999px;
-  --gog-toggle-border-width: 1px;
-  --gog-toggle-border-style: solid;
+  --gog-toggle-border-width: var(--gog-border-width);
+  --gog-toggle-border-style: var(--gog-border-style);
   --gog-toggle-border-color: var(--gog-border-color);
   --gog-toggle-on-border-color: var(--gog-accent-color);
-  --gog-toggle-track-off-bg: color-mix(in srgb, var(--gog-text-color) 18%, transparent);
+  --gog-toggle-track-off-bg: var(--gog-border-color);
   --gog-toggle-track-on-bg: var(--gog-accent-color);
   --gog-toggle-thumb-off-bg: var(--gog-surface-color);
   --gog-toggle-thumb-on-bg: var(--gog-accent-text-color, var(--gog-primary-color));
@@ -1836,13 +1830,13 @@
   --gog-toggle-state-color: var(--gog-accent-text-color, var(--gog-primary-color));
   --gog-toggle-state-font-weight: 600;
   --gog-toggle-state-letter-spacing: 0.04em;
-  --gog-toggle-state-padding-inline: 4px;
+  --gog-toggle-state-padding-inline: var(--gog-space-4);
   --gog-toggle-state-offset: 6px;
   /* Gap between the wording and the thumb parked at the opposite end. The clearance itself
      (thumb size + this) is computed in the component stylesheet, not here: a `var(` to a
      size-class token is substituted where it is *declared*, so doing that calc on :root would
      freeze it to the md thumb and stop it scaling with `size`. */
-  --gog-toggle-state-thumb-gap: 6px;
+  --gog-toggle-state-thumb-gap: var(--gog-space-6);
   --gog-toggle-xsm-track-width: 24px;
   --gog-toggle-xsm-track-height: 14px;
   --gog-toggle-xsm-thumb-size: 10px;
@@ -1873,7 +1867,7 @@
   --gog-tooltip-font-family: var(--gog-font-body);
   --gog-tooltip-font-size: var(--gog-text-xs);
   --gog-tooltip-line-height: 1.4;
-  --gog-tooltip-padding: 6px 10px;
+  --gog-tooltip-padding: var(--gog-space-6) var(--gog-space-10);
   --gog-tooltip-radius: var(--gog-radius);
   --gog-tooltip-max-width: 280px;
   /* Caps the gog-scroll wrapping the bubble's content — see tooltip-bubble.component.html.
@@ -1894,7 +1888,117 @@
   --gog-tooltip-arrow-size: 5px;
   /* Space kept between the trigger and the bubble. Read by the directive itself (not just
      CSS) to feed the placement math — see `readPxToken` in `tooltip.directive.ts`. */
-  --gog-tooltip-gap: 8px;
+  --gog-tooltip-gap: var(--gog-space-8);
   --gog-tooltip-z: 400;
   --gog-tooltip-transition-duration: var(--gog-duration-fast);
 }
+
+/*
+ * ── color-mix(), and why it is quarantined here ─────────────────────────────────
+ *
+ * Every token above has a flat value that works in any browser. The richer, mixed value lives
+ * in this block, which a browser without `color-mix()` skips entirely.
+ *
+ * **The usual two-declaration fallback does not work for custom properties, and that is the
+ * whole reason this block exists.** A custom property accepts almost any token stream at parse
+ * time — it is only validated when it is *substituted* — so writing
+ *
+ *     --x: var(--gog-hover-color);
+ *     --x: color-mix(in srgb, …);
+ *
+ * leaves the second declaration winning even where `color-mix()` means nothing, and `var(--x)`
+ * then resolves to nothing at all. Measured in Chrome (2026-08-30): an element styled that way
+ * with an unsupported function computed `background: rgba(0, 0, 0, 0)` — transparent, not the
+ * earlier value. That is the reported "colours are wrong in Samsung Internet / Firefox": the
+ * declarations were not falling back, they were vanishing.
+ *
+ * `@supports` is the only mechanism that gates a custom property by feature support, because it
+ * is evaluated at parse time rather than at substitution time.
+ *
+ * `color-mix()` shipped in Chrome 111, Firefox 113, Safari 16.2 and Samsung Internet 22.
+ *
+ * **That is not below the support floor — it overlaps it.** Angular 21 supports
+ * `baseline widely available on 2025-10-20`, whose minimums are Chrome 111, Firefox 112 and
+ * Safari 16.4. Firefox 112 is inside that window and has no `color-mix()`, so these fallbacks
+ * are load-bearing for a browser the framework itself supports, not a courtesy to ancient ones.
+ * Below the floor entirely (Samsung Internet on an older Android, which Angular's list does not
+ * mention at all) the library still renders: flat palette colours, less depth, every surface
+ * legible and every focus ring visible.
+ *
+ * The project deliberately declares no `browserslist` — Angular's baseline is the policy, and
+ * stating a lower one only produced "unsupported browsers" warnings on every build.
+ */
+@supports (color: color-mix(in srgb, red 50%, blue)) {
+  :root,
+  [data-theme] {
+    --gog-accordion-hover-bg: color-mix(in srgb, var(--gog-accent-dim) 10%, transparent);
+    --gog-accordion-hover-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
+    --gog-accordion-body-bg: color-mix(in srgb, black 6%, transparent);
+    --gog-button-primary-hover-shadow: 0 0 16px
+      color-mix(in srgb, var(--gog-accent-bright) 45%, transparent);
+    --gog-button-ghost-hover-bg: color-mix(in srgb, var(--gog-accent-color) 12%, transparent);
+    --gog-calendar-range-bg: color-mix(in srgb, var(--gog-accent-color) 16%, transparent);
+    --gog-card-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
+    --gog-card-hover-border-color: color-mix(in srgb, var(--gog-accent-color) 45%, transparent);
+    --gog-checkbox-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+    --gog-radio-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+    --gog-chip-bg: color-mix(in srgb, var(--gog-surface-color) 88%, var(--gog-hover-color));
+    --gog-chip-hover-bg: color-mix(in srgb, var(--gog-hover-color) 45%, var(--gog-surface-color));
+    --gog-dialog-close-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
+    --gog-autocomplete-option-hover-bg: color-mix(
+      in srgb,
+      var(--gog-accent-color) 10%,
+      transparent
+    );
+    --gog-autocomplete-option-selected-bg: color-mix(
+      in srgb,
+      var(--gog-accent-color) 16%,
+      transparent
+    );
+    --gog-input-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+    --gog-input-spin-hover-bg: color-mix(
+      in srgb,
+      var(--gog-input-icon-hover-color) 12%,
+      transparent
+    );
+    --gog-multiselect-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+    --gog-multiselect-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
+    --gog-panel-filled-bg: color-mix(in srgb, var(--gog-accent-dim) 8%, var(--gog-surface-color));
+    --gog-panel-toggle-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
+    --gog-progressbar-track-base-bg: color-mix(
+      in srgb,
+      var(--gog-text-color) 20%,
+      var(--gog-border-color)
+    );
+    --gog-progressbar-stripe-color: color-mix(in srgb, var(--gog-surface-color) 45%, transparent);
+    --gog-progressbar-accent-buffer-bg: color-mix(
+      in srgb,
+      var(--gog-accent-color) 35%,
+      transparent
+    );
+    --gog-progressbar-success-buffer-bg: color-mix(
+      in srgb,
+      var(--gog-success-color) 35%,
+      transparent
+    );
+    --gog-progressbar-danger-buffer-bg: color-mix(
+      in srgb,
+      var(--gog-danger-color) 35%,
+      transparent
+    );
+    --gog-progressbar-warning-buffer-bg: color-mix(
+      in srgb,
+      var(--gog-warning-color) 35%,
+      transparent
+    );
+    --gog-progressbar-info-buffer-bg: color-mix(in srgb, var(--gog-info-color) 35%, transparent);
+    --gog-select-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+    --gog-select-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
+    --gog-skeleton-base: color-mix(in srgb, var(--gog-border-color) 40%, var(--gog-surface-color));
+    --gog-skeleton-shine: color-mix(in srgb, var(--gog-skeleton-base), white 35%);
+    --gog-slider-track-bg: color-mix(in srgb, var(--gog-text-color) 30%, var(--gog-border-color));
+    --gog-slider-thumb-shadow: color-mix(in srgb, var(--gog-accent-bright) 40%, transparent);
+    --gog-slider-focus-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
+    --gog-toggle-track-off-bg: color-mix(in srgb, var(--gog-text-color) 18%, transparent);
+  }
+}