@guildofgleks/ui 21.9.1 → 21.10.0

package/styles/theme.css

@@ -1,2357 +1,2396 @@
-/*
- * @guildofgleks/ui — baseline theme
- *
- * Every token the components read, with a working default, so the library renders
- * correctly from a single import and a consumer can override only what they care about.
- *
- * ── The three layers ─────────────────────────────────────────────────────────────
- *   1. Foundation  — palette, type scale, spacing, motion, focus. Restyles everything.
- *   2. Component   — `--gog-<component>-*`, spelled out as the component's own element
- *                    name. Every colour, font, border, radius, shadow, padding and
- *                    duration each component paints with lives here, so a theme can
- *                    restyle one component without touching its stylesheet.
- *   3. Instance    — a handful of deliberately UNDECLARED tokens (`--gog-button-bg`,
- *                    `--gog-button-padding`, `--gog-tag-bg`, …) that variant/size classes
- *                    fall back through. Left unset on purpose: a value declared here
- *                    would out-cascade the variant classes and pin every button to one
- *                    look. Set them on an element to override a single instance.
- *
- * No component stylesheet declares a `--gog-*` default of its own — everything a
- * component paints resolves to a token below.
- *
- * ── 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
- * `:root` freezes to the root palette: a `data-theme` scope further down the tree could
- * change `--gog-accent-color` and buttons inside it would not follow.
- *
- *   `:root`             — literals only (and the light palette default). Values that
- *                         reference nothing, so resolving them once at the root is right.
- *   `:root, [data-theme]` — every token whose value reads another token. Re-declared on
- *                         each theme scope so it re-derives from that scope's palette
- *                         and metrics. **A new token that contains `var(` goes here.**
- *
- * ── Adding a theme ───────────────────────────────────────────────────────────────
- * Declare a palette against the attribute value; the derived layer re-resolves for you:
- *
- *   :root[data-theme='mine'], [data-theme='mine'] { --gog-accent-color: #ff4edb; }
- *
- * Listing both selectors makes the theme work at the root *and* on any subtree, so a
- * single page can show several themes side by side.
- */
-
-:root {
-  /* ── Typography ───────────────────────────────────────────────────────────────
-     Generic stacks on purpose: a UI library should not force a webfont download on
-     its consumers. Point these at your own families to restyle all text at once.
-     `styles/fonts.css` is an optional import that wires up the showcase's families. */
-  --gog-font-heading: system-ui, -apple-system, 'Segoe UI', sans-serif;
-  --gog-font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
-  --gog-font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
-
-  --gog-text-xs: 0.75rem;
-  --gog-text-sm: 0.875rem;
-  --gog-text-md: 1rem;
-  --gog-text-lg: 1.125rem;
-  /* 20px, between `lg` and `xl`. Named for the control size it serves rather than continuing the
-     t-shirt run, because that is what asked for it: `gog-button` and the field controls both
-     needed a step for their `slg` size and, having none, both wrote `1.25rem` as a literal — the
-     same value chosen twice, independently, which is a missing rung and not two opinions. The
-     gap from 1.125 to 1.5 is the widest in the scale, so it was the one likely to be filled by
-     hand. */
-  --gog-text-slg: 1.25rem;
-  --gog-text-xl: 1.5rem;
-  --gog-text-2xl: 2rem;
-  --gog-text-3xl: 3rem;
-
-  /* Weight, the third character axis after casing and tracking — and the one 21.7.0's character
-     layer missed, which is how fifteen component tokens came to hold a bare number. A house style
-     that wants lighter chrome sets these four and nothing else; before them it meant finding and
-     re-listing every one. Four steps because four are used: no `normal`, because nothing in the
-     library paints 400 and an unused token is API nobody asked for. */
-  --gog-font-weight-medium: 500;
-  --gog-font-weight-semibold: 600;
-  --gog-font-weight-bold: 700;
-  --gog-font-weight-heavy: 900;
-
-  /* Leading, the fourth character axis. Twenty component tokens held a bare number — seven of
-     them the same 1.4 — so a house style that wanted roomier text had to find every one. Six
-     steps because six values are painted; `gog-panel`'s heading keeps its own 1.25, which is
-     off this scale on purpose the way an 11px chip is off the type scale. */
-  --gog-line-height-none: 1;
-  --gog-line-height-tight: 1.2;
-  --gog-line-height-snug: 1.3;
-  --gog-line-height-normal: 1.4;
-  --gog-line-height-relaxed: 1.5;
-  --gog-line-height-loose: 1.6;
-
-  /* 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;
-
-  /* ── Motion ──────────────────────────────────────────────────────────────────
-     Every component transition/animation is expressed in these. Set them to 0s to
-     flatten all motion theme-wide (components also honour prefers-reduced-motion). */
-  --gog-duration-fast: 0.12s;
-  --gog-duration-base: 0.15s;
-  --gog-duration-slow: 0.2s;
-  --gog-easing: ease;
-
-  /* ── Focus & disabled ───────────────────────────────────────────────────────── */
-  --gog-focus-ring-width: 3px;
-  --gog-focus-ring-offset: 2px;
-  --gog-disabled-opacity: 0.4;
-
-  /* ── Control metrics ─────────────────────────────────────────────────────────
-     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. */
-  /* The clear (×) button's glyph, as a fraction of its box. One number written five times —
-     `gog-autocomplete`, `gog-datepicker`, `gog-inputfield`, `gog-multiselect` and `gog-select`
-     all had their own `0.7` for the same part. `gog-textarea` keeps its own `1` deliberately:
-     its clear button sits in a corner rather than in the field's icon row. */
-  --gog-control-clear-icon-ratio: 0.7;
-  --gog-control-border-width: 2px;
-  --gog-control-border-style: solid;
-
-  --gog-control-checkbox-box-size-xsm: 12px;
-  --gog-control-checkbox-box-size-sm: 18px;
-  --gog-control-checkbox-box-size-md: 24px;
-  --gog-control-checkbox-box-size-lg: 32px;
-  --gog-control-checkbox-box-size-slg: 40px;
-  --gog-control-checkbox-label-size-xsm: 0.6875rem;
-  --gog-control-checkbox-label-size-sm: 0.8125rem;
-  --gog-control-checkbox-label-size-md: 0.9375rem;
-  --gog-control-checkbox-label-size-lg: 1.0625rem;
-  --gog-control-checkbox-label-size-slg: 1.1875rem;
-  --gog-control-checkbox-icon-size-xsm: 10px;
-  --gog-control-checkbox-icon-size-sm: 12px;
-  --gog-control-checkbox-icon-size-md: 14px;
-  --gog-control-checkbox-icon-size-lg: 18px;
-  --gog-control-checkbox-icon-size-slg: 22px;
-
-  /* ── Button sizing ─────────────────────────────────────────────────────────── */
-
-  /* ── 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;
-
-  /* ── Float label geometry (input / textarea / select / multiselect) ─────────
-     One scale for every field that can float its label. Each control reads these
-     through its own `--gog-<block>-float-label-*` token in the derived layer below,
-     so setting a value here retunes all of them at once while a single control can
-     still be tuned on its own. `reserve` is the headroom added inside the field for
-     the 'in'/'on' variants; `in-top` is where the label lands once floated for 'in';
-     `over-gap`/`over-reserve` are the gap above the border and the space permanently
-     kept clear for the 'over' variant. */
-  --gog-field-float-label-reserve: 14px;
-  --gog-field-float-label-in-top: 6px;
-  --gog-field-float-label-over-reserve: 1.4em;
-
-  /* ── Icon & spinner ───────────────────────────────────────────────────────── */
-  --gog-icon-size: 1.2em;
-  --gog-icon-stroke-width: 2;
-  --gog-spinner-size-xsm: 12px;
-  --gog-spinner-size-sm: 18px;
-  --gog-spinner-size-md: 48px;
-  --gog-spinner-size-lg: 96px;
-  --gog-spinner-size-slg: 144px;
-  --gog-spinner-rune-size: 20px;
-
-  /* ── Toast stack ──────────────────────────────────────────────────────────── */
-  --gog-toast-min-width: 280px;
-  --gog-toast-max-width: 400px;
-  --gog-toast-z-index: 9999;
-  --gog-toast-enter-distance: 110%;
-  --gog-toast-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
-
-  /* ── Overlay stacking ───────────────────────────────────────────────────────
-     Baseline for dropdown panels. gog-dialog re-declares this on its own panel so
-     dropdowns opened inside a dialog stack above it. */
-  /* The library's stacking floor. Every layer below is `base + N`, so an app that has to put the
-     whole library above its own chrome moves this one number and keeps the internal order —
-     badge 1, toast 100, dropdowns and dialogs 300, tooltip 400, the blocking spinner overlay
-     8000. Before this, shifting the stack meant editing five tokens and hoping none was missed. */
-  --gog-z-base: 0;
-
-  /* ── Light palette (also the no-data-theme default) ───────────────────────── */
-  color-scheme: light;
-  /* 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; /* Muted kiln ink */
-
-  /* Brand and accents — guild gold leaf */
-  --gog-primary-color: #17120c;
-  /* 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;
-
-  /* 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);
-}
-
-:root[data-theme='light'],
-[data-theme='light'] {
-  color-scheme: light;
-
-  /* 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; /* Muted kiln ink */
-
-  /* Brand and accents — guild gold leaf */
-  --gog-primary-color: #17120c;
-  /* 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;
-
-  /* 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);
-}
-
-:root[data-theme='dark'],
-[data-theme='dark'] {
-  color-scheme: dark;
-
-  /* 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; /* Muted bronze */
-
-  /* Brand and accents — the alchemist's glowing gold */
-  --gog-primary-color: #f3ebd8;
-  --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;
-
-  /* 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);
-}
-
-/*
- * ── Derived layer ───────────────────────────────────────────────────────────────
- * Re-declared on every theme scope so each one re-derives from its own palette and
- * metrics. Everything here reads another token; nothing here is a bare literal.
- */
-:root,
-[data-theme] {
-  /* ── Derived foundation tokens ───────────────────────────────────────────────
-     Split out of the literal block above because they read other tokens: they have
-     to re-resolve inside each theme scope. */
-
-  /* ── Text on a status fill ───────────────────────────────────────────────────
-     `--gog-accent-text-color` means "text on the accent fill" and flips with the theme, which
-     made it the obvious label for a status fill too — `gogBadge` used it for all four. It is
-     wrong for some of them, and silently: measured 2026-09-04, `material`'s amber under white
-     was 1.97:1 and `primeng`'s green 2.28:1, both far under AA, in a pair no check had. The
-     accent is one colour a theme tunes deliberately; the four statuses are four more, and
-     nothing says one label reads on all five.
-
-     So each status names its own, defaulting to the accent's answer because that is right in
-     seven of the eleven themes. A theme states one of these only where its own hue disagrees —
-     `material` puts near-black on its amber, which is Material 3's own convention, and `primeng`
-     does the same on all three of Aura's bright hues. Where *neither* label reached AA the hue
-     itself moved instead; see the preset files. */
-  --gog-success-text-color: var(--gog-accent-text-color, var(--gog-primary-color));
-  --gog-danger-text-color: var(--gog-accent-text-color, var(--gog-primary-color));
-  --gog-warning-text-color: var(--gog-accent-text-color, var(--gog-primary-color));
-  --gog-info-text-color: var(--gog-accent-text-color, var(--gog-primary-color));
-
-  /* Which way a status fill deepens when it is hovered or held: **away from its own label**, so
-     the step always makes the label easier to read rather than harder. That is the theme's ink
-     for a fill wearing the accent's white, which is nine of the eleven themes — and the other way
-     round for the four fills whose label is the ink itself, `material`'s amber and `primeng`'s
-     three, which say so in their own files. Mixing toward a fixed colour instead is what a first
-     pass did, and it cost `primeng`'s info button 6.44:1 down to 4.23:1 on press: deepening
-     toward the ink walked the fill into the label. */
-  --gog-success-shade: var(--gog-text-color);
-  --gog-danger-shade: var(--gog-text-color);
-  --gog-warning-shade: var(--gog-text-color);
-  --gog-info-shade: var(--gog-text-color);
-  /* ── Stacking layers ─────────────────────────────────────────────────────────
-     All five read `--gog-z-base`, so the whole library moves together. The gaps are
-     deliberate: an app that needs to slot its own element between two of these has room
-     without touching the library's numbers. */
-  --gog-badge-z: calc(var(--gog-z-base) + 1);
-  --gog-toast-base-z: calc(var(--gog-z-base) + 100);
-  --gog-dropdown-z: calc(var(--gog-z-base) + 300);
-  --gog-tooltip-z: calc(var(--gog-z-base) + 400);
-  /* The blocking overlay outranks everything, including a dialog it may be covering. */
-  --gog-spinner-overlay-z: calc(var(--gog-z-base) + 8000);
-
-  --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);
-  /* The only field metric that is a type size; the rest of this block is geometry. It lives
-     here rather than with them because it reads a token, and a derived value declared on the
-     literals-only `:root` freezes to that scope's scale (rule C). */
-  --gog-field-slg-font-size: var(--gog-text-slg);
-
-  --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);
-
-  /* ══════════════════════════════════════════════════════════════════════════════
-     COMPONENT TOKENS
-     Everything below is what an individual component paints with. Override a block
-     to restyle just that component; the values themselves all derive from the
-     foundation tokens above, so a palette swap carries through for free.
-     ══════════════════════════════════════════════════════════════════════════════ */
-
-  /* ── Accordion ─────────────────────────────────────────────────────────────── */
-  --gog-accordion-font-family: var(--gog-font-heading);
-  --gog-accordion-body-font-family: var(--gog-font-body);
-  --gog-accordion-border-color: var(--gog-accent-dim);
-  --gog-accordion-border-width: var(--gog-control-border-width);
-  --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: var(--gog-hover-color);
-  /* The header's label stays body text while hovered or held, and the lift is carried by the
-     background alone. It turned `--gog-accordion-accent-color` until 21.9.0, which is the accent
-     — on an accent-tinted strip that measured 3.61:1 in light, 3.79:1 in one-light and 4.09:1 in
-     ledger, and worse again once the press deepened the tint. Same trade as the ghost button's
-     hover, and made for the same reason: the accent is not a text colour on a ground that is
-     itself tinted with the accent. */
-  --gog-accordion-hover-color: var(--gog-accordion-text-color);
-  --gog-accordion-press-bg: var(--gog-border-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: var(--gog-line-height-loose);
-  --gog-accordion-header-text-transform: var(--gog-text-transform);
-  --gog-accordion-header-gap: var(--gog-space-12);
-  --gog-accordion-disabled-opacity: var(--gog-disabled-opacity);
-  --gog-accordion-transition-duration: var(--gog-duration-base);
-  --gog-accordion-body-transition-duration: var(--gog-duration-slow);
-  --gog-accordion-chevron-transition-duration: var(--gog-duration-slow);
-  --gog-accordion-body-lift: -2px;
-  /* Flat by default — corner rounding is a look, not a given; consumers who want it
-     opt in per-instance or theme-wide by overriding these two. */
-  --gog-accordion-radius: 0px;
-  --gog-accordion-body-radius: 0px;
-  /* 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: 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: var(--gog-space-2);
-  --gog-accordion-xsm-body-font-size: var(--gog-text-xs);
-  --gog-accordion-xsm-body-line-height: var(--gog-line-height-relaxed);
-  --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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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;
-
-  /* ── Collapsible ───────────────────────────────────────────────────────────
-     No portal, no owned markup — see utilities.css for the actual `.gog-collapsible__*`
-     rules (they style content this component's consumer projects, which sits outside
-     `gog-collapsible`'s own view and can't be reached by its scoped stylesheet). */
-  --gog-collapsible-transition-duration: var(--gog-duration-slow);
-  /* The panel's natural height, so an open panel never truncates whatever it holds. This was
-     a fixed `480px` cap, which bought the CSS-only transition an animatable target but paid
-     for it by silently clipping any taller content — `overflow: hidden` means no scrollbar
-     and no other sign that the rest of the panel is missing. `max-content` still animates,
-     via `interpolate-size: allow-keywords` on the content element (see utilities.css); where
-     that is unsupported the panel snaps open instead of easing, which is the right way round
-     for the trade — losing an animation is visible and harmless, losing content is neither.
-     Set a length here to cap a particular panel on purpose; it will clip, as before. */
-  --gog-collapsible-max-height: max-content;
-  --gog-collapsible-disabled-opacity: var(--gog-disabled-opacity);
-
-  /* ── Button ────────────────────────────────────────────────────────────────
-     `--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. */
-  --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: var(--gog-text-xs);
-  --gog-button-sm-font-size: var(--gog-text-sm);
-  --gog-button-md-font-size: var(--gog-text-md);
-  --gog-button-lg-font-size: var(--gog-text-lg);
-  --gog-button-slg-font-size: var(--gog-text-slg);
-
-  --gog-button-font-family: var(--gog-font-heading);
-  --gog-button-font-weight: var(--gog-font-weight-heavy);
-  --gog-button-letter-spacing: var(--gog-letter-spacing);
-  --gog-button-text-transform: var(--gog-text-transform);
-  --gog-button-line-height: var(--gog-line-height-none);
-  --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);
-  /* One pixel further out than the foundation ring: a filled surface needs the extra air for
-     the ring to read as separate from the fill. Written as the foundation plus that pixel
-     rather than a flat 3px, so a theme that moves the ring moves this with it. */
-  --gog-button-focus-ring-offset: calc(var(--gog-focus-ring-offset) + 1px);
-  /* Shipped since before the press had a colour, and left spelled `active` on purpose: renaming
-     a token consumers already override needs a deprecation cycle, and this is a patch. The state
-     it names is the same one `--gog-button-press-*` paints. */
-  --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-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-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);
-  /* The label sits on the accent fill once the button is hovered, so it takes the token that
-     means "text on an accent fill" — the same one the two filled variants use. It read
-     `--gog-primary-color` until 21.9.0, which is the colour of text on the *page*, and the
-     result failed WCAG AA in all 11 shipped themes: 1.11:1 in one-dark, 1.41:1 in dark, 3.65:1
-     in light at best. It was invisible to `check:contrast` because that script had no pair for
-     this label, the same way it had none for the hover fill until 2026-08-29. It has both now. */
-  --gog-button-outline-hover-color: var(--gog-accent-text-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);
-  /* The label leaves the accent while the ground is tinted, and that is the only thing that
-     works here. Ghost's resting label *is* `--gog-accent-color`, and its hover tints the ground
-     with the same accent, so the two walk toward each other: measured across all 11 themes, the
-     label fell under 4.5:1 in `light` (3.94), `primeng` (4.18) and `one-light` (4.22). No ground
-     fixes it — a half-strength wash, a neutral `--gog-hover-color`, a text scrim and an
-     accent-dim wash were all measured, and `light` fails every one of them, because
-     `--gog-accent-color` as *text* on that theme's own background is 4.60:1 with no headroom to
-     spend. Moving the label to `--gog-text-color` clears 5.29:1 at worst (one-dark) and leaves
-     the ground exactly as it was, so the hover stays the subtle wash this variant is documented
-     to have. The press then goes the other way and fills — see `-press-bg` below. */
-  --gog-button-ghost-hover-color: var(--gog-text-color);
-  --gog-button-ghost-hover-shadow: none;
-  --gog-button-ghost-spinner-color: var(--gog-accent-color);
-
-  /* The held state, and the reason it is a colour rather than only the `--gog-button-active-scale`
-     it used to be: `prefers-reduced-motion` switches that transform off, which left a button with
-     no press feedback at all for the readers most likely to need it. A colour change is a state,
-     not a movement — reduced motion keeps it and only drops the scale, and with transitions off it
-     lands instantly. See docs/feedback-triage.md's closing section: reduced motion must remove the
-     animation, not the information.
-
-     Each variant goes one step *deeper* than its own hover, so pressing is distinguishable while
-     hovering, which is the normal case for a pointer. `--gog-accent-dim` is that step for the
-     three accent-carrying variants; ghost has no fill of its own to deepen, so it takes a
-     stronger wash of the same tint its hover uses (see the @supports block at the end of this
-     file for the mixed value and why the flat one above it is not a fallback but the value). */
-  /* The *toggle* state — `aria-pressed="true"`, a button that stays on — as an inset ring rather
-     than a fill. A fill cannot carry it: every other state already owns the background, so a
-     toggled button that is also hovered or held would lose the one thing saying it is on. A ring
-     composes with all of them, and it is the same reasoning that made `gog-button-toggle-group`'s
-     selected option a fill: there, nothing else was competing for the background.
-
-     The ring takes the colour that is guaranteed to read on its own variant — the label colour on
-     the filled two, the accent on the transparent two — so both are pairs `check:contrast`
-     already gates. While toggled, this replaces the variant's `box-shadow`, which costs
-     `primary` its hover glow: the ring is state and the glow is decoration, and a `box-shadow`
-     list cannot hold `none` as a layer, so keeping both was not on offer. */
-  --gog-button-toggled-ring-width: 2px;
-  --gog-button-primary-toggled-shadow: inset 0 0 0 var(--gog-button-toggled-ring-width)
-    var(--gog-accent-text-color, var(--gog-primary-color));
-  --gog-button-secondary-toggled-shadow: var(--gog-button-primary-toggled-shadow);
-  --gog-button-outline-toggled-shadow: inset 0 0 0 var(--gog-button-toggled-ring-width)
-    var(--gog-accent-color);
-  --gog-button-ghost-toggled-shadow: var(--gog-button-outline-toggled-shadow);
-
-  --gog-button-primary-press-bg: var(--gog-accent-dim);
-  --gog-button-primary-press-color: var(--gog-button-primary-color);
-  --gog-button-secondary-press-bg: var(--gog-accent-dim);
-  --gog-button-secondary-press-color: var(--gog-button-secondary-color);
-  --gog-button-outline-press-bg: var(--gog-accent-dim);
-  --gog-button-outline-press-color: var(--gog-button-outline-hover-color);
-  /* Ghost presses to the same deep fill as outline, rather than to a wash like every other
-     surface in this file. Measured across all 11 themes: a wash cannot work here, because this
-     button's *label* is the accent, so tinting its ground with the accent walks the two together
-     — a 24% wash put the label under 4.5:1 in seven themes, and `--gog-accent-pale` was either
-     no better or invisible against the hover. A filled press moves the label to
-     `--gog-accent-text-color` instead, which is the pair `check:contrast` already gates, so no
-     future theme can quietly break it. The other eight surfaces keep their washes: their labels
-     are body text, and their worst case across the 11 is 4.80:1. */
-  --gog-button-ghost-press-bg: var(--gog-accent-dim);
-  --gog-button-ghost-press-color: var(--gog-accent-text-color, var(--gog-primary-color));
-
-  /* ── Button severity ─────────────────────────────────────────────────────────
-     `severity` is orthogonal to `variant`: a destructive action can be a filled button, an
-     outlined one or a ghost, and it is still destructive. So this is not a fifth variant — it
-     re-points the *ingredients* the four variants are built from, and the shape rules in
-     `styles/button.css` apply them per variant. Four severities x six ingredients rather than
-     four x four variants x eleven properties, which is what a fifth-variant reading would have
-     cost.
-
-     `-fill` and `-on-fill` are the filled pair, and `-on-fill` is `--gog-<status>-text-color`
-     rather than `--gog-accent-text-color`: see that block near the top of this file for why one
-     label does not read on every status.
-
-     `-ink` is the label a *transparent* variant paints, and it is not the raw status colour. As
-     text on the page, the raw hue clears 4.5:1 in only five of the eleven themes — `primeng`'s
-     amber manages 2.05:1 — so it is mixed toward the theme's own ink until it does. The 50% is
-     measured rather than chosen: `material`'s amber is the binding case and needs the hue below
-     54%, so 50 clears every theme with a little headroom. It costs saturation on the themes that
-     never needed it; a theme that wants the colour back overrides `--gog-button-<status>-ink`
-     directly, which is one token rather than a dial nobody would find. Mixing toward `--gog-text-color` rather than a
-     fixed black is what makes one number work on light and dark alike — the ink is dark on one
-     and light on the other, and both directions move *away* from the ground.
-
-     The hover and press fills move the same way, one small step and one larger, so a severity
-     button's states step the way an accent one's do. Moving toward the ink also moves away from
-     `-on-fill` in the seven themes where that is the accent's white-or-near-black, so the label
-     gets easier rather than harder; in the four where `-on-fill` *is* the ink, the rest state
-     starts at 6.44:1 or better and a 24% step cannot spend that. The flat values here are what a
-     browser without `color-mix()` renders — no step, the same graceful nothing the ghost button
-     degrades to — and the mixed ones are in the @supports block at the end of this file. */
-  --gog-button-success-fill: var(--gog-success-color);
-  --gog-button-success-on-fill: var(--gog-success-text-color);
-  --gog-button-success-fill-hover: var(--gog-success-color);
-  --gog-button-success-fill-press: var(--gog-success-color);
-  --gog-button-success-ink: var(--gog-success-color);
-  --gog-button-success-wash: transparent;
-
-  --gog-button-danger-fill: var(--gog-danger-color);
-  --gog-button-danger-on-fill: var(--gog-danger-text-color);
-  --gog-button-danger-fill-hover: var(--gog-danger-color);
-  --gog-button-danger-fill-press: var(--gog-danger-color);
-  --gog-button-danger-ink: var(--gog-danger-color);
-  --gog-button-danger-wash: transparent;
-
-  --gog-button-warning-fill: var(--gog-warning-color);
-  --gog-button-warning-on-fill: var(--gog-warning-text-color);
-  --gog-button-warning-fill-hover: var(--gog-warning-color);
-  --gog-button-warning-fill-press: var(--gog-warning-color);
-  --gog-button-warning-ink: var(--gog-warning-color);
-  --gog-button-warning-wash: transparent;
-
-  --gog-button-info-fill: var(--gog-info-color);
-  --gog-button-info-on-fill: var(--gog-info-text-color);
-  --gog-button-info-fill-hover: var(--gog-info-color);
-  --gog-button-info-fill-press: var(--gog-info-color);
-  --gog-button-info-ink: var(--gog-info-color);
-  --gog-button-info-wash: transparent;
-
-  /* ── 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-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: var(--gog-font-weight-bold);
-  --gog-button-toggle-letter-spacing: 0.5px;
-  --gog-button-toggle-text-transform: var(--gog-text-transform);
-  --gog-button-toggle-line-height: var(--gog-line-height-none);
-  --gog-button-toggle-gap: var(--gog-space-sm);
-  --gog-button-toggle-icon-size: 1.1em;
-  --gog-button-toggle-radius: var(--gog-radius);
-  --gog-button-toggle-border-width: var(--gog-control-border-width);
-  --gog-button-toggle-border-style: var(--gog-control-border-style);
-  --gog-button-toggle-border-color: var(--gog-border-color);
-  --gog-button-toggle-rest-bg: transparent;
-  --gog-button-toggle-rest-color: var(--gog-text-color);
-  --gog-button-toggle-hover-bg: var(--gog-hover-color);
-  --gog-button-toggle-press-bg: var(--gog-border-color);
-  --gog-button-toggle-hover-color: var(--gog-text-color);
-  --gog-button-toggle-selected-bg: var(--gog-accent-color);
-  --gog-button-toggle-selected-color: var(--gog-accent-text-color, var(--gog-primary-color));
-  --gog-button-toggle-selected-border-color: var(--gog-accent-color);
-  /* A selected option is already filled with the accent, so its press deepens the fill the way
-     the filled button variants do rather than washing over it. */
-  --gog-button-toggle-selected-press-bg: var(--gog-accent-dim);
-  --gog-button-toggle-separated-gap: var(--gog-space-sm);
-  --gog-button-toggle-transition-duration: var(--gog-duration-base);
-  --gog-button-toggle-disabled-opacity: var(--gog-disabled-opacity);
-  --gog-button-toggle-focus-ring-width: var(--gog-focus-ring-width);
-  --gog-button-toggle-focus-ring-offset: var(--gog-focus-ring-offset);
-  --gog-button-toggle-focus-ring-color: var(--gog-accent-color);
-
-  /* ── Calendar (the month grid inside gog-datepicker, and gog-calendar on its own) ── */
-  --gog-calendar-font-family: var(--gog-font-body);
-  --gog-calendar-color: var(--gog-text-color);
-  /* 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: var(--gog-space-12);
-  --gog-calendar-header-gap: var(--gog-space-4);
-  --gog-calendar-header-margin: var(--gog-space-8);
-  --gog-calendar-months-gap: var(--gog-space-16);
-  --gog-calendar-title-color: var(--gog-text-color);
-  --gog-calendar-title-font-weight: var(--gog-font-weight-bold);
-  --gog-calendar-nav-size: 28px;
-  --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);
-  --gog-calendar-nav-hover-color: var(--gog-text-color);
-  --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: 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: var(--gog-font-weight-semibold);
-  --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);
-  --gog-calendar-day-outside-color: var(--gog-muted-text-color);
-  --gog-calendar-today-border-color: var(--gog-accent-color);
-  --gog-calendar-today-font-weight: var(--gog-font-weight-bold);
-  --gog-calendar-selected-bg: var(--gog-accent-color);
-  --gog-calendar-selected-color: var(--gog-accent-text-color, var(--gog-primary-color));
-  --gog-calendar-selected-font-weight: var(--gog-font-weight-bold);
-  /* 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: 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);
-  --gog-calendar-focus-ring-width: var(--gog-focus-ring-width);
-  /* Inset rather than outset: the month grid packs its cells edge to edge, so an outward ring
-     would sit on top of the neighbouring day. Negated from the foundation so a theme still
-     controls how far it sits from the cell edge. */
-  --gog-calendar-focus-ring-offset: calc(var(--gog-focus-ring-offset) * -1);
-  --gog-calendar-focus-ring-color: var(--gog-accent-color);
-  --gog-calendar-divider-width: 1px;
-  --gog-calendar-divider-style: solid;
-  --gog-calendar-divider-color: var(--gog-border-color);
-  --gog-calendar-time-gap: var(--gog-space-6);
-  --gog-calendar-time-margin: var(--gog-space-10);
-  --gog-calendar-time-input-width: 3.5rem;
-  --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: 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);
-  --gog-calendar-sm-day-size: 28px;
-  --gog-calendar-md-font-size: var(--gog-text-sm);
-  --gog-calendar-md-day-size: 34px;
-  --gog-calendar-lg-font-size: var(--gog-text-md);
-  --gog-calendar-lg-day-size: 40px;
-  --gog-calendar-slg-font-size: var(--gog-text-lg);
-  --gog-calendar-slg-day-size: 46px;
-
-  /* ── Card ──────────────────────────────────────────────────────────────────
-     `--gog-card-bg`, `--gog-card-border-color`, `--gog-card-shadow`, `--gog-card-padding-y`,
-     `--gog-card-padding-x` and `--gog-card-gap` are intentionally NOT declared — they are the
-     per-instance escape hatch the variant and size classes fall back through. */
-  --gog-card-font-family: var(--gog-font-body);
-  --gog-card-color: var(--gog-text-color);
-  --gog-card-radius: var(--gog-radius);
-  --gog-card-border-width: var(--gog-panel-border-width);
-  --gog-card-border-style: var(--gog-panel-border-style);
-  --gog-card-transition-duration: var(--gog-duration-base);
-
-  --gog-card-heading-color: var(--gog-text-color);
-  --gog-card-heading-font-family: var(--gog-font-heading);
-  --gog-card-heading-font-size: var(--gog-text-lg);
-  --gog-card-heading-font-weight: var(--gog-font-weight-semibold);
-  --gog-card-heading-line-height: var(--gog-line-height-snug);
-
-  --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-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: 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: 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);
-  --gog-card-focus-ring-offset: var(--gog-focus-ring-offset);
-  --gog-card-disabled-opacity: var(--gog-disabled-opacity);
-
-  --gog-card-footer-border-color: var(--gog-border-color);
-  --gog-card-footer-gap: var(--gog-space-sm);
-  --gog-card-footer-padding-top: var(--gog-space-sm);
-
-  --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: 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: 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: 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);
-  --gog-checkbox-border-color: var(--gog-accent-dim);
-  --gog-checkbox-bg: var(--gog-surface-color);
-  --gog-checkbox-checked-bg: var(--gog-accent-color);
-  --gog-checkbox-checked-border: var(--gog-accent-color);
-  --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: var(--gog-line-height-snug);
-  --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);
-  --gog-checkbox-transition-duration: var(--gog-duration-base);
-  --gog-checkbox-dash-width-ratio: 0.45;
-  --gog-checkbox-dash-height: 2px;
-  --gog-checkbox-dash-radius: 999px;
-
-  /* ── Radio group ───────────────────────────────────────────────────────────
-     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: 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: 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);
-  --gog-radio-bg: var(--gog-surface-color);
-  --gog-radio-checked-bg: var(--gog-surface-color);
-  --gog-radio-checked-border: var(--gog-accent-color);
-  --gog-radio-dot-color: var(--gog-accent-color);
-  --gog-radio-dot-size-ratio: 0.45;
-  --gog-radio-label-color: var(--gog-muted-text-color);
-  --gog-radio-label-line-height: var(--gog-line-height-snug);
-  --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);
-  --gog-radio-transition-duration: var(--gog-duration-base);
-  --gog-radio-error-font-size: var(--gog-text-xs);
-  --gog-radio-error-color: var(--gog-danger-color);
-
-  /* ── Chip ──────────────────────────────────────────────────────────────────
-     `--gog-chip-*` size tokens below are the per-size scale; the unsuffixed
-     `--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: var(--gog-surface-color);
-  --gog-chip-hover-bg: var(--gog-hover-color);
-  --gog-chip-press-bg: var(--gog-border-color);
-  --gog-chip-border: var(--gog-border-color);
-  --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: var(--gog-font-weight-medium);
-  --gog-chip-line-height: var(--gog-line-height-tight);
-  --gog-chip-radius: max(var(--gog-radius), 2px);
-  --gog-chip-pill-radius: 9999px;
-  --gog-chip-remove-color: var(--gog-muted-text-color);
-  --gog-chip-remove-hover-color: var(--gog-text-color);
-  --gog-chip-remove-scale: 1.1;
-  --gog-chip-avatar-inset-ratio: 0.9;
-  --gog-chip-remove-inset-ratio: 0.85;
-  --gog-chip-disabled-opacity: var(--gog-disabled-opacity);
-  /* A selected filter chip (`[(selected)]`, 21.9.0). An inset ring for the reason
-     `--gog-button-primary-toggled-shadow` gives: hover and press own the background, and a
-     selected chip has to stay selected while it is also hovered or held. The accent, so it is
-     the same pair the focus ring is already gated on — and unlike the button there is only one
-     chip variant, so one token covers it. Override this token on the host to restyle a single
-     chip. */
-  --gog-chip-selected-ring-width: 2px;
-  --gog-chip-selected-shadow: inset 0 0 0 var(--gog-chip-selected-ring-width)
-    var(--gog-accent-color);
-  --gog-chip-focus-ring-width: 2px;
-  --gog-chip-focus-ring-offset: var(--gog-focus-ring-offset);
-
-  --gog-chip-xsm-font-size: 0.6875rem;
-  --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: var(--gog-text-xs);
-  --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: var(--gog-text-sm);
-  --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: var(--gog-text-md);
-  --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: var(--gog-text-lg);
-  --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;
-
-  /* ── Dialog ────────────────────────────────────────────────────────────────── */
-  --gog-dialog-font-family: var(--gog-font-heading);
-  /* Deliberately a flat value rather than a palette derivation: the scrim has to read
-     the same over any page content. Restate it per theme if a lighter wash suits. */
-  --gog-dialog-backdrop-bg: rgba(10, 8, 3, 0.72);
-  --gog-dialog-backdrop-blur: 2px;
-  --gog-dialog-backdrop-padding: var(--gog-space-lg);
-  --gog-dialog-backdrop-fade-duration: var(--gog-duration-base);
-  --gog-dialog-enter-duration: var(--gog-duration-slow);
-  --gog-dialog-enter-distance: -12px;
-  --gog-dialog-bg: var(--gog-surface-color);
-  --gog-dialog-color: var(--gog-text-color);
-  --gog-dialog-border: var(--gog-border-color);
-  --gog-dialog-border-width: var(--gog-panel-border-width);
-  --gog-dialog-border-style: var(--gog-panel-border-style);
-  --gog-dialog-radius: var(--gog-radius);
-  --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: 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: 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: var(--gog-text-sm);
-  --gog-dialog-close-color: var(--gog-muted-text-color);
-  --gog-dialog-close-hover-color: var(--gog-text-color);
-  --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-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
-     `--gog-field-<size>-*` scale, so it lines up with `gog-inputfield` and `gog-select` in a
-     form. `--gog-autocomplete-bg`, `-color`, `-font-size`, `-padding-x` and `-padding-y` are
-     intentionally NOT declared — they are the per-instance escape hatch the size classes fall
-     back through. */
-  --gog-autocomplete-font-family: var(--gog-font-body);
-  --gog-autocomplete-label-font-family: var(--gog-font-heading);
-  --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: var(--gog-font-weight-semibold);
-  --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);
-  --gog-autocomplete-border-width: var(--gog-control-border-width);
-  --gog-autocomplete-border-style: var(--gog-control-border-style);
-  --gog-autocomplete-border-color: var(--gog-accent-dim);
-  --gog-autocomplete-hover-border-color: var(--gog-accent-color);
-  --gog-autocomplete-radius: var(--gog-radius);
-  --gog-autocomplete-line-height: var(--gog-line-height-normal);
-  --gog-autocomplete-transition-duration: var(--gog-duration-base);
-  --gog-autocomplete-disabled-opacity: var(--gog-disabled-opacity);
-  --gog-autocomplete-focus-ring-width: var(--gog-focus-ring-width);
-  --gog-autocomplete-focus-ring-offset: var(--gog-focus-ring-offset);
-  --gog-autocomplete-focus-ring-color: var(--gog-accent-color);
-  --gog-autocomplete-error-color: var(--gog-danger-color);
-  --gog-autocomplete-error-border-color: var(--gog-danger-color);
-  --gog-autocomplete-error-font-family: var(--gog-font-body);
-  --gog-autocomplete-error-font-size: var(--gog-text-xs);
-  /* Floor for an auto-width field, so [fullWidth]="false" cannot collapse it to its chrome. */
-  --gog-autocomplete-min-width: 120px;
-  /* 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: 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);
-  --gog-autocomplete-clear-hover-color: var(--gog-autocomplete-label-color);
-  --gog-autocomplete-clear-icon-ratio: var(--gog-control-clear-icon-ratio);
-  --gog-autocomplete-spinner-size: 0.875rem;
-  /* Panel */
-  --gog-autocomplete-panel-bg: var(--gog-surface-color);
-  --gog-autocomplete-panel-shadow: var(--gog-panel-shadow);
-  --gog-autocomplete-panel-border-width: var(--gog-panel-border-width);
-  --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: 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: 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: var(--gog-hover-color);
-  --gog-autocomplete-option-press-bg: var(--gog-border-color);
-  --gog-autocomplete-option-hover-color: var(--gog-text-color);
-  --gog-autocomplete-option-selected-bg: var(--gog-accent-pale);
-  /* Body text, not the accent. The selected row is the one option that carries a tint *and* a
-     coloured label, and the accent on that tint measured 4.12:1 in light — `--gog-accent-dim` is
-     worse again (3.77:1 in one-dark). `gog-select` gets away with an accent label because its
-     selected option has no tint behind it. The tint stays as the marker, alongside
-     `aria-selected`. */
-  --gog-autocomplete-option-selected-color: var(--gog-text-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. */
-  --gog-autocomplete-option-height: 36px;
-  --gog-autocomplete-empty-color: var(--gog-autocomplete-placeholder-color);
-  --gog-autocomplete-empty-font-size: var(--gog-text-sm);
-  --gog-autocomplete-float-label-reserve: var(--gog-field-float-label-reserve);
-  --gog-autocomplete-float-label-in-top: var(--gog-field-float-label-in-top);
-  --gog-autocomplete-float-label-over-gap: var(--gog-field-float-label-over-gap);
-  --gog-autocomplete-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
-
-  /* ── Badge (the `gogBadge` directive; its classes live in utilities.css) ───── */
-  --gog-badge-font-family: var(--gog-font-body);
-  --gog-badge-font-size: var(--gog-text-xs);
-  --gog-badge-font-weight: var(--gog-font-weight-semibold);
-  --gog-badge-line-height: var(--gog-line-height-none);
-  /* Min-width *and* height: a one-digit badge stays a circle, a three-digit one grows
-     sideways only. */
-  --gog-badge-size: 1.25rem;
-  --gog-badge-dot-size: 0.5rem;
-  --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: var(--gog-space-6);
-  --gog-badge-border-width: 0;
-  --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). */
-  /* Each label is its status's own "text on this fill" token, which flips with the theme — a red
-     badge reads white on light and near-black on dark. It read `--gog-accent-text-color` for all
-     four until 21.9.0, on the assumption that one label works on every fill; four themes proved
-     otherwise, `material`'s amber under white at 1.97:1 the worst of them. See the
-     `--gog-<status>-text-color` block near the top of this file. */
-  --gog-badge-success-bg: var(--gog-success-color);
-  --gog-badge-success-color: var(--gog-success-text-color);
-  --gog-badge-danger-bg: var(--gog-danger-color);
-  --gog-badge-danger-color: var(--gog-danger-text-color);
-  --gog-badge-warning-bg: var(--gog-warning-color);
-  --gog-badge-warning-color: var(--gog-warning-text-color);
-  --gog-badge-info-bg: var(--gog-info-color);
-  --gog-badge-info-color: var(--gog-info-text-color);
-
-  /* ── Datepicker (the field; the grid inside it is themed by --gog-calendar-*) ───
-     `--gog-datepicker-bg`, `-color`, `-font-size`, `-padding-x` and `-padding-y` are
-     intentionally NOT declared — they are the per-instance escape hatch the size classes fall
-     back through. */
-  --gog-datepicker-font-family: var(--gog-font-body);
-  --gog-datepicker-label-font-family: var(--gog-font-heading);
-  --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: 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);
-  --gog-datepicker-border-width: var(--gog-control-border-width);
-  --gog-datepicker-border-style: var(--gog-control-border-style);
-  --gog-datepicker-border-color: var(--gog-accent-dim);
-  --gog-datepicker-hover-border-color: var(--gog-accent-color);
-  --gog-datepicker-radius: var(--gog-radius);
-  --gog-datepicker-line-height: var(--gog-line-height-normal);
-  --gog-datepicker-transition-duration: var(--gog-duration-base);
-  --gog-datepicker-disabled-opacity: var(--gog-disabled-opacity);
-  --gog-datepicker-focus-ring-width: var(--gog-focus-ring-width);
-  --gog-datepicker-focus-ring-offset: var(--gog-focus-ring-offset);
-  --gog-datepicker-focus-ring-color: var(--gog-accent-color);
-  --gog-datepicker-error-color: var(--gog-danger-color);
-  --gog-datepicker-error-border-color: var(--gog-danger-color);
-  --gog-datepicker-error-font-family: var(--gog-font-body);
-  --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: 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);
-  --gog-datepicker-icon-hover-color: var(--gog-accent-bright);
-  --gog-datepicker-toggle-icon-size: 1rem;
-  --gog-datepicker-clear-color: var(--gog-datepicker-placeholder-color);
-  --gog-datepicker-clear-icon-ratio: var(--gog-control-clear-icon-ratio);
-  --gog-datepicker-panel-bg: var(--gog-surface-color);
-  --gog-datepicker-panel-shadow: var(--gog-panel-shadow);
-  --gog-datepicker-panel-border-width: var(--gog-panel-border-width);
-  --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: 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;
-  --gog-datepicker-float-label-reserve: var(--gog-field-float-label-reserve);
-  --gog-datepicker-float-label-in-top: var(--gog-field-float-label-in-top);
-  --gog-datepicker-float-label-over-gap: var(--gog-field-float-label-over-gap);
-  --gog-datepicker-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
-
-  /* ── Divider ───────────────────────────────────────────────────────────────── */
-  --gog-divider-line-color: var(--gog-border-color);
-  --gog-divider-line-thickness: 1px;
-  /* The variant classes map onto these, so a theme can decide what "dashed" looks like
-     rather than the value being frozen into the component's stylesheet. */
-  --gog-divider-solid-style: solid;
-  --gog-divider-dashed-style: dashed;
-  --gog-divider-dotted-style: dotted;
-  --gog-divider-block-spacing: var(--gog-space-md);
-  --gog-divider-inline-spacing: var(--gog-space-md);
-  --gog-divider-inset-size: var(--gog-space-lg);
-  /* Floor for a vertical divider with nothing to stretch to — e.g. between two inline
-     buttons. In a flex/grid row it stretches to the row instead. */
-  --gog-divider-vertical-length: 1.5em;
-  --gog-divider-label-gap: var(--gog-space-sm);
-  --gog-divider-label-color: var(--gog-muted-text-color);
-  --gog-divider-label-font-family: var(--gog-font-body);
-  --gog-divider-label-font-size: var(--gog-text-sm);
-  --gog-divider-label-font-weight: var(--gog-font-weight-medium);
-  --gog-divider-label-line-height: var(--gog-line-height-normal);
-
-  /* ── Icon ──────────────────────────────────────────────────────────────────── */
-  --gog-icon-fallback-size: 1em;
-
-  /* ── Input field ───────────────────────────────────────────────────────────── */
-  --gog-input-font-family: var(--gog-font-body);
-  --gog-input-label-font-family: var(--gog-font-heading);
-  --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: 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);
-  --gog-input-field-border-style: var(--gog-control-border-style);
-  --gog-input-radius: var(--gog-radius);
-  --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: 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);
-  --gog-input-error-color: var(--gog-danger-color);
-  --gog-input-error-font-size: var(--gog-text-xs);
-  /* Extra space above the error line, *on top of* the host's own `--gog-input-gap`, which
-     already separates every child of the field. It shipped as `2px` and put this field's error
-     6px under it while `gog-select`, `gog-autocomplete` and `gog-datepicker` — same gap, no
-     offset — sat at 4px; in one form the six did not line up. Zero by default since 21.9.0, so
-     one mechanism spaces the error line everywhere. Set it if you want this field's error
-     pushed further than the rest. */
-  --gog-input-error-offset: 0px;
-  --gog-input-icon-color: var(--gog-muted-text-color);
-  --gog-input-icon-hover-color: var(--gog-accent-color);
-  --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: 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. */
-  /* Clear button — only rendered once the field has text, see `clearable`.
-
-     A quarter of the corner radius rather than a flat `2px`, which is what this was until
-     21.9.0: at the default `--gog-radius: 8px` it computes to the same 2px, so nothing moves in
-     any shipped theme, but a theme that rounds its corners now rounds this button too. The
-     literal was invisible to `check-tokens` rule G by design — that rule flags a literal only
-     when its value *equals* a character token's current one, so a pill's `999px` is correctly
-     left alone and a small arbitrary number like this one is correctly not detectable. The two
-     sibling controls below carry the same fix.
-
-     `gog-toast` and `gog-accordion` keep their flat `0px` on purpose: those are a chosen shape,
-     not a number that forgot where it came from. */
-  --gog-input-clear-radius: calc(var(--gog-radius) / 4);
-  --gog-input-clear-icon-ratio: var(--gog-control-clear-icon-ratio);
-  /*
-     The textarea's clear button gets a full-size glyph. The 0.7 ratio above suits the dense
-     single-line trigger of a dropdown; on a large multi-line box it reads as a speck.
-  */
-  --gog-textarea-clear-icon-ratio: 1;
-  /* Custom resize grip — see the `::-webkit-resizer` comment in textarea.component.scss for
-     why this replaces rather than restyles the native glyph. Colour follows the field's own
-     border by default, not a fixed muted grey, so it reads as part of the field rather than a
-     mismatched accent. */
-  --gog-textarea-resize-grip-size: 11px;
-  --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: 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
-     the component's own ResizeObserver — they close the gap that opens once the field has been
-     dragged narrower/shorter than its container. Declared here rather than left to a `var()`
-     fallback so the grip's resting geometry is discoverable in this file like everything else;
-     an inline style outranks this declaration, so the per-instance override still wins.
-  */
-  --gog-textarea-resize-inset-right: 0px;
-  --gog-textarea-resize-inset-bottom: 0px;
-  --gog-input-clear-inset: var(--gog-space-8);
-  /*
-     Width of one stepper button, and so of the whole stepper column. Scales with the field's
-     own font size rather than being a fixed px value, so it stays proportional across the five
-     sizes. Read in two places — the buttons themselves, and the offset that moves the clear
-     button clear of them on a clearable number field — which is why it is a token rather than
-     the same `calc()` written twice.
-  */
-  --gog-input-spin-width: calc(
-    var(--gog-input-size-font-size, var(--gog-field-md-font-size)) * 1.35
-  );
-  --gog-input-float-label-reserve: var(--gog-field-float-label-reserve);
-  --gog-input-float-label-in-top: var(--gog-field-float-label-in-top);
-  --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-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);
-  /* Zero by default since 21.9.0 — see `--gog-input-error-offset` for why. */
-  --gog-multiselect-error-offset: 0px;
-  --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: var(--gog-space-2);
-  --gog-multiselect-option-hover-bg: var(--gog-hover-color);
-  --gog-multiselect-option-press-bg: var(--gog-border-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: 40px;
-  --gog-multiselect-option-radius: calc(var(--gog-radius) - 2px);
-  --gog-multiselect-option-disabled-opacity: var(--gog-disabled-opacity);
-  --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-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);
-  /* A quarter of the corner radius — see `--gog-input-clear-radius` for why. */
-  --gog-multiselect-clear-radius: calc(var(--gog-radius) / 4);
-  --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-control-clear-icon-ratio);
-  --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
-     menu and a select opened from the same toolbar read as the same surface. */
-  --gog-menu-z: var(--gog-dropdown-z);
-  --gog-menu-bg: var(--gog-surface-color);
-  --gog-menu-border-color: var(--gog-border-color);
-  --gog-menu-border-width: var(--gog-control-border-width);
-  --gog-menu-border-style: var(--gog-control-border-style);
-  --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: var(--gog-space-4);
-  --gog-menu-gap: var(--gog-space-2);
-  --gog-menu-offset: var(--gog-space-4);
-  --gog-menu-min-width: 180px;
-  --gog-menu-max-width: 320px;
-  --gog-menu-max-height: 320px;
-  --gog-menu-transition-duration: var(--gog-duration-base);
-  --gog-menu-focus-ring: var(--gog-accent-color);
-  --gog-menu-focus-ring-width: var(--gog-focus-ring-width);
-  --gog-menu-item-color: var(--gog-text-color);
-  --gog-menu-item-hover-bg: var(--gog-hover-color);
-  /* The held state, same idea as the button's: one step past this surface's own hover, as a
-     colour rather than a movement, so `prefers-reduced-motion` cannot take it away. The flat
-     value here is what a browser without `color-mix()` gets; the tinted one is in the @supports
-     block at the end of the file. */
-  --gog-menu-item-press-bg: var(--gog-border-color);
-  --gog-menu-item-hover-color: var(--gog-text-color);
-  --gog-menu-item-font-size: var(--gog-text-sm);
-  --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);
-  --gog-menu-item-disabled-color: var(--gog-muted-text-color);
-  --gog-menu-item-line-height: var(--gog-line-height-normal);
-  --gog-menu-item-icon-size: 1em;
-
-  /* ── Paginator ─────────────────────────────────────────────────────────────── */
-  --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);
-  /* Enough for a three-digit page size plus the chevron, so the row doesn't shift on change. */
-  --gog-paginator-page-size-min-width: 5rem;
-  --gog-paginator-ellipsis-min-width: 32px;
-
-  /* ── Panel ─────────────────────────────────────────────────────────────────
-     The `gog-panel` component, which shares its prefix with the foundation surface tier
-     above (`--gog-panel-radius`, `--gog-panel-shadow`, `--gog-panel-border-width`,
-     `--gog-panel-border-style`) deliberately: a panel is the surface those describe, and a
-     theme that sets a house radius for raised surfaces should get it here too.
-
-     `--gog-panel-bg`, `--gog-panel-border-color`, `--gog-panel-padding-y`,
-     `--gog-panel-padding-x` and `--gog-panel-gap` are intentionally NOT declared — the
-     per-instance escape hatch. There is no `--gog-panel-*-shadow` twin of that hatch for the
-     elevated variant: it reads `--gog-panel-shadow` from a declaration the component makes on
-     its own host, so setting that token on one panel already changes only that panel. */
-  --gog-panel-font-family: var(--gog-font-body);
-  --gog-panel-color: var(--gog-text-color);
-  --gog-panel-transition-duration: var(--gog-duration-base);
-
-  --gog-panel-heading-color: var(--gog-text-color);
-  --gog-panel-heading-font-family: var(--gog-font-heading);
-  --gog-panel-heading-font-size: var(--gog-text-xl);
-  --gog-panel-heading-font-weight: var(--gog-font-weight-semibold);
-  --gog-panel-heading-line-height: 1.25;
-
-  --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-elevated-surface-color);
-  --gog-panel-elevated-border-color: transparent;
-  --gog-panel-filled-bg: var(--gog-accent-pale);
-  --gog-panel-filled-border-color: transparent;
-  --gog-panel-filled-shadow: none;
-
-  --gog-panel-header-gap: var(--gog-space-sm);
-  --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: 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);
-  --gog-panel-focus-ring-offset: var(--gog-focus-ring-offset);
-  --gog-panel-disabled-opacity: var(--gog-disabled-opacity);
-
-  --gog-panel-footer-border-color: var(--gog-border-color);
-  --gog-panel-footer-gap: var(--gog-space-sm);
-  --gog-panel-footer-padding-top: var(--gog-space-sm);
-
-  --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: var(--gog-space-14);
-  --gog-panel-sm-padding-x: var(--gog-space-md);
-  --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: var(--gog-space-28);
-  --gog-panel-lg-gap: var(--gog-space-md);
-  --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: var(--gog-border-color);
-  --gog-progressbar-radius: 999px;
-  --gog-progressbar-transition-duration: var(--gog-duration-slow);
-  --gog-progressbar-xsm-height: 2px;
-  --gog-progressbar-sm-height: 4px;
-  --gog-progressbar-md-height: 6px;
-  --gog-progressbar-lg-height: 10px;
-  --gog-progressbar-slg-height: 14px;
-  --gog-progressbar-value-gap: var(--gog-space-sm);
-  --gog-progressbar-value-min-width: 3ch;
-  --gog-progressbar-value-color: var(--gog-muted-text-color);
-  --gog-progressbar-value-font-family: var(--gog-font-body);
-  --gog-progressbar-value-font-size: var(--gog-text-sm);
-  --gog-progressbar-indeterminate-duration: 1.6s;
-  --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: 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: var(--gog-accent-pale);
-  --gog-progressbar-success-bg: var(--gog-success-color);
-  --gog-progressbar-success-buffer-bg: var(--gog-border-color);
-  --gog-progressbar-danger-bg: var(--gog-danger-color);
-  --gog-progressbar-danger-buffer-bg: var(--gog-border-color);
-  --gog-progressbar-warning-bg: var(--gog-warning-color);
-  --gog-progressbar-warning-buffer-bg: var(--gog-border-color);
-  --gog-progressbar-info-bg: var(--gog-info-color);
-  --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
-     own foreground, so one value works on a filled button and on a ghost one without a
-     per-variant tier. The property is inherited, so `--gog-ripple-color` set anywhere above
-     the host reaches it — which is the per-instance override, no undeclared tier needed. */
-  --gog-ripple-color: currentColor;
-  --gog-ripple-opacity: 0.16;
-  /* Longer than any other motion in the library, deliberately: a ripple held to the house 0.2s
-     is over before the eye has followed it across the surface. Still expressed in the
-     foundation scale, so setting the durations to 0s still flattens it theme-wide. */
-  --gog-ripple-enter-duration: calc(var(--gog-duration-slow) * 2);
-  --gog-ripple-exit-duration: var(--gog-duration-slow);
-  --gog-ripple-easing: var(--gog-easing);
-
-  /* ── Scroll ────────────────────────────────────────────────────────────────── */
-  --gog-scroll-track-bg: transparent;
-  --gog-scroll-track-radius: var(--gog-radius);
-  --gog-scroll-thumb-bg: var(--gog-accent-dim);
-  --gog-scroll-thumb-hover-bg: var(--gog-accent-color);
-  --gog-scroll-thumb-active-bg: var(--gog-accent-bright);
-  --gog-scroll-thumb-radius: var(--gog-radius);
-  --gog-scroll-thumb-inset: 2px;
-  --gog-scroll-corner-bg: transparent;
-  --gog-scroll-fade-duration: var(--gog-duration-base);
-  --gog-scroll-focus-ring: var(--gog-accent-color);
-  --gog-scroll-focus-ring-width: var(--gog-focus-ring-width);
-  /* Per-size pair for the two-tier `--gog-scroll-track-width`/`-thumb-min-size` chains
-     that scroll.component.scss's `.gog-scroll--thin` modifier switches between. `normal`
-     is the unmarked default, mirroring --gog-table-lg-*. */
-  --gog-scroll-normal-track-width: 10px;
-  --gog-scroll-thin-track-width: 6px;
-  --gog-scroll-normal-thumb-min-size: 32px;
-  --gog-scroll-thin-thumb-min-size: 24px;
-  /* Invisible pointer-target padding around the thumb (see .gog-scroll__thumb::before) — the
-     `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: 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: 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: 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);
-  --gog-select-field-border-style: var(--gog-control-border-style);
-  --gog-select-radius: var(--gog-radius);
-  --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: 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);
-  --gog-select-error-color: var(--gog-danger-color);
-  --gog-select-error-font-size: var(--gog-text-xs);
-  --gog-select-chevron-color: var(--gog-accent-color);
-  /*
-     Distance from the trigger's right edge to the trailing chrome, matching the leading icon
-     inset on gog-inputfield so a select, a multiselect and an input line up in one form. It is
-     applied as the trigger's `padding-right`, and the chevron sits inside that padding — so this
-     is the gap itself, not the gap plus the chevron. It used to be 40px, which double-counted
-     and put the chevron 42px from the edge.
-  */
-  --gog-select-chevron-inset: var(--gog-control-icon-offset);
-  /* Floor for an auto-width trigger, so [fullWidth]="false" cannot collapse it to the chevron. */
-  --gog-select-min-width: 120px;
-  /* 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: 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-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: 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`. */
-  /* A quarter of the corner radius — see `--gog-input-clear-radius` for why. */
-  --gog-select-clear-radius: calc(var(--gog-radius) / 4);
-  --gog-select-clear-icon-ratio: var(--gog-control-clear-icon-ratio);
-  --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: 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: var(--gog-space-2);
-  --gog-select-option-hover-bg: var(--gog-hover-color);
-  --gog-select-option-press-bg: var(--gog-border-color);
-  --gog-select-option-selected-color: var(--gog-accent-color);
-  --gog-select-option-color: var(--gog-text-color);
-  --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;
-  --gog-select-option-disabled-opacity: var(--gog-disabled-opacity);
-  --gog-select-option-transition-duration: var(--gog-duration-fast);
-  /* Icon geometry, expressed as a ratio of the control's font size. */
-  --gog-select-chevron-icon-ratio: 0.875;
-  --gog-select-mark-size-ratio: 1.125;
-  --gog-select-mark-icon-ratio: 0.875;
-  --gog-select-disabled-opacity: var(--gog-disabled-opacity);
-  --gog-select-transition-duration: var(--gog-duration-base);
-  --gog-select-float-label-reserve: var(--gog-field-float-label-reserve);
-  --gog-select-float-label-in-top: var(--gog-field-float-label-in-top);
-  --gog-select-float-label-over-gap: var(--gog-field-float-label-over-gap);
-  --gog-select-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
-
-  /* ── Skeleton ─────────────────────────────────────────────────────────────── */
-  --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);
-  --gog-skeleton-line-gap: var(--gog-space-sm);
-  --gog-skeleton-short-line-width: 60%;
-  --gog-skeleton-pulse-duration: 1.6s;
-  --gog-skeleton-pulse-min-opacity: 0.5;
-  --gog-skeleton-wave-duration: 1.6s;
-  --gog-skeleton-line-height-xsm: 8px;
-  --gog-skeleton-line-height-sm: 10px;
-  --gog-skeleton-line-height-md: 14px;
-  --gog-skeleton-line-height-lg: 18px;
-  --gog-skeleton-line-height-slg: 24px;
-  --gog-skeleton-circle-size-xsm: 24px;
-  --gog-skeleton-circle-size-sm: 32px;
-  --gog-skeleton-circle-size-md: 48px;
-  --gog-skeleton-circle-size-lg: 64px;
-  --gog-skeleton-circle-size-slg: 96px;
-  --gog-skeleton-rect-height-xsm: 40px;
-  --gog-skeleton-rect-height-sm: 64px;
-  --gog-skeleton-rect-height-md: 120px;
-  --gog-skeleton-rect-height-lg: 200px;
-  --gog-skeleton-rect-height-slg: 320px;
-
-  /* ── Slider ───────────────────────────────────────────────────────────────── */
-  --gog-slider-auto-width: 240px;
-  /* Length (height) of a vertical slider's track — the counterpart to
-     --gog-slider-auto-width, which only sizes the horizontal case. */
-  --gog-slider-vertical-length: 160px;
-  --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: 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: 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;
-  --gog-slider-track-height: 4px;
-  --gog-slider-track-area-height: 20px;
-  --gog-slider-track-radius: 0px;
-  /*
-   * Deliberately NOT an accent-* token: --gog-accent-dim sits on the same hue ramp as
-   * --gog-slider-fill-bg (--gog-accent-color), so at a 4px track height the two used to
-   * read as one blob rather than "recessed groove + accent fill" — same problem in both
-   * themes, since the whole accent ramp is one hue. Mixing --gog-text-color into
-   * --gog-border-color instead gives a desaturated, theme-adaptive groove: it darkens
-   * toward black in the light theme (text-color is near-black there) and lightens toward
-   * parchment in the dark theme (text-color is near-white there), landing at a neutral
-   * 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: 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
-     also accepts a gradient (e.g. `linear-gradient(...)`) for the fill style, not just a
-     solid color. */
-  --gog-slider-fill-bg: var(--gog-accent-color);
-  --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: var(--gog-control-border-width);
-  --gog-slider-thumb-radius: 50%;
-  --gog-slider-thumb-shadow: var(--gog-accent-pale);
-  --gog-slider-thumb-glow-size: 6px;
-  --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);
-  --gog-slider-error-color: var(--gog-danger-color);
-  --gog-slider-error-font-size: var(--gog-text-xs);
-  --gog-slider-disabled-opacity: var(--gog-disabled-opacity);
-
-  /* ── Spinner ──────────────────────────────────────────────────────────────── */
-  --gog-spinner-rune-font-family: var(--gog-font-heading);
-  --gog-spinner-track-color: var(--gog-accent-dim);
-  --gog-spinner-arc-outer-color: var(--gog-accent-color);
-  --gog-spinner-arc-inner-color: var(--gog-accent-bright);
-  --gog-spinner-diamond-color: var(--gog-accent-bright);
-  --gog-spinner-rune-color: var(--gog-accent-bright);
-  --gog-spinner-glow-color: var(--gog-accent-color);
-  --gog-spinner-track-opacity: 0.35;
-  --gog-spinner-arc-inner-opacity: 0.75;
-  --gog-spinner-diamond-opacity: 0.85;
-  --gog-spinner-arc-outer-pulse-opacity: 0.8;
-  --gog-spinner-arc-inner-pulse-opacity: 0.45;
-  --gog-spinner-rune-pulse-opacity: 0.4;
-  --gog-spinner-arc-outer-dash: 100 63;
-  --gog-spinner-arc-inner-dash: 35 78;
-  --gog-spinner-arc-inner-stroke-compact: 1;
-  --gog-spinner-spin-duration: 1.4s;
-  --gog-spinner-spin-slow-duration: 2s;
-  --gog-spinner-ticks-duration: 6s;
-  --gog-spinner-pulse-duration: 2.8s;
-  --gog-spinner-ring-duration: 1s;
-  --gog-spinner-ring-padding: 16%;
-  --gog-spinner-arc-outer-glow: 5px;
-  --gog-spinner-arc-inner-glow: 4px;
-  --gog-spinner-diamond-glow: 3px;
-  --gog-spinner-rune-glow: 6px;
-  --gog-spinner-ring-glow: 5px;
-  --gog-spinner-overlay-blur: 3px;
-  --gog-spinner-overlay-fade-duration: var(--gog-duration-slow);
-
-  /* ── Table ────────────────────────────────────────────────────────────────── */
-  --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: var(--gog-space-12);
-  --gog-table-border-color: var(--gog-accent-dim);
-  --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);
-  --gog-table-hover-bg: var(--gog-accent-pale);
-  /* Selected rows keep this tint through hover, so hovering one never reads as clearing it. */
-  --gog-table-selected-bg: var(--gog-accent-pale);
-  --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: var(--gog-letter-spacing);
-  --gog-table-header-text-transform: var(--gog-text-transform);
-  --gog-table-num-col-width: 48px;
-  --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: var(--gog-space-24) var(--gog-space-14);
-  --gog-table-empty-font-size: var(--gog-text-md);
-  --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: var(--gog-text-transform);
-  --gog-table-num-font-size: var(--gog-text-xs);
-  --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: 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: 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: 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: var(--gog-space-14);
-  --gog-table-slg-th-font-size: var(--gog-text-md);
-  --gog-table-slg-td-font-size: var(--gog-text-lg);
-
-  /* ── Tabs ──────────────────────────────────────────────────────────────────
-     `--gog-tabs-tab-bg`, `-tab-color`, `-tab-padding` and `-tab-font-size` are intentionally
-     NOT declared — they are the per-instance escape hatch the size classes fall back through.
-     `--gog-tabs-indicator-offset` / `-length` are written as inline styles from the measured
-     header geometry, so they are not declared either. */
-  --gog-tabs-font-family: var(--gog-font-heading);
-  --gog-tabs-font-weight: var(--gog-font-weight-bold);
-  --gog-tabs-letter-spacing: 0.4px;
-  --gog-tabs-text-transform: none;
-  --gog-tabs-line-height: var(--gog-line-height-tight);
-  --gog-tabs-gap: 0px;
-  --gog-tabs-tab-gap: var(--gog-space-sm);
-  --gog-tabs-icon-size: 1.1em;
-  --gog-tabs-rest-bg: transparent;
-  --gog-tabs-rest-color: var(--gog-muted-text-color);
-  --gog-tabs-hover-color: var(--gog-text-color);
-  /* Tabs paint no background at rest and none on hover — the press is the only one they get,
-     which is why this token has no hover counterpart to step past. */
-  --gog-tabs-press-bg: var(--gog-border-color);
-  /* A resting tab's label is deliberately muted, and muted text has no contrast headroom to
-     spend on a tinted ground: on the press wash it fell to 3.24:1 in one-dark and under 4.5 in
-     six other themes. The press takes the full text colour instead — which is also what pressing
-     a tab is about to make it. */
-  --gog-tabs-press-color: var(--gog-text-color);
-  --gog-tabs-active-color: var(--gog-accent-color);
-  --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;
-  --gog-tabs-indicator-radius: 999px;
-  --gog-tabs-transition-duration: var(--gog-duration-base);
-  --gog-tabs-disabled-opacity: var(--gog-disabled-opacity);
-  --gog-tabs-focus-ring-width: var(--gog-focus-ring-width);
-  /* Inset, for the same reason as the calendar cell: tabs sit shoulder to shoulder. */
-  --gog-tabs-focus-ring-offset: calc(var(--gog-focus-ring-offset) * -1);
-  --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: var(--gog-space-6) var(--gog-space-10);
-  --gog-tabs-xsm-font-size: var(--gog-text-xs);
-  --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: var(--gog-space-12) var(--gog-space-18);
-  --gog-tabs-md-font-size: var(--gog-text-md);
-  --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: var(--gog-space-20) var(--gog-space-28);
-  --gog-tabs-slg-font-size: var(--gog-text-xl);
-
-  /* ── Tag ──────────────────────────────────────────────────────────────────
-     Like the button, the unsuffixed `--gog-tag-bg`/`-border`/`-color`/`-font-size`
-     and friends stay undeclared so variant and size classes can fall through them. */
-  --gog-tag-font-family: inherit;
-  --gog-tag-default-color: var(--gog-info-color, var(--gog-muted-text-color));
-  --gog-tag-success-color: var(--gog-success-color);
-  --gog-tag-danger-color: var(--gog-danger-color);
-  --gog-tag-warning-color: var(--gog-warning-color);
-  --gog-tag-info-color: var(--gog-info-color);
-  --gog-tag-bg-mix: 10%;
-  --gog-tag-color-mix: 82%;
-  --gog-tag-bg-base: var(--gog-surface-color);
-  --gog-tag-color-base: black;
-  --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: var(--gog-font-weight-semibold);
-  --gog-tag-line-height: var(--gog-line-height-none);
-  --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: 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: var(--gog-text-xs);
-  --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: var(--gog-text-sm);
-  --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: var(--gog-text-md);
-  --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: var(--gog-text-lg);
-  --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 ────────────────────────────────────────────────────────────────── */
-  --gog-toast-font-family: var(--gog-font-body);
-  --gog-toast-bg: var(--gog-surface-color);
-  --gog-toast-color: var(--gog-text-color);
-  --gog-toast-border: var(--gog-accent-color);
-  --gog-toast-icon-color: var(--gog-accent-color);
-  --gog-toast-success-color: var(--gog-success-color);
-  --gog-toast-error-color: var(--gog-danger-color);
-  --gog-toast-warning-color: var(--gog-accent-bright);
-  --gog-toast-info-color: var(--gog-accent-color);
-  --gog-toast-accent-width: 4px;
-  --gog-toast-padding: var(--gog-space-12) var(--gog-space-14);
-  --gog-toast-radius: 0px;
-  --gog-toast-content-gap: var(--gog-space-10);
-  --gog-toast-main-gap: var(--gog-space-sm);
-  --gog-toast-actions-gap: var(--gog-space-6);
-  --gog-toast-message-font-size: var(--gog-text-sm);
-  --gog-toast-message-line-height: var(--gog-line-height-relaxed);
-  --gog-toast-icon-size: 1rem;
-  --gog-toast-icon-line-height: var(--gog-line-height-normal);
-  --gog-toast-action-padding: var(--gog-space-4) var(--gog-space-8);
-  --gog-toast-action-font-size: var(--gog-text-xs);
-  --gog-toast-close-padding: var(--gog-space-2) var(--gog-space-4);
-  --gog-toast-close-font-size: var(--gog-text-xs);
-  --gog-toast-progress-height: 3px;
-  --gog-toast-progress-opacity: 30%;
-  --gog-toast-transition-duration: 0.25s;
-  /* Card-stack geometry */
-  --gog-toast-stack-peek: 14px;
-  --gog-toast-stack-scale-step: 0.06;
-  --gog-toast-stack-expanded-gap: 84px;
-  --gog-toast-stack-min-opacity: 0.4;
-  --gog-toast-stack-opacity-step: 0.18;
-  --gog-toast-stack-max-depth: 6;
-
-  /* ── Toggle ───────────────────────────────────────────────────────────────────
-     A switch, not a checkbox: it announces as "switch, on". The outer label size reuses
-     the `--gog-control-checkbox-*` scale so a toggle and a checkbox in the same form read
-     at the same weight; the track/thumb geometry is its own, since a switch is wider than
-     it is tall. */
-  --gog-toggle-font-family: var(--gog-font-body);
-  --gog-toggle-gap: var(--gog-space-sm);
-  --gog-toggle-radius: 999px;
-  --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: 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));
-  --gog-toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-  --gog-toggle-thumb-inset: 2px;
-  --gog-toggle-transition-duration: var(--gog-duration-base);
-  --gog-toggle-disabled-opacity: var(--gog-disabled-opacity);
-  --gog-toggle-label-color: var(--gog-text-color);
-  --gog-toggle-label-line-height: var(--gog-line-height-normal);
-  --gog-toggle-focus-ring-width: var(--gog-focus-ring-width);
-  --gog-toggle-focus-ring-offset: var(--gog-focus-ring-offset);
-  --gog-toggle-focus-ring-color: var(--gog-accent-color);
-  /* In-track on/off wording */
-  --gog-toggle-state-color: var(--gog-accent-text-color, var(--gog-primary-color));
-  --gog-toggle-state-font-weight: var(--gog-font-weight-semibold);
-  --gog-toggle-state-letter-spacing: 0.04em;
-  --gog-toggle-state-padding-inline: var(--gog-space-4);
-  --gog-toggle-state-offset: var(--gog-space-6);
-  /* 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: var(--gog-space-6);
-  --gog-toggle-xsm-track-width: 24px;
-  --gog-toggle-xsm-track-height: 14px;
-  --gog-toggle-xsm-thumb-size: 10px;
-  --gog-toggle-xsm-label-size: var(--gog-control-checkbox-label-size-xsm);
-  --gog-toggle-xsm-state-font-size: 0.5rem;
-  --gog-toggle-sm-track-width: 32px;
-  --gog-toggle-sm-track-height: 18px;
-  --gog-toggle-sm-thumb-size: 14px;
-  --gog-toggle-sm-label-size: var(--gog-control-checkbox-label-size-sm);
-  --gog-toggle-sm-state-font-size: 0.5625rem;
-  --gog-toggle-md-track-width: 44px;
-  --gog-toggle-md-track-height: 24px;
-  --gog-toggle-md-thumb-size: 18px;
-  --gog-toggle-md-label-size: var(--gog-control-checkbox-label-size-md);
-  --gog-toggle-md-state-font-size: 0.625rem;
-  --gog-toggle-lg-track-width: 56px;
-  --gog-toggle-lg-track-height: 32px;
-  --gog-toggle-lg-thumb-size: 26px;
-  --gog-toggle-lg-label-size: var(--gog-control-checkbox-label-size-lg);
-  --gog-toggle-lg-state-font-size: var(--gog-text-xs);
-  --gog-toggle-slg-track-width: 68px;
-  --gog-toggle-slg-track-height: 40px;
-  --gog-toggle-slg-thumb-size: 34px;
-  --gog-toggle-slg-label-size: var(--gog-control-checkbox-label-size-slg);
-  --gog-toggle-slg-state-font-size: 0.8125rem;
-
-  /* ── Tooltip ──────────────────────────────────────────────────────────────── */
-  --gog-tooltip-font-family: var(--gog-font-body);
-  --gog-tooltip-font-size: var(--gog-text-xs);
-  --gog-tooltip-line-height: var(--gog-line-height-normal);
-  --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.
-     A cap, not a fixed height: shorter content stays exactly as tall as it needs to be, this
-     only stops something unusually long (a multi-paragraph TemplateRef) from growing to
-     cover most of the viewport. */
-  --gog-tooltip-max-height: 220px;
-  /* Same "floating panel" recipe as gog-dialog's panel and gog-select's dropdown — a
-     surface-colored box with a plain (not accent) border and the shared panel shadow —
-     rather than an inverted dark/light bubble, so it reads as part of this site instead of
-     a generic dark tooltip dropped on top of it. */
-  --gog-tooltip-bg: var(--gog-surface-color);
-  --gog-tooltip-color: var(--gog-text-color);
-  --gog-tooltip-border-width: var(--gog-panel-border-width);
-  --gog-tooltip-border-style: var(--gog-panel-border-style);
-  --gog-tooltip-border-color: var(--gog-border-color);
-  --gog-tooltip-shadow: var(--gog-panel-shadow);
-  --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: var(--gog-space-8);
-  --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);
-    /* Every other pressable surface, one rule: 20% of the same ingredient its own hover mixes at
-       10-12%, so the press is a clear step past the hover without becoming a fill. 20 rather than
-       a rounder 25 is measured, not chosen: `check:contrast` resolves these washes over the
-       surface each one actually sits on, and 21% puts one-dark's mid-grey text under 4.5:1 on the
-       tab, accordion and button-toggle presses. The accordion mixes `--gog-accent-dim` because
-       its hover does — its header sits on a strip where a full-accent wash was too loud
-       (21.7.1). */
-    --gog-accordion-press-bg: color-mix(in srgb, var(--gog-accent-dim) 20%, transparent);
-    --gog-autocomplete-option-press-bg: color-mix(
-      in srgb,
-      var(--gog-accent-color) 20%,
-      transparent
-    );
-    --gog-button-toggle-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
-    --gog-chip-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
-    --gog-menu-item-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
-    --gog-multiselect-option-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
-    --gog-select-option-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
-    --gog-tabs-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
-
-    /* Button severity — see the block of the same name above for what each ingredient is and
-       why the ink mix is 50%. Four severities, one recipe each, so a new status colour would
-       need four lines rather than a design decision. */
-    --gog-button-success-fill-hover: color-mix(
-      in srgb,
-      var(--gog-success-color) 88%,
-      var(--gog-success-shade)
-    );
-    --gog-button-success-fill-press: color-mix(
-      in srgb,
-      var(--gog-success-color) 76%,
-      var(--gog-success-shade)
-    );
-    --gog-button-success-ink: color-mix(
-      in srgb,
-      var(--gog-success-color) 50%,
-      var(--gog-text-color)
-    );
-    --gog-button-success-wash: color-mix(in srgb, var(--gog-success-color) 12%, transparent);
-    --gog-button-danger-fill-hover: color-mix(
-      in srgb,
-      var(--gog-danger-color) 88%,
-      var(--gog-danger-shade)
-    );
-    --gog-button-danger-fill-press: color-mix(
-      in srgb,
-      var(--gog-danger-color) 76%,
-      var(--gog-danger-shade)
-    );
-    --gog-button-danger-ink: color-mix(in srgb, var(--gog-danger-color) 50%, var(--gog-text-color));
-    --gog-button-danger-wash: color-mix(in srgb, var(--gog-danger-color) 12%, transparent);
-    --gog-button-warning-fill-hover: color-mix(
-      in srgb,
-      var(--gog-warning-color) 88%,
-      var(--gog-warning-shade)
-    );
-    --gog-button-warning-fill-press: color-mix(
-      in srgb,
-      var(--gog-warning-color) 76%,
-      var(--gog-warning-shade)
-    );
-    --gog-button-warning-ink: color-mix(
-      in srgb,
-      var(--gog-warning-color) 50%,
-      var(--gog-text-color)
-    );
-    --gog-button-warning-wash: color-mix(in srgb, var(--gog-warning-color) 12%, transparent);
-    --gog-button-info-fill-hover: color-mix(
-      in srgb,
-      var(--gog-info-color) 88%,
-      var(--gog-info-shade)
-    );
-    --gog-button-info-fill-press: color-mix(
-      in srgb,
-      var(--gog-info-color) 76%,
-      var(--gog-info-shade)
-    );
-    --gog-button-info-ink: color-mix(in srgb, var(--gog-info-color) 50%, var(--gog-text-color));
-    --gog-button-info-wash: color-mix(in srgb, var(--gog-info-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);
-  }
-}
+/*
+ * @guildofgleks/ui — baseline theme
+ *
+ * Every token the components read, with a working default, so the library renders
+ * correctly from a single import and a consumer can override only what they care about.
+ *
+ * ── The three layers ─────────────────────────────────────────────────────────────
+ *   1. Foundation  — palette, type scale, spacing, motion, focus. Restyles everything.
+ *   2. Component   — `--gog-<component>-*`, spelled out as the component's own element
+ *                    name. Every colour, font, border, radius, shadow, padding and
+ *                    duration each component paints with lives here, so a theme can
+ *                    restyle one component without touching its stylesheet.
+ *   3. Instance    — a handful of deliberately UNDECLARED tokens (`--gog-button-bg`,
+ *                    `--gog-button-padding`, `--gog-tag-bg`, …) that variant/size classes
+ *                    fall back through. Left unset on purpose: a value declared here
+ *                    would out-cascade the variant classes and pin every button to one
+ *                    look. Set them on an element to override a single instance.
+ *
+ * No component stylesheet declares a `--gog-*` default of its own — everything a
+ * component paints resolves to a token below.
+ *
+ * ── 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
+ * `:root` freezes to the root palette: a `data-theme` scope further down the tree could
+ * change `--gog-accent-color` and buttons inside it would not follow.
+ *
+ *   `:root`             — literals only (and the light palette default). Values that
+ *                         reference nothing, so resolving them once at the root is right.
+ *   `:root, [data-theme]` — every token whose value reads another token. Re-declared on
+ *                         each theme scope so it re-derives from that scope's palette
+ *                         and metrics. **A new token that contains `var(` goes here.**
+ *
+ * ── Adding a theme ───────────────────────────────────────────────────────────────
+ * Declare a palette against the attribute value; the derived layer re-resolves for you:
+ *
+ *   :root[data-theme='mine'], [data-theme='mine'] { --gog-accent-color: #ff4edb; }
+ *
+ * Listing both selectors makes the theme work at the root *and* on any subtree, so a
+ * single page can show several themes side by side.
+ */
+
+:root {
+  /* ── Typography ───────────────────────────────────────────────────────────────
+     Generic stacks on purpose: a UI library should not force a webfont download on
+     its consumers. Point these at your own families to restyle all text at once.
+     `styles/fonts.css` is an optional import that wires up the showcase's families. */
+  --gog-font-heading: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --gog-font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --gog-font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;
+
+  --gog-text-xs: 0.75rem;
+  --gog-text-sm: 0.875rem;
+  --gog-text-md: 1rem;
+  --gog-text-lg: 1.125rem;
+  /* 20px, between `lg` and `xl`. Named for the control size it serves rather than continuing the
+     t-shirt run, because that is what asked for it: `gog-button` and the field controls both
+     needed a step for their `slg` size and, having none, both wrote `1.25rem` as a literal — the
+     same value chosen twice, independently, which is a missing rung and not two opinions. The
+     gap from 1.125 to 1.5 is the widest in the scale, so it was the one likely to be filled by
+     hand. */
+  --gog-text-slg: 1.25rem;
+  --gog-text-xl: 1.5rem;
+  --gog-text-2xl: 2rem;
+  --gog-text-3xl: 3rem;
+
+  /* Weight, the third character axis after casing and tracking — and the one 21.7.0's character
+     layer missed, which is how fifteen component tokens came to hold a bare number. A house style
+     that wants lighter chrome sets these four and nothing else; before them it meant finding and
+     re-listing every one. Four steps because four are used: no `normal`, because nothing in the
+     library paints 400 and an unused token is API nobody asked for. */
+  --gog-font-weight-medium: 500;
+  --gog-font-weight-semibold: 600;
+  --gog-font-weight-bold: 700;
+  --gog-font-weight-heavy: 900;
+
+  /* Leading, the fourth character axis. Twenty component tokens held a bare number — seven of
+     them the same 1.4 — so a house style that wanted roomier text had to find every one. Six
+     steps because six values are painted; `gog-panel`'s heading keeps its own 1.25, which is
+     off this scale on purpose the way an 11px chip is off the type scale. */
+  --gog-line-height-none: 1;
+  --gog-line-height-tight: 1.2;
+  --gog-line-height-snug: 1.3;
+  --gog-line-height-normal: 1.4;
+  --gog-line-height-relaxed: 1.5;
+  --gog-line-height-loose: 1.6;
+
+  /* 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;
+
+  /* ── Motion ──────────────────────────────────────────────────────────────────
+     Every component transition/animation is expressed in these. Set them to 0s to
+     flatten all motion theme-wide (components also honour prefers-reduced-motion). */
+  --gog-duration-fast: 0.12s;
+  --gog-duration-base: 0.15s;
+  --gog-duration-slow: 0.2s;
+  --gog-easing: ease;
+
+  /* ── Focus & disabled ───────────────────────────────────────────────────────── */
+  --gog-focus-ring-width: 3px;
+  --gog-focus-ring-offset: 2px;
+  --gog-disabled-opacity: 0.4;
+
+  /* ── Control metrics ─────────────────────────────────────────────────────────
+     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. */
+  /* The clear (×) button's glyph, as a fraction of its box. One number written five times —
+     `gog-autocomplete`, `gog-datepicker`, `gog-inputfield`, `gog-multiselect` and `gog-select`
+     all had their own `0.7` for the same part. `gog-textarea` keeps its own `1` deliberately:
+     its clear button sits in a corner rather than in the field's icon row. */
+  --gog-control-clear-icon-ratio: 0.7;
+  --gog-control-border-width: 2px;
+  --gog-control-border-style: solid;
+
+  --gog-control-checkbox-box-size-xsm: 12px;
+  --gog-control-checkbox-box-size-sm: 18px;
+  --gog-control-checkbox-box-size-md: 24px;
+  --gog-control-checkbox-box-size-lg: 32px;
+  --gog-control-checkbox-box-size-slg: 40px;
+  --gog-control-checkbox-label-size-xsm: 0.6875rem;
+  --gog-control-checkbox-label-size-sm: 0.8125rem;
+  --gog-control-checkbox-label-size-md: 0.9375rem;
+  --gog-control-checkbox-label-size-lg: 1.0625rem;
+  --gog-control-checkbox-label-size-slg: 1.1875rem;
+  --gog-control-checkbox-icon-size-xsm: 10px;
+  --gog-control-checkbox-icon-size-sm: 12px;
+  --gog-control-checkbox-icon-size-md: 14px;
+  --gog-control-checkbox-icon-size-lg: 18px;
+  --gog-control-checkbox-icon-size-slg: 22px;
+
+  /* ── Button sizing ─────────────────────────────────────────────────────────── */
+
+  /* ── 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;
+
+  /* ── Float label geometry (input / textarea / select / multiselect) ─────────
+     One scale for every field that can float its label. Each control reads these
+     through its own `--gog-<block>-float-label-*` token in the derived layer below,
+     so setting a value here retunes all of them at once while a single control can
+     still be tuned on its own. `reserve` is the headroom added inside the field for
+     the 'in'/'on' variants; `in-top` is where the label lands once floated for 'in';
+     `over-gap`/`over-reserve` are the gap above the border and the space permanently
+     kept clear for the 'over' variant. */
+  --gog-field-float-label-reserve: 14px;
+  --gog-field-float-label-in-top: 6px;
+  --gog-field-float-label-over-reserve: 1.4em;
+
+  /* ── Icon & spinner ───────────────────────────────────────────────────────── */
+  --gog-icon-size: 1.2em;
+  --gog-icon-stroke-width: 2;
+  --gog-spinner-size-xsm: 12px;
+  --gog-spinner-size-sm: 18px;
+  --gog-spinner-size-md: 48px;
+  --gog-spinner-size-lg: 96px;
+  --gog-spinner-size-slg: 144px;
+  --gog-spinner-rune-size: 20px;
+
+  /* ── Toast stack ──────────────────────────────────────────────────────────── */
+  --gog-toast-min-width: 280px;
+  --gog-toast-max-width: 400px;
+  --gog-toast-z-index: 9999;
+  --gog-toast-enter-distance: 110%;
+  --gog-toast-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+
+  /* ── Overlay stacking ───────────────────────────────────────────────────────
+     Baseline for dropdown panels. gog-dialog re-declares this on its own panel so
+     dropdowns opened inside a dialog stack above it. */
+  /* The library's stacking floor. Every layer below is `base + N`, so an app that has to put the
+     whole library above its own chrome moves this one number and keeps the internal order —
+     badge 1, toast 100, dropdowns and dialogs 300, tooltip 400, the blocking spinner overlay
+     8000. Before this, shifting the stack meant editing five tokens and hoping none was missed. */
+  --gog-z-base: 0;
+
+  /* ── Light palette (also the no-data-theme default) ───────────────────────── */
+  color-scheme: light;
+  /* 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; /* Muted kiln ink */
+
+  /* Brand and accents — guild gold leaf */
+  --gog-primary-color: #17120c;
+  /* 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;
+
+  /* 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);
+}
+
+:root[data-theme='light'],
+[data-theme='light'] {
+  color-scheme: light;
+
+  /* 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; /* Muted kiln ink */
+
+  /* Brand and accents — guild gold leaf */
+  --gog-primary-color: #17120c;
+  /* 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;
+
+  /* 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);
+}
+
+:root[data-theme='dark'],
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  /* 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; /* Muted bronze */
+
+  /* Brand and accents — the alchemist's glowing gold */
+  --gog-primary-color: #f3ebd8;
+  --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;
+
+  /* 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);
+}
+
+/*
+ * ── Derived layer ───────────────────────────────────────────────────────────────
+ * Re-declared on every theme scope so each one re-derives from its own palette and
+ * metrics. Everything here reads another token; nothing here is a bare literal.
+ */
+:root,
+[data-theme] {
+  /* ── Derived foundation tokens ───────────────────────────────────────────────
+     Split out of the literal block above because they read other tokens: they have
+     to re-resolve inside each theme scope. */
+
+  /* ── Text on a status fill ───────────────────────────────────────────────────
+     `--gog-accent-text-color` means "text on the accent fill" and flips with the theme, which
+     made it the obvious label for a status fill too — `gogBadge` used it for all four. It is
+     wrong for some of them, and silently: measured 2026-09-04, `material`'s amber under white
+     was 1.97:1 and `primeng`'s green 2.28:1, both far under AA, in a pair no check had. The
+     accent is one colour a theme tunes deliberately; the four statuses are four more, and
+     nothing says one label reads on all five.
+
+     So each status names its own, defaulting to the accent's answer because that is right in
+     seven of the eleven themes. A theme states one of these only where its own hue disagrees —
+     `material` puts near-black on its amber, which is Material 3's own convention, and `primeng`
+     does the same on all three of Aura's bright hues. Where *neither* label reached AA the hue
+     itself moved instead; see the preset files. */
+  --gog-success-text-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-danger-text-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-warning-text-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-info-text-color: var(--gog-accent-text-color, var(--gog-primary-color));
+
+  /* Which way a status fill deepens when it is hovered or held: **away from its own label**, so
+     the step always makes the label easier to read rather than harder. That is the theme's ink
+     for a fill wearing the accent's white, which is nine of the eleven themes — and the other way
+     round for the four fills whose label is the ink itself, `material`'s amber and `primeng`'s
+     three, which say so in their own files. Mixing toward a fixed colour instead is what a first
+     pass did, and it cost `primeng`'s info button 6.44:1 down to 4.23:1 on press: deepening
+     toward the ink walked the fill into the label. */
+  --gog-success-shade: var(--gog-text-color);
+  --gog-danger-shade: var(--gog-text-color);
+  --gog-warning-shade: var(--gog-text-color);
+  --gog-info-shade: var(--gog-text-color);
+  /* ── Stacking layers ─────────────────────────────────────────────────────────
+     All five read `--gog-z-base`, so the whole library moves together. The gaps are
+     deliberate: an app that needs to slot its own element between two of these has room
+     without touching the library's numbers. */
+  --gog-badge-z: calc(var(--gog-z-base) + 1);
+  --gog-toast-base-z: calc(var(--gog-z-base) + 100);
+  --gog-dropdown-z: calc(var(--gog-z-base) + 300);
+  --gog-tooltip-z: calc(var(--gog-z-base) + 400);
+  /* The blocking overlay outranks everything, including a dialog it may be covering. */
+  --gog-spinner-overlay-z: calc(var(--gog-z-base) + 8000);
+
+  --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);
+  /* The only field metric that is a type size; the rest of this block is geometry. It lives
+     here rather than with them because it reads a token, and a derived value declared on the
+     literals-only `:root` freezes to that scope's scale (rule C). */
+  --gog-field-slg-font-size: var(--gog-text-slg);
+
+  --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);
+
+  /* ══════════════════════════════════════════════════════════════════════════════
+     COMPONENT TOKENS
+     Everything below is what an individual component paints with. Override a block
+     to restyle just that component; the values themselves all derive from the
+     foundation tokens above, so a palette swap carries through for free.
+     ══════════════════════════════════════════════════════════════════════════════ */
+
+  /* ── Accordion ─────────────────────────────────────────────────────────────── */
+  --gog-accordion-font-family: var(--gog-font-heading);
+  --gog-accordion-body-font-family: var(--gog-font-body);
+  --gog-accordion-border-color: var(--gog-accent-dim);
+  --gog-accordion-border-width: var(--gog-control-border-width);
+  --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: var(--gog-hover-color);
+  /* The header's label stays body text while hovered or held, and the lift is carried by the
+     background alone. It turned `--gog-accordion-accent-color` until 21.9.0, which is the accent
+     — on an accent-tinted strip that measured 3.61:1 in light, 3.79:1 in one-light and 4.09:1 in
+     ledger, and worse again once the press deepened the tint. Same trade as the ghost button's
+     hover, and made for the same reason: the accent is not a text colour on a ground that is
+     itself tinted with the accent. */
+  --gog-accordion-hover-color: var(--gog-accordion-text-color);
+  --gog-accordion-press-bg: var(--gog-border-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: var(--gog-line-height-loose);
+  --gog-accordion-header-text-transform: var(--gog-text-transform);
+  --gog-accordion-header-gap: var(--gog-space-12);
+  --gog-accordion-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-accordion-transition-duration: var(--gog-duration-base);
+  --gog-accordion-body-transition-duration: var(--gog-duration-slow);
+  --gog-accordion-chevron-transition-duration: var(--gog-duration-slow);
+  --gog-accordion-body-lift: -2px;
+  /* Flat by default — corner rounding is a look, not a given; consumers who want it
+     opt in per-instance or theme-wide by overriding these two. */
+  --gog-accordion-radius: 0px;
+  --gog-accordion-body-radius: 0px;
+  /* 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: 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: var(--gog-space-2);
+  --gog-accordion-xsm-body-font-size: var(--gog-text-xs);
+  --gog-accordion-xsm-body-line-height: var(--gog-line-height-relaxed);
+  --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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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;
+
+  /* ── Collapsible ───────────────────────────────────────────────────────────
+     No portal, no owned markup — see utilities.css for the actual `.gog-collapsible__*`
+     rules (they style content this component's consumer projects, which sits outside
+     `gog-collapsible`'s own view and can't be reached by its scoped stylesheet). */
+  --gog-collapsible-transition-duration: var(--gog-duration-slow);
+  /* The panel's natural height, so an open panel never truncates whatever it holds. This was
+     a fixed `480px` cap, which bought the CSS-only transition an animatable target but paid
+     for it by silently clipping any taller content — `overflow: hidden` means no scrollbar
+     and no other sign that the rest of the panel is missing. `max-content` still animates,
+     via `interpolate-size: allow-keywords` on the content element (see utilities.css); where
+     that is unsupported the panel snaps open instead of easing, which is the right way round
+     for the trade — losing an animation is visible and harmless, losing content is neither.
+     Set a length here to cap a particular panel on purpose; it will clip, as before. */
+  --gog-collapsible-max-height: max-content;
+  --gog-collapsible-disabled-opacity: var(--gog-disabled-opacity);
+
+  /* ── Button ────────────────────────────────────────────────────────────────
+     `--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. */
+  --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: var(--gog-text-xs);
+  --gog-button-sm-font-size: var(--gog-text-sm);
+  --gog-button-md-font-size: var(--gog-text-md);
+  --gog-button-lg-font-size: var(--gog-text-lg);
+  --gog-button-slg-font-size: var(--gog-text-slg);
+
+  --gog-button-font-family: var(--gog-font-heading);
+  --gog-button-font-weight: var(--gog-font-weight-heavy);
+  --gog-button-letter-spacing: var(--gog-letter-spacing);
+  --gog-button-text-transform: var(--gog-text-transform);
+  --gog-button-line-height: var(--gog-line-height-none);
+  --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);
+  /* One pixel further out than the foundation ring: a filled surface needs the extra air for
+     the ring to read as separate from the fill. Written as the foundation plus that pixel
+     rather than a flat 3px, so a theme that moves the ring moves this with it. */
+  --gog-button-focus-ring-offset: calc(var(--gog-focus-ring-offset) + 1px);
+  /* Shipped since before the press had a colour, and left spelled `active` on purpose: renaming
+     a token consumers already override needs a deprecation cycle, and this is a patch. The state
+     it names is the same one `--gog-button-press-*` paints. */
+  --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-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-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);
+  /* The label sits on the accent fill once the button is hovered, so it takes the token that
+     means "text on an accent fill" — the same one the two filled variants use. It read
+     `--gog-primary-color` until 21.9.0, which is the colour of text on the *page*, and the
+     result failed WCAG AA in all 11 shipped themes: 1.11:1 in one-dark, 1.41:1 in dark, 3.65:1
+     in light at best. It was invisible to `check:contrast` because that script had no pair for
+     this label, the same way it had none for the hover fill until 2026-08-29. It has both now. */
+  --gog-button-outline-hover-color: var(--gog-accent-text-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);
+  /* The label leaves the accent while the ground is tinted, and that is the only thing that
+     works here. Ghost's resting label *is* `--gog-accent-color`, and its hover tints the ground
+     with the same accent, so the two walk toward each other: measured across all 11 themes, the
+     label fell under 4.5:1 in `light` (3.94), `primeng` (4.18) and `one-light` (4.22). No ground
+     fixes it — a half-strength wash, a neutral `--gog-hover-color`, a text scrim and an
+     accent-dim wash were all measured, and `light` fails every one of them, because
+     `--gog-accent-color` as *text* on that theme's own background is 4.60:1 with no headroom to
+     spend. Moving the label to `--gog-text-color` clears 5.29:1 at worst (one-dark) and leaves
+     the ground exactly as it was, so the hover stays the subtle wash this variant is documented
+     to have. The press then goes the other way and fills — see `-press-bg` below. */
+  --gog-button-ghost-hover-color: var(--gog-text-color);
+  --gog-button-ghost-hover-shadow: none;
+  --gog-button-ghost-spinner-color: var(--gog-accent-color);
+
+  /* The held state, and the reason it is a colour rather than only the `--gog-button-active-scale`
+     it used to be: `prefers-reduced-motion` switches that transform off, which left a button with
+     no press feedback at all for the readers most likely to need it. A colour change is a state,
+     not a movement — reduced motion keeps it and only drops the scale, and with transitions off it
+     lands instantly. See docs/feedback-triage.md's closing section: reduced motion must remove the
+     animation, not the information.
+
+     Each variant goes one step *deeper* than its own hover, so pressing is distinguishable while
+     hovering, which is the normal case for a pointer. `--gog-accent-dim` is that step for the
+     three accent-carrying variants; ghost has no fill of its own to deepen, so it takes a
+     stronger wash of the same tint its hover uses (see the @supports block at the end of this
+     file for the mixed value and why the flat one above it is not a fallback but the value). */
+  /* The *toggle* state — `aria-pressed="true"`, a button that stays on — as an inset ring rather
+     than a fill. A fill cannot carry it: every other state already owns the background, so a
+     toggled button that is also hovered or held would lose the one thing saying it is on. A ring
+     composes with all of them, and it is the same reasoning that made `gog-button-toggle-group`'s
+     selected option a fill: there, nothing else was competing for the background.
+
+     The ring takes the colour that is guaranteed to read on its own variant — the label colour on
+     the filled two, the accent on the transparent two — so both are pairs `check:contrast`
+     already gates. While toggled, this replaces the variant's `box-shadow`, which costs
+     `primary` its hover glow: the ring is state and the glow is decoration, and a `box-shadow`
+     list cannot hold `none` as a layer, so keeping both was not on offer. */
+  --gog-button-toggled-ring-width: 2px;
+  --gog-button-primary-toggled-shadow: inset 0 0 0 var(--gog-button-toggled-ring-width)
+    var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-button-secondary-toggled-shadow: var(--gog-button-primary-toggled-shadow);
+  --gog-button-outline-toggled-shadow: inset 0 0 0 var(--gog-button-toggled-ring-width)
+    var(--gog-accent-color);
+  --gog-button-ghost-toggled-shadow: var(--gog-button-outline-toggled-shadow);
+
+  --gog-button-primary-press-bg: var(--gog-accent-dim);
+  --gog-button-primary-press-color: var(--gog-button-primary-color);
+  --gog-button-secondary-press-bg: var(--gog-accent-dim);
+  --gog-button-secondary-press-color: var(--gog-button-secondary-color);
+  --gog-button-outline-press-bg: var(--gog-accent-dim);
+  --gog-button-outline-press-color: var(--gog-button-outline-hover-color);
+  /* Ghost presses to the same deep fill as outline, rather than to a wash like every other
+     surface in this file. Measured across all 11 themes: a wash cannot work here, because this
+     button's *label* is the accent, so tinting its ground with the accent walks the two together
+     — a 24% wash put the label under 4.5:1 in seven themes, and `--gog-accent-pale` was either
+     no better or invisible against the hover. A filled press moves the label to
+     `--gog-accent-text-color` instead, which is the pair `check:contrast` already gates, so no
+     future theme can quietly break it. The other eight surfaces keep their washes: their labels
+     are body text, and their worst case across the 11 is 4.80:1. */
+  --gog-button-ghost-press-bg: var(--gog-accent-dim);
+  --gog-button-ghost-press-color: var(--gog-accent-text-color, var(--gog-primary-color));
+
+  /* ── Button severity ─────────────────────────────────────────────────────────
+     `severity` is orthogonal to `variant`: a destructive action can be a filled button, an
+     outlined one or a ghost, and it is still destructive. So this is not a fifth variant — it
+     re-points the *ingredients* the four variants are built from, and the shape rules in
+     `styles/button.css` apply them per variant. Four severities x six ingredients rather than
+     four x four variants x eleven properties, which is what a fifth-variant reading would have
+     cost.
+
+     `-fill` and `-on-fill` are the filled pair, and `-on-fill` is `--gog-<status>-text-color`
+     rather than `--gog-accent-text-color`: see that block near the top of this file for why one
+     label does not read on every status.
+
+     `-ink` is the label a *transparent* variant paints, and it is not the raw status colour. As
+     text on the page, the raw hue clears 4.5:1 in only five of the eleven themes — `primeng`'s
+     amber manages 2.05:1 — so it is mixed toward the theme's own ink until it does. The 50% is
+     measured rather than chosen: `material`'s amber is the binding case and needs the hue below
+     54%, so 50 clears every theme with a little headroom. It costs saturation on the themes that
+     never needed it; a theme that wants the colour back overrides `--gog-button-<status>-ink`
+     directly, which is one token rather than a dial nobody would find. Mixing toward `--gog-text-color` rather than a
+     fixed black is what makes one number work on light and dark alike — the ink is dark on one
+     and light on the other, and both directions move *away* from the ground.
+
+     The hover and press fills move the same way, one small step and one larger, so a severity
+     button's states step the way an accent one's do. Moving toward the ink also moves away from
+     `-on-fill` in the seven themes where that is the accent's white-or-near-black, so the label
+     gets easier rather than harder; in the four where `-on-fill` *is* the ink, the rest state
+     starts at 6.44:1 or better and a 24% step cannot spend that. The flat values here are what a
+     browser without `color-mix()` renders — no step, the same graceful nothing the ghost button
+     degrades to — and the mixed ones are in the @supports block at the end of this file. */
+  --gog-button-success-fill: var(--gog-success-color);
+  --gog-button-success-on-fill: var(--gog-success-text-color);
+  --gog-button-success-fill-hover: var(--gog-success-color);
+  --gog-button-success-fill-press: var(--gog-success-color);
+  --gog-button-success-ink: var(--gog-success-color);
+  --gog-button-success-wash: transparent;
+
+  --gog-button-danger-fill: var(--gog-danger-color);
+  --gog-button-danger-on-fill: var(--gog-danger-text-color);
+  --gog-button-danger-fill-hover: var(--gog-danger-color);
+  --gog-button-danger-fill-press: var(--gog-danger-color);
+  --gog-button-danger-ink: var(--gog-danger-color);
+  --gog-button-danger-wash: transparent;
+
+  --gog-button-warning-fill: var(--gog-warning-color);
+  --gog-button-warning-on-fill: var(--gog-warning-text-color);
+  --gog-button-warning-fill-hover: var(--gog-warning-color);
+  --gog-button-warning-fill-press: var(--gog-warning-color);
+  --gog-button-warning-ink: var(--gog-warning-color);
+  --gog-button-warning-wash: transparent;
+
+  --gog-button-info-fill: var(--gog-info-color);
+  --gog-button-info-on-fill: var(--gog-info-text-color);
+  --gog-button-info-fill-hover: var(--gog-info-color);
+  --gog-button-info-fill-press: var(--gog-info-color);
+  --gog-button-info-ink: var(--gog-info-color);
+  --gog-button-info-wash: transparent;
+
+  /* ── 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-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: var(--gog-font-weight-bold);
+  --gog-button-toggle-letter-spacing: 0.5px;
+  --gog-button-toggle-text-transform: var(--gog-text-transform);
+  --gog-button-toggle-line-height: var(--gog-line-height-none);
+  --gog-button-toggle-gap: var(--gog-space-sm);
+  --gog-button-toggle-icon-size: 1.1em;
+  --gog-button-toggle-radius: var(--gog-radius);
+  --gog-button-toggle-border-width: var(--gog-control-border-width);
+  --gog-button-toggle-border-style: var(--gog-control-border-style);
+  --gog-button-toggle-border-color: var(--gog-border-color);
+  --gog-button-toggle-rest-bg: transparent;
+  --gog-button-toggle-rest-color: var(--gog-text-color);
+  --gog-button-toggle-hover-bg: var(--gog-hover-color);
+  --gog-button-toggle-press-bg: var(--gog-border-color);
+  --gog-button-toggle-hover-color: var(--gog-text-color);
+  --gog-button-toggle-selected-bg: var(--gog-accent-color);
+  --gog-button-toggle-selected-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-button-toggle-selected-border-color: var(--gog-accent-color);
+  /* A selected option is already filled with the accent, so its press deepens the fill the way
+     the filled button variants do rather than washing over it. */
+  --gog-button-toggle-selected-press-bg: var(--gog-accent-dim);
+  --gog-button-toggle-separated-gap: var(--gog-space-sm);
+  --gog-button-toggle-transition-duration: var(--gog-duration-base);
+  --gog-button-toggle-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-button-toggle-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-button-toggle-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-button-toggle-focus-ring-color: var(--gog-accent-color);
+
+  /* ── Calendar (the month grid inside gog-datepicker, and gog-calendar on its own) ── */
+  --gog-calendar-font-family: var(--gog-font-body);
+  --gog-calendar-color: var(--gog-text-color);
+  /* 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: var(--gog-space-12);
+  --gog-calendar-header-gap: var(--gog-space-4);
+  --gog-calendar-header-margin: var(--gog-space-8);
+  --gog-calendar-months-gap: var(--gog-space-16);
+  --gog-calendar-title-color: var(--gog-text-color);
+  --gog-calendar-title-font-weight: var(--gog-font-weight-bold);
+  --gog-calendar-nav-size: 28px;
+  --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);
+  --gog-calendar-nav-hover-color: var(--gog-text-color);
+  --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: 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: var(--gog-font-weight-semibold);
+  --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);
+  --gog-calendar-day-outside-color: var(--gog-muted-text-color);
+  --gog-calendar-today-border-color: var(--gog-accent-color);
+  --gog-calendar-today-font-weight: var(--gog-font-weight-bold);
+  --gog-calendar-selected-bg: var(--gog-accent-color);
+  --gog-calendar-selected-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-calendar-selected-font-weight: var(--gog-font-weight-bold);
+  /* 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: 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);
+  --gog-calendar-focus-ring-width: var(--gog-focus-ring-width);
+  /* Inset rather than outset: the month grid packs its cells edge to edge, so an outward ring
+     would sit on top of the neighbouring day. Negated from the foundation so a theme still
+     controls how far it sits from the cell edge. */
+  --gog-calendar-focus-ring-offset: calc(var(--gog-focus-ring-offset) * -1);
+  --gog-calendar-focus-ring-color: var(--gog-accent-color);
+  --gog-calendar-divider-width: 1px;
+  --gog-calendar-divider-style: solid;
+  --gog-calendar-divider-color: var(--gog-border-color);
+  --gog-calendar-time-gap: var(--gog-space-6);
+  --gog-calendar-time-margin: var(--gog-space-10);
+  --gog-calendar-time-input-width: 3.5rem;
+  --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: 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);
+  --gog-calendar-sm-day-size: 28px;
+  --gog-calendar-md-font-size: var(--gog-text-sm);
+  --gog-calendar-md-day-size: 34px;
+  --gog-calendar-lg-font-size: var(--gog-text-md);
+  --gog-calendar-lg-day-size: 40px;
+  --gog-calendar-slg-font-size: var(--gog-text-lg);
+  --gog-calendar-slg-day-size: 46px;
+
+  /* ── Card ──────────────────────────────────────────────────────────────────
+     `--gog-card-bg`, `--gog-card-border-color`, `--gog-card-shadow`, `--gog-card-padding-y`,
+     `--gog-card-padding-x` and `--gog-card-gap` are intentionally NOT declared — they are the
+     per-instance escape hatch the variant and size classes fall back through. */
+  --gog-card-font-family: var(--gog-font-body);
+  --gog-card-color: var(--gog-text-color);
+  --gog-card-radius: var(--gog-radius);
+  --gog-card-border-width: var(--gog-panel-border-width);
+  --gog-card-border-style: var(--gog-panel-border-style);
+  --gog-card-transition-duration: var(--gog-duration-base);
+
+  --gog-card-heading-color: var(--gog-text-color);
+  --gog-card-heading-font-family: var(--gog-font-heading);
+  --gog-card-heading-font-size: var(--gog-text-lg);
+  --gog-card-heading-font-weight: var(--gog-font-weight-semibold);
+  --gog-card-heading-line-height: var(--gog-line-height-snug);
+
+  --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-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: 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: 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);
+  --gog-card-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-card-disabled-opacity: var(--gog-disabled-opacity);
+
+  --gog-card-footer-border-color: var(--gog-border-color);
+  --gog-card-footer-gap: var(--gog-space-sm);
+  --gog-card-footer-padding-top: var(--gog-space-sm);
+
+  --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: 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: 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: 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);
+  --gog-checkbox-border-color: var(--gog-accent-dim);
+  --gog-checkbox-bg: var(--gog-surface-color);
+  --gog-checkbox-checked-bg: var(--gog-accent-color);
+  --gog-checkbox-checked-border: var(--gog-accent-color);
+  --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: var(--gog-line-height-snug);
+  --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);
+  --gog-checkbox-transition-duration: var(--gog-duration-base);
+  --gog-checkbox-dash-width-ratio: 0.45;
+  --gog-checkbox-dash-height: 2px;
+  --gog-checkbox-dash-radius: 999px;
+
+  /* ── Radio group ───────────────────────────────────────────────────────────
+     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: 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: 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);
+  --gog-radio-bg: var(--gog-surface-color);
+  --gog-radio-checked-bg: var(--gog-surface-color);
+  --gog-radio-checked-border: var(--gog-accent-color);
+  --gog-radio-dot-color: var(--gog-accent-color);
+  --gog-radio-dot-size-ratio: 0.45;
+  --gog-radio-label-color: var(--gog-muted-text-color);
+  --gog-radio-label-line-height: var(--gog-line-height-snug);
+  --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);
+  --gog-radio-transition-duration: var(--gog-duration-base);
+  --gog-radio-error-font-size: var(--gog-text-xs);
+  --gog-radio-error-color: var(--gog-danger-color);
+
+  /* ── Chip ──────────────────────────────────────────────────────────────────
+     `--gog-chip-*` size tokens below are the per-size scale; the unsuffixed
+     `--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: var(--gog-surface-color);
+  --gog-chip-hover-bg: var(--gog-hover-color);
+  --gog-chip-press-bg: var(--gog-border-color);
+  --gog-chip-border: var(--gog-border-color);
+  --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: var(--gog-font-weight-medium);
+  --gog-chip-line-height: var(--gog-line-height-tight);
+  --gog-chip-radius: max(var(--gog-radius), 2px);
+  --gog-chip-pill-radius: 9999px;
+  --gog-chip-remove-color: var(--gog-muted-text-color);
+  --gog-chip-remove-hover-color: var(--gog-text-color);
+  --gog-chip-remove-scale: 1.1;
+  --gog-chip-avatar-inset-ratio: 0.9;
+  --gog-chip-remove-inset-ratio: 0.85;
+  --gog-chip-disabled-opacity: var(--gog-disabled-opacity);
+  /* A selected filter chip (`[(selected)]`, 21.9.0). An inset ring for the reason
+     `--gog-button-primary-toggled-shadow` gives: hover and press own the background, and a
+     selected chip has to stay selected while it is also hovered or held. The accent, so it is
+     the same pair the focus ring is already gated on — and unlike the button there is only one
+     chip variant, so one token covers it. Override this token on the host to restyle a single
+     chip. */
+  --gog-chip-selected-ring-width: 2px;
+  --gog-chip-selected-shadow: inset 0 0 0 var(--gog-chip-selected-ring-width)
+    var(--gog-accent-color);
+  --gog-chip-focus-ring-width: 2px;
+  --gog-chip-focus-ring-offset: var(--gog-focus-ring-offset);
+
+  --gog-chip-xsm-font-size: 0.6875rem;
+  --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: var(--gog-text-xs);
+  --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: var(--gog-text-sm);
+  --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: var(--gog-text-md);
+  --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: var(--gog-text-lg);
+  --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;
+
+  /* ── Dialog ────────────────────────────────────────────────────────────────── */
+  --gog-dialog-font-family: var(--gog-font-heading);
+  /* Deliberately a flat value rather than a palette derivation: the scrim has to read
+     the same over any page content. Restate it per theme if a lighter wash suits. */
+  --gog-dialog-backdrop-bg: rgba(10, 8, 3, 0.72);
+  --gog-dialog-backdrop-blur: 2px;
+  --gog-dialog-backdrop-padding: var(--gog-space-lg);
+  --gog-dialog-backdrop-fade-duration: var(--gog-duration-base);
+  --gog-dialog-enter-duration: var(--gog-duration-slow);
+  --gog-dialog-enter-distance: -12px;
+  --gog-dialog-bg: var(--gog-surface-color);
+  --gog-dialog-color: var(--gog-text-color);
+  --gog-dialog-border: var(--gog-border-color);
+  --gog-dialog-border-width: var(--gog-panel-border-width);
+  --gog-dialog-border-style: var(--gog-panel-border-style);
+  --gog-dialog-radius: var(--gog-radius);
+  --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: 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: 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: var(--gog-text-sm);
+  --gog-dialog-close-color: var(--gog-muted-text-color);
+  --gog-dialog-close-hover-color: var(--gog-text-color);
+  --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-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
+     `--gog-field-<size>-*` scale, so it lines up with `gog-inputfield` and `gog-select` in a
+     form. `--gog-autocomplete-bg`, `-color`, `-font-size`, `-padding-x` and `-padding-y` are
+     intentionally NOT declared — they are the per-instance escape hatch the size classes fall
+     back through. */
+  --gog-autocomplete-font-family: var(--gog-font-body);
+  --gog-autocomplete-label-font-family: var(--gog-font-heading);
+  --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: var(--gog-font-weight-semibold);
+  --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);
+  --gog-autocomplete-border-width: var(--gog-control-border-width);
+  --gog-autocomplete-border-style: var(--gog-control-border-style);
+  --gog-autocomplete-border-color: var(--gog-accent-dim);
+  --gog-autocomplete-hover-border-color: var(--gog-accent-color);
+  --gog-autocomplete-radius: var(--gog-radius);
+  --gog-autocomplete-line-height: var(--gog-line-height-normal);
+  --gog-autocomplete-transition-duration: var(--gog-duration-base);
+  --gog-autocomplete-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-autocomplete-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-autocomplete-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-autocomplete-focus-ring-color: var(--gog-accent-color);
+  --gog-autocomplete-error-color: var(--gog-danger-color);
+  --gog-autocomplete-error-border-color: var(--gog-danger-color);
+  --gog-autocomplete-error-font-family: var(--gog-font-body);
+  --gog-autocomplete-error-font-size: var(--gog-text-xs);
+  /* Floor for an auto-width field, so [fullWidth]="false" cannot collapse it to its chrome. */
+  --gog-autocomplete-min-width: 120px;
+  /* 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: 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);
+  --gog-autocomplete-clear-hover-color: var(--gog-autocomplete-label-color);
+  --gog-autocomplete-clear-icon-ratio: var(--gog-control-clear-icon-ratio);
+  --gog-autocomplete-spinner-size: 0.875rem;
+  /* Panel */
+  --gog-autocomplete-panel-bg: var(--gog-surface-color);
+  --gog-autocomplete-panel-shadow: var(--gog-panel-shadow);
+  --gog-autocomplete-panel-border-width: var(--gog-panel-border-width);
+  --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: 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: 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: var(--gog-hover-color);
+  --gog-autocomplete-option-press-bg: var(--gog-border-color);
+  --gog-autocomplete-option-hover-color: var(--gog-text-color);
+  --gog-autocomplete-option-selected-bg: var(--gog-accent-pale);
+  /* Body text, not the accent. The selected row is the one option that carries a tint *and* a
+     coloured label, and the accent on that tint measured 4.12:1 in light — `--gog-accent-dim` is
+     worse again (3.77:1 in one-dark). `gog-select` gets away with an accent label because its
+     selected option has no tint behind it. The tint stays as the marker, alongside
+     `aria-selected`. */
+  --gog-autocomplete-option-selected-color: var(--gog-text-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. */
+  --gog-autocomplete-option-height: 36px;
+  --gog-autocomplete-empty-color: var(--gog-autocomplete-placeholder-color);
+  --gog-autocomplete-empty-font-size: var(--gog-text-sm);
+  --gog-autocomplete-float-label-reserve: var(--gog-field-float-label-reserve);
+  --gog-autocomplete-float-label-in-top: var(--gog-field-float-label-in-top);
+  --gog-autocomplete-float-label-over-gap: var(--gog-field-float-label-over-gap);
+  --gog-autocomplete-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
+
+  /* ── Badge (the `gogBadge` directive; its classes live in utilities.css) ───── */
+  --gog-badge-font-family: var(--gog-font-body);
+  --gog-badge-font-size: var(--gog-text-xs);
+  --gog-badge-font-weight: var(--gog-font-weight-semibold);
+  --gog-badge-line-height: var(--gog-line-height-none);
+  /* Min-width *and* height: a one-digit badge stays a circle, a three-digit one grows
+     sideways only. */
+  --gog-badge-size: 1.25rem;
+  --gog-badge-dot-size: 0.5rem;
+  --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: var(--gog-space-6);
+  --gog-badge-border-width: 0;
+  --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). */
+  /* Each label is its status's own "text on this fill" token, which flips with the theme — a red
+     badge reads white on light and near-black on dark. It read `--gog-accent-text-color` for all
+     four until 21.9.0, on the assumption that one label works on every fill; four themes proved
+     otherwise, `material`'s amber under white at 1.97:1 the worst of them. See the
+     `--gog-<status>-text-color` block near the top of this file. */
+  --gog-badge-success-bg: var(--gog-success-color);
+  --gog-badge-success-color: var(--gog-success-text-color);
+  --gog-badge-danger-bg: var(--gog-danger-color);
+  --gog-badge-danger-color: var(--gog-danger-text-color);
+  --gog-badge-warning-bg: var(--gog-warning-color);
+  --gog-badge-warning-color: var(--gog-warning-text-color);
+  --gog-badge-info-bg: var(--gog-info-color);
+  --gog-badge-info-color: var(--gog-info-text-color);
+
+  /* ── Datepicker (the field; the grid inside it is themed by --gog-calendar-*) ───
+     `--gog-datepicker-bg`, `-color`, `-font-size`, `-padding-x` and `-padding-y` are
+     intentionally NOT declared — they are the per-instance escape hatch the size classes fall
+     back through. */
+  --gog-datepicker-font-family: var(--gog-font-body);
+  --gog-datepicker-label-font-family: var(--gog-font-heading);
+  --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: 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);
+  --gog-datepicker-border-width: var(--gog-control-border-width);
+  --gog-datepicker-border-style: var(--gog-control-border-style);
+  --gog-datepicker-border-color: var(--gog-accent-dim);
+  --gog-datepicker-hover-border-color: var(--gog-accent-color);
+  --gog-datepicker-radius: var(--gog-radius);
+  --gog-datepicker-line-height: var(--gog-line-height-normal);
+  --gog-datepicker-transition-duration: var(--gog-duration-base);
+  --gog-datepicker-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-datepicker-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-datepicker-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-datepicker-focus-ring-color: var(--gog-accent-color);
+  --gog-datepicker-error-color: var(--gog-danger-color);
+  --gog-datepicker-error-border-color: var(--gog-danger-color);
+  --gog-datepicker-error-font-family: var(--gog-font-body);
+  --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: 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);
+  --gog-datepicker-icon-hover-color: var(--gog-accent-bright);
+  --gog-datepicker-toggle-icon-size: 1rem;
+  --gog-datepicker-clear-color: var(--gog-datepicker-placeholder-color);
+  --gog-datepicker-clear-icon-ratio: var(--gog-control-clear-icon-ratio);
+  --gog-datepicker-panel-bg: var(--gog-surface-color);
+  --gog-datepicker-panel-shadow: var(--gog-panel-shadow);
+  --gog-datepicker-panel-border-width: var(--gog-panel-border-width);
+  --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: 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;
+  --gog-datepicker-float-label-reserve: var(--gog-field-float-label-reserve);
+  --gog-datepicker-float-label-in-top: var(--gog-field-float-label-in-top);
+  --gog-datepicker-float-label-over-gap: var(--gog-field-float-label-over-gap);
+  --gog-datepicker-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
+
+  /* ── Divider ───────────────────────────────────────────────────────────────── */
+  --gog-divider-line-color: var(--gog-border-color);
+  --gog-divider-line-thickness: 1px;
+  /* The variant classes map onto these, so a theme can decide what "dashed" looks like
+     rather than the value being frozen into the component's stylesheet. */
+  --gog-divider-solid-style: solid;
+  --gog-divider-dashed-style: dashed;
+  --gog-divider-dotted-style: dotted;
+  --gog-divider-block-spacing: var(--gog-space-md);
+  --gog-divider-inline-spacing: var(--gog-space-md);
+  --gog-divider-inset-size: var(--gog-space-lg);
+  /* Floor for a vertical divider with nothing to stretch to — e.g. between two inline
+     buttons. In a flex/grid row it stretches to the row instead. */
+  --gog-divider-vertical-length: 1.5em;
+  --gog-divider-label-gap: var(--gog-space-sm);
+  --gog-divider-label-color: var(--gog-muted-text-color);
+  --gog-divider-label-font-family: var(--gog-font-body);
+  --gog-divider-label-font-size: var(--gog-text-sm);
+  --gog-divider-label-font-weight: var(--gog-font-weight-medium);
+  --gog-divider-label-line-height: var(--gog-line-height-normal);
+
+  /* ── Icon ──────────────────────────────────────────────────────────────────── */
+  --gog-icon-fallback-size: 1em;
+
+  /* ── Input field ───────────────────────────────────────────────────────────── */
+  --gog-input-font-family: var(--gog-font-body);
+  --gog-input-label-font-family: var(--gog-font-heading);
+  --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: 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);
+  --gog-input-field-border-style: var(--gog-control-border-style);
+  --gog-input-radius: var(--gog-radius);
+  --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: 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);
+  --gog-input-error-color: var(--gog-danger-color);
+  --gog-input-error-font-size: var(--gog-text-xs);
+  /* Extra space above the error line, *on top of* the host's own `--gog-input-gap`, which
+     already separates every child of the field. It shipped as `2px` and put this field's error
+     6px under it while `gog-select`, `gog-autocomplete` and `gog-datepicker` — same gap, no
+     offset — sat at 4px; in one form the six did not line up. Zero by default since 21.9.0, so
+     one mechanism spaces the error line everywhere. Set it if you want this field's error
+     pushed further than the rest. */
+  --gog-input-error-offset: 0px;
+  --gog-input-icon-color: var(--gog-muted-text-color);
+  --gog-input-icon-hover-color: var(--gog-accent-color);
+  --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: 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. */
+  /* Clear button — only rendered once the field has text, see `clearable`.
+
+     A quarter of the corner radius rather than a flat `2px`, which is what this was until
+     21.9.0: at the default `--gog-radius: 8px` it computes to the same 2px, so nothing moves in
+     any shipped theme, but a theme that rounds its corners now rounds this button too. The
+     literal was invisible to `check-tokens` rule G by design — that rule flags a literal only
+     when its value *equals* a character token's current one, so a pill's `999px` is correctly
+     left alone and a small arbitrary number like this one is correctly not detectable. The two
+     sibling controls below carry the same fix.
+
+     `gog-toast` and `gog-accordion` keep their flat `0px` on purpose: those are a chosen shape,
+     not a number that forgot where it came from. */
+  --gog-input-clear-radius: calc(var(--gog-radius) / 4);
+  --gog-input-clear-icon-ratio: var(--gog-control-clear-icon-ratio);
+  /*
+     The textarea's clear button gets a full-size glyph. The 0.7 ratio above suits the dense
+     single-line trigger of a dropdown; on a large multi-line box it reads as a speck.
+  */
+  --gog-textarea-clear-icon-ratio: 1;
+  /* Custom resize grip — see the `::-webkit-resizer` comment in textarea.component.scss for
+     why this replaces rather than restyles the native glyph. Colour follows the field's own
+     border by default, not a fixed muted grey, so it reads as part of the field rather than a
+     mismatched accent. */
+  --gog-textarea-resize-grip-size: 11px;
+  --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: 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
+     the component's own ResizeObserver — they close the gap that opens once the field has been
+     dragged narrower/shorter than its container. Declared here rather than left to a `var()`
+     fallback so the grip's resting geometry is discoverable in this file like everything else;
+     an inline style outranks this declaration, so the per-instance override still wins.
+  */
+  --gog-textarea-resize-inset-right: 0px;
+  --gog-textarea-resize-inset-bottom: 0px;
+  --gog-input-clear-inset: var(--gog-space-8);
+  /*
+     Width of one stepper button, and so of the whole stepper column. Scales with the field's
+     own font size rather than being a fixed px value, so it stays proportional across the five
+     sizes. Read in two places — the buttons themselves, and the offset that moves the clear
+     button clear of them on a clearable number field — which is why it is a token rather than
+     the same `calc()` written twice.
+  */
+  --gog-input-spin-width: calc(
+    var(--gog-input-size-font-size, var(--gog-field-md-font-size)) * 1.35
+  );
+  --gog-input-float-label-reserve: var(--gog-field-float-label-reserve);
+  --gog-input-float-label-in-top: var(--gog-field-float-label-in-top);
+  --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-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);
+  /* Zero by default since 21.9.0 — see `--gog-input-error-offset` for why. */
+  --gog-multiselect-error-offset: 0px;
+  --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: var(--gog-space-2);
+  --gog-multiselect-option-hover-bg: var(--gog-hover-color);
+  --gog-multiselect-option-press-bg: var(--gog-border-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: 40px;
+  --gog-multiselect-option-radius: calc(var(--gog-radius) - 2px);
+  --gog-multiselect-option-disabled-opacity: var(--gog-disabled-opacity);
+  --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-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);
+  /* A quarter of the corner radius — see `--gog-input-clear-radius` for why. */
+  --gog-multiselect-clear-radius: calc(var(--gog-radius) / 4);
+  --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-control-clear-icon-ratio);
+  --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
+     menu and a select opened from the same toolbar read as the same surface. */
+  --gog-menu-z: var(--gog-dropdown-z);
+  --gog-menu-bg: var(--gog-surface-color);
+  --gog-menu-border-color: var(--gog-border-color);
+  --gog-menu-border-width: var(--gog-control-border-width);
+  --gog-menu-border-style: var(--gog-control-border-style);
+  --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: var(--gog-space-4);
+  --gog-menu-gap: var(--gog-space-2);
+  --gog-menu-offset: var(--gog-space-4);
+  --gog-menu-min-width: 180px;
+  --gog-menu-max-width: 320px;
+  --gog-menu-max-height: 320px;
+  --gog-menu-transition-duration: var(--gog-duration-base);
+  --gog-menu-focus-ring: var(--gog-accent-color);
+  --gog-menu-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-menu-item-color: var(--gog-text-color);
+  --gog-menu-item-hover-bg: var(--gog-hover-color);
+  /* The held state, same idea as the button's: one step past this surface's own hover, as a
+     colour rather than a movement, so `prefers-reduced-motion` cannot take it away. The flat
+     value here is what a browser without `color-mix()` gets; the tinted one is in the @supports
+     block at the end of the file. */
+  --gog-menu-item-press-bg: var(--gog-border-color);
+  --gog-menu-item-hover-color: var(--gog-text-color);
+  --gog-menu-item-font-size: var(--gog-text-sm);
+  --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);
+  --gog-menu-item-disabled-color: var(--gog-muted-text-color);
+  --gog-menu-item-line-height: var(--gog-line-height-normal);
+  --gog-menu-item-icon-size: 1em;
+
+  /* ── Paginator ─────────────────────────────────────────────────────────────── */
+  --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);
+  /* Enough for a three-digit page size plus the chevron, so the row doesn't shift on change. */
+  --gog-paginator-page-size-min-width: 5rem;
+  --gog-paginator-ellipsis-min-width: 32px;
+
+  /* ── Panel ─────────────────────────────────────────────────────────────────
+     The `gog-panel` component, which shares its prefix with the foundation surface tier
+     above (`--gog-panel-radius`, `--gog-panel-shadow`, `--gog-panel-border-width`,
+     `--gog-panel-border-style`) deliberately: a panel is the surface those describe, and a
+     theme that sets a house radius for raised surfaces should get it here too.
+
+     `--gog-panel-bg`, `--gog-panel-border-color`, `--gog-panel-padding-y`,
+     `--gog-panel-padding-x` and `--gog-panel-gap` are intentionally NOT declared — the
+     per-instance escape hatch. There is no `--gog-panel-*-shadow` twin of that hatch for the
+     elevated variant: it reads `--gog-panel-shadow` from a declaration the component makes on
+     its own host, so setting that token on one panel already changes only that panel. */
+  --gog-panel-font-family: var(--gog-font-body);
+  --gog-panel-color: var(--gog-text-color);
+  --gog-panel-transition-duration: var(--gog-duration-base);
+
+  --gog-panel-heading-color: var(--gog-text-color);
+  --gog-panel-heading-font-family: var(--gog-font-heading);
+  --gog-panel-heading-font-size: var(--gog-text-xl);
+  --gog-panel-heading-font-weight: var(--gog-font-weight-semibold);
+  --gog-panel-heading-line-height: 1.25;
+
+  --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-elevated-surface-color);
+  --gog-panel-elevated-border-color: transparent;
+  --gog-panel-filled-bg: var(--gog-accent-pale);
+  --gog-panel-filled-border-color: transparent;
+  --gog-panel-filled-shadow: none;
+
+  --gog-panel-header-gap: var(--gog-space-sm);
+  --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: 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);
+  --gog-panel-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-panel-disabled-opacity: var(--gog-disabled-opacity);
+
+  --gog-panel-footer-border-color: var(--gog-border-color);
+  --gog-panel-footer-gap: var(--gog-space-sm);
+  --gog-panel-footer-padding-top: var(--gog-space-sm);
+
+  --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: var(--gog-space-14);
+  --gog-panel-sm-padding-x: var(--gog-space-md);
+  --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: var(--gog-space-28);
+  --gog-panel-lg-gap: var(--gog-space-md);
+  --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: var(--gog-border-color);
+  --gog-progressbar-radius: 999px;
+  --gog-progressbar-transition-duration: var(--gog-duration-slow);
+  --gog-progressbar-xsm-height: 2px;
+  --gog-progressbar-sm-height: 4px;
+  --gog-progressbar-md-height: 6px;
+  --gog-progressbar-lg-height: 10px;
+  --gog-progressbar-slg-height: 14px;
+  --gog-progressbar-value-gap: var(--gog-space-sm);
+  --gog-progressbar-value-min-width: 3ch;
+  --gog-progressbar-value-color: var(--gog-muted-text-color);
+  --gog-progressbar-value-font-family: var(--gog-font-body);
+  --gog-progressbar-value-font-size: var(--gog-text-sm);
+  --gog-progressbar-indeterminate-duration: 1.6s;
+  --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: var(--gog-surface-color);
+  /* The two hairlines that mark where the fill ends, and the reason they are two.
+     WCAG 1.4.11 wants 3:1 for the part of a graphic that carries its meaning, and here that is
+     the boundary — `showValue` is `false` by default, so nothing else states the value. The fill
+     cannot carry it against the track: measured across the whole `--gog-text-color`-to-
+     `--gog-border-color` axis, no single track colour clears 3:1 against all five fills in any
+     theme but `primeng`, because the fills straddle mid-luminance and a track dark enough for the
+     amber warning lands on the blue info (`docs/backlog.md` has the table).
+     A marker can, but not in one tone either: `--gog-surface-color` alone is 1.79:1 on
+     `material`'s warning fill, `--gog-text-color` alone is 1.06:1 on `one-dark`'s success. As a
+     pair they always work — the ink line is 3.25:1 to 9.57:1 against the track in all eleven
+     themes, and whichever tone a fill sits close to, the other one does not. `check:contrast`
+     gates both halves. */
+  --gog-progressbar-edge-width: 1px;
+  --gog-progressbar-edge-color: var(--gog-text-color);
+  --gog-progressbar-edge-backing-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: var(--gog-accent-pale);
+  --gog-progressbar-success-bg: var(--gog-success-color);
+  --gog-progressbar-success-buffer-bg: var(--gog-border-color);
+  --gog-progressbar-danger-bg: var(--gog-danger-color);
+  --gog-progressbar-danger-buffer-bg: var(--gog-border-color);
+  --gog-progressbar-warning-bg: var(--gog-warning-color);
+  --gog-progressbar-warning-buffer-bg: var(--gog-border-color);
+  --gog-progressbar-info-bg: var(--gog-info-color);
+  --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
+     own foreground, so one value works on a filled button and on a ghost one without a
+     per-variant tier. The property is inherited, so `--gog-ripple-color` set anywhere above
+     the host reaches it — which is the per-instance override, no undeclared tier needed. */
+  --gog-ripple-color: currentColor;
+  --gog-ripple-opacity: 0.16;
+  /* Longer than any other motion in the library, deliberately: a ripple held to the house 0.2s
+     is over before the eye has followed it across the surface. Still expressed in the
+     foundation scale, so setting the durations to 0s still flattens it theme-wide. */
+  --gog-ripple-enter-duration: calc(var(--gog-duration-slow) * 2);
+  --gog-ripple-exit-duration: var(--gog-duration-slow);
+  --gog-ripple-easing: var(--gog-easing);
+
+  /* ── Scroll ────────────────────────────────────────────────────────────────── */
+  --gog-scroll-track-bg: transparent;
+  --gog-scroll-track-radius: var(--gog-radius);
+  --gog-scroll-thumb-bg: var(--gog-accent-dim);
+  --gog-scroll-thumb-hover-bg: var(--gog-accent-color);
+  --gog-scroll-thumb-active-bg: var(--gog-accent-bright);
+  --gog-scroll-thumb-radius: var(--gog-radius);
+  --gog-scroll-thumb-inset: 2px;
+  --gog-scroll-corner-bg: transparent;
+  --gog-scroll-fade-duration: var(--gog-duration-base);
+  --gog-scroll-focus-ring: var(--gog-accent-color);
+  --gog-scroll-focus-ring-width: var(--gog-focus-ring-width);
+  /* Per-size pair for the two-tier `--gog-scroll-track-width`/`-thumb-min-size` chains
+     that scroll.component.scss's `.gog-scroll--thin` modifier switches between. `normal`
+     is the unmarked default, mirroring --gog-table-lg-*. */
+  --gog-scroll-normal-track-width: 10px;
+  --gog-scroll-thin-track-width: 6px;
+  --gog-scroll-normal-thumb-min-size: 32px;
+  --gog-scroll-thin-thumb-min-size: 24px;
+  /* Invisible pointer-target padding around the thumb (see .gog-scroll__thumb::before) — the
+     `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: 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: 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: 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);
+  --gog-select-field-border-style: var(--gog-control-border-style);
+  --gog-select-radius: var(--gog-radius);
+  --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: 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);
+  --gog-select-error-color: var(--gog-danger-color);
+  --gog-select-error-font-size: var(--gog-text-xs);
+  --gog-select-chevron-color: var(--gog-accent-color);
+  /*
+     Distance from the trigger's right edge to the trailing chrome, matching the leading icon
+     inset on gog-inputfield so a select, a multiselect and an input line up in one form. It is
+     applied as the trigger's `padding-right`, and the chevron sits inside that padding — so this
+     is the gap itself, not the gap plus the chevron. It used to be 40px, which double-counted
+     and put the chevron 42px from the edge.
+  */
+  --gog-select-chevron-inset: var(--gog-control-icon-offset);
+  /* Floor for an auto-width trigger, so [fullWidth]="false" cannot collapse it to the chevron. */
+  --gog-select-min-width: 120px;
+  /* 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: 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-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: 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`. */
+  /* A quarter of the corner radius — see `--gog-input-clear-radius` for why. */
+  --gog-select-clear-radius: calc(var(--gog-radius) / 4);
+  --gog-select-clear-icon-ratio: var(--gog-control-clear-icon-ratio);
+  --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: 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: var(--gog-space-2);
+  --gog-select-option-hover-bg: var(--gog-hover-color);
+  --gog-select-option-press-bg: var(--gog-border-color);
+  --gog-select-option-selected-color: var(--gog-accent-color);
+  --gog-select-option-color: var(--gog-text-color);
+  --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;
+  --gog-select-option-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-select-option-transition-duration: var(--gog-duration-fast);
+  /* Icon geometry, expressed as a ratio of the control's font size. */
+  --gog-select-chevron-icon-ratio: 0.875;
+  --gog-select-mark-size-ratio: 1.125;
+  --gog-select-mark-icon-ratio: 0.875;
+  --gog-select-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-select-transition-duration: var(--gog-duration-base);
+  --gog-select-float-label-reserve: var(--gog-field-float-label-reserve);
+  --gog-select-float-label-in-top: var(--gog-field-float-label-in-top);
+  --gog-select-float-label-over-gap: var(--gog-field-float-label-over-gap);
+  --gog-select-float-label-over-reserve: var(--gog-field-float-label-over-reserve);
+
+  /* ── Skeleton ─────────────────────────────────────────────────────────────── */
+  --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);
+  --gog-skeleton-line-gap: var(--gog-space-sm);
+  --gog-skeleton-short-line-width: 60%;
+  --gog-skeleton-pulse-duration: 1.6s;
+  --gog-skeleton-pulse-min-opacity: 0.5;
+  --gog-skeleton-wave-duration: 1.6s;
+  --gog-skeleton-line-height-xsm: 8px;
+  --gog-skeleton-line-height-sm: 10px;
+  --gog-skeleton-line-height-md: 14px;
+  --gog-skeleton-line-height-lg: 18px;
+  --gog-skeleton-line-height-slg: 24px;
+  --gog-skeleton-circle-size-xsm: 24px;
+  --gog-skeleton-circle-size-sm: 32px;
+  --gog-skeleton-circle-size-md: 48px;
+  --gog-skeleton-circle-size-lg: 64px;
+  --gog-skeleton-circle-size-slg: 96px;
+  --gog-skeleton-rect-height-xsm: 40px;
+  --gog-skeleton-rect-height-sm: 64px;
+  --gog-skeleton-rect-height-md: 120px;
+  --gog-skeleton-rect-height-lg: 200px;
+  --gog-skeleton-rect-height-slg: 320px;
+
+  /* ── Slider ───────────────────────────────────────────────────────────────── */
+  --gog-slider-auto-width: 240px;
+  /* Length (height) of a vertical slider's track — the counterpart to
+     --gog-slider-auto-width, which only sizes the horizontal case. */
+  --gog-slider-vertical-length: 160px;
+  --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: 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: 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;
+  --gog-slider-track-height: 4px;
+  --gog-slider-track-area-height: 20px;
+  --gog-slider-track-radius: 0px;
+  /*
+   * Deliberately NOT an accent-* token: --gog-accent-dim sits on the same hue ramp as
+   * --gog-slider-fill-bg (--gog-accent-color), so at a 4px track height the two used to
+   * read as one blob rather than "recessed groove + accent fill" — same problem in both
+   * themes, since the whole accent ramp is one hue. Mixing --gog-text-color into
+   * --gog-border-color instead gives a desaturated, theme-adaptive groove: it darkens
+   * toward black in the light theme (text-color is near-black there) and lightens toward
+   * parchment in the dark theme (text-color is near-white there), landing at a neutral
+   * 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: 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
+     also accepts a gradient (e.g. `linear-gradient(...)`) for the fill style, not just a
+     solid color. */
+  --gog-slider-fill-bg: var(--gog-accent-color);
+  --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: var(--gog-control-border-width);
+  --gog-slider-thumb-radius: 50%;
+  --gog-slider-thumb-shadow: var(--gog-accent-pale);
+  --gog-slider-thumb-glow-size: 6px;
+  --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);
+  --gog-slider-error-color: var(--gog-danger-color);
+  --gog-slider-error-font-size: var(--gog-text-xs);
+  --gog-slider-disabled-opacity: var(--gog-disabled-opacity);
+
+  /* ── Spinner ──────────────────────────────────────────────────────────────── */
+  --gog-spinner-rune-font-family: var(--gog-font-heading);
+  --gog-spinner-track-color: var(--gog-accent-dim);
+  --gog-spinner-arc-outer-color: var(--gog-accent-color);
+  --gog-spinner-arc-inner-color: var(--gog-accent-bright);
+  --gog-spinner-diamond-color: var(--gog-accent-bright);
+  --gog-spinner-rune-color: var(--gog-accent-bright);
+  --gog-spinner-glow-color: var(--gog-accent-color);
+  --gog-spinner-track-opacity: 0.35;
+  --gog-spinner-arc-inner-opacity: 0.75;
+  --gog-spinner-diamond-opacity: 0.85;
+  --gog-spinner-arc-outer-pulse-opacity: 0.8;
+  --gog-spinner-arc-inner-pulse-opacity: 0.45;
+  --gog-spinner-rune-pulse-opacity: 0.4;
+  --gog-spinner-arc-outer-dash: 100 63;
+  --gog-spinner-arc-inner-dash: 35 78;
+  --gog-spinner-arc-inner-stroke-compact: 1;
+  --gog-spinner-spin-duration: 1.4s;
+  --gog-spinner-spin-slow-duration: 2s;
+  --gog-spinner-ticks-duration: 6s;
+  --gog-spinner-pulse-duration: 2.8s;
+  --gog-spinner-ring-duration: 1s;
+  --gog-spinner-ring-padding: 16%;
+  --gog-spinner-arc-outer-glow: 5px;
+  --gog-spinner-arc-inner-glow: 4px;
+  --gog-spinner-diamond-glow: 3px;
+  --gog-spinner-rune-glow: 6px;
+  --gog-spinner-ring-glow: 5px;
+  --gog-spinner-overlay-blur: 3px;
+  --gog-spinner-overlay-fade-duration: var(--gog-duration-slow);
+
+  /* ── Table ────────────────────────────────────────────────────────────────── */
+  --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: var(--gog-space-12);
+  --gog-table-border-color: var(--gog-accent-dim);
+  --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);
+  --gog-table-hover-bg: var(--gog-accent-pale);
+  /* Selected rows keep this tint through hover, so hovering one never reads as clearing it. */
+  --gog-table-selected-bg: var(--gog-accent-pale);
+  --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: var(--gog-letter-spacing);
+  --gog-table-header-text-transform: var(--gog-text-transform);
+  --gog-table-num-col-width: 48px;
+  --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: var(--gog-space-24) var(--gog-space-14);
+  --gog-table-empty-font-size: var(--gog-text-md);
+  --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: var(--gog-text-transform);
+  --gog-table-num-font-size: var(--gog-text-xs);
+  --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: 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: 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: 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: var(--gog-space-14);
+  --gog-table-slg-th-font-size: var(--gog-text-md);
+  --gog-table-slg-td-font-size: var(--gog-text-lg);
+
+  /* ── Tabs ──────────────────────────────────────────────────────────────────
+     `--gog-tabs-tab-bg`, `-tab-color`, `-tab-padding` and `-tab-font-size` are intentionally
+     NOT declared — they are the per-instance escape hatch the size classes fall back through.
+     `--gog-tabs-indicator-offset` / `-length` are written as inline styles from the measured
+     header geometry, so they are not declared either. */
+  --gog-tabs-font-family: var(--gog-font-heading);
+  --gog-tabs-font-weight: var(--gog-font-weight-bold);
+  --gog-tabs-letter-spacing: 0.4px;
+  --gog-tabs-text-transform: none;
+  --gog-tabs-line-height: var(--gog-line-height-tight);
+  --gog-tabs-gap: 0px;
+  --gog-tabs-tab-gap: var(--gog-space-sm);
+  --gog-tabs-icon-size: 1.1em;
+  --gog-tabs-rest-bg: transparent;
+  --gog-tabs-rest-color: var(--gog-muted-text-color);
+  --gog-tabs-hover-color: var(--gog-text-color);
+  /* Tabs paint no background at rest and none on hover — the press is the only one they get,
+     which is why this token has no hover counterpart to step past. */
+  --gog-tabs-press-bg: var(--gog-border-color);
+  /* A resting tab's label is deliberately muted, and muted text has no contrast headroom to
+     spend on a tinted ground: on the press wash it fell to 3.24:1 in one-dark and under 4.5 in
+     six other themes. The press takes the full text colour instead — which is also what pressing
+     a tab is about to make it. */
+  --gog-tabs-press-color: var(--gog-text-color);
+  --gog-tabs-active-color: var(--gog-accent-color);
+  --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;
+  --gog-tabs-indicator-radius: 999px;
+  --gog-tabs-transition-duration: var(--gog-duration-base);
+  --gog-tabs-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-tabs-focus-ring-width: var(--gog-focus-ring-width);
+  /* Inset, for the same reason as the calendar cell: tabs sit shoulder to shoulder. */
+  --gog-tabs-focus-ring-offset: calc(var(--gog-focus-ring-offset) * -1);
+  --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: var(--gog-space-6) var(--gog-space-10);
+  --gog-tabs-xsm-font-size: var(--gog-text-xs);
+  --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: var(--gog-space-12) var(--gog-space-18);
+  --gog-tabs-md-font-size: var(--gog-text-md);
+  --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: var(--gog-space-20) var(--gog-space-28);
+  --gog-tabs-slg-font-size: var(--gog-text-xl);
+
+  /* ── Tag ──────────────────────────────────────────────────────────────────
+     Like the button, the unsuffixed `--gog-tag-bg`/`-border`/`-color`/`-font-size`
+     and friends stay undeclared so variant and size classes can fall through them. */
+  --gog-tag-font-family: inherit;
+  --gog-tag-default-color: var(--gog-info-color, var(--gog-muted-text-color));
+  --gog-tag-success-color: var(--gog-success-color);
+  --gog-tag-danger-color: var(--gog-danger-color);
+  --gog-tag-warning-color: var(--gog-warning-color);
+  --gog-tag-info-color: var(--gog-info-color);
+  --gog-tag-bg-mix: 10%;
+  /* The label is the status hue mixed **halfway toward the page's ink**, and both halves of that
+     changed in 21.10.0. It was 82% of the hue mixed toward literal `black`, which is a light-theme
+     assumption twice over: on a dark theme it darkened a label that already sat on a dark ground
+     (one-dark's danger tag read 3.11:1), and on a light one 18% of black is not enough to bring a
+     bright hue down to text contrast (material's warning, 2.49:1; primeng's success, 3.06:1).
+     Eleven of the 55 shipped combinations were under WCAG AA and nothing had ever measured them —
+     a tag's colours reach the DOM through `--gog-tag-variant-color`, which `check:contrast` could
+     not follow until the same release taught it to.
+
+     `--gog-text-color` rather than `black` makes the mix follow the theme, and 50% rather than 82%
+     is the same ratio, and the same argument, as `--gog-button-<status>-ink`: as body text the raw
+     status hue clears AA in only a handful of themes. The worst pair is now 4.67:1. */
+  --gog-tag-color-mix: 50%;
+  --gog-tag-bg-base: var(--gog-surface-color);
+  --gog-tag-color-base: var(--gog-text-color);
+  --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: var(--gog-font-weight-semibold);
+  --gog-tag-line-height: var(--gog-line-height-none);
+  --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: 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: var(--gog-text-xs);
+  --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: var(--gog-text-sm);
+  --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: var(--gog-text-md);
+  --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: var(--gog-text-lg);
+  --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 ────────────────────────────────────────────────────────────────── */
+  --gog-toast-font-family: var(--gog-font-body);
+  --gog-toast-bg: var(--gog-surface-color);
+  --gog-toast-color: var(--gog-text-color);
+  --gog-toast-border: var(--gog-accent-color);
+  --gog-toast-icon-color: var(--gog-accent-color);
+  --gog-toast-success-color: var(--gog-success-color);
+  --gog-toast-error-color: var(--gog-danger-color);
+  --gog-toast-warning-color: var(--gog-accent-bright);
+  --gog-toast-info-color: var(--gog-accent-color);
+  --gog-toast-accent-width: 4px;
+  --gog-toast-padding: var(--gog-space-12) var(--gog-space-14);
+  --gog-toast-radius: 0px;
+  --gog-toast-content-gap: var(--gog-space-10);
+  --gog-toast-main-gap: var(--gog-space-sm);
+  --gog-toast-actions-gap: var(--gog-space-6);
+  --gog-toast-message-font-size: var(--gog-text-sm);
+  --gog-toast-message-line-height: var(--gog-line-height-relaxed);
+  --gog-toast-icon-size: 1rem;
+  --gog-toast-icon-line-height: var(--gog-line-height-normal);
+  --gog-toast-action-padding: var(--gog-space-4) var(--gog-space-8);
+  --gog-toast-action-font-size: var(--gog-text-xs);
+  --gog-toast-close-padding: var(--gog-space-2) var(--gog-space-4);
+  --gog-toast-close-font-size: var(--gog-text-xs);
+  --gog-toast-progress-height: 3px;
+  --gog-toast-progress-opacity: 30%;
+  --gog-toast-transition-duration: 0.25s;
+  /* Card-stack geometry */
+  --gog-toast-stack-peek: 14px;
+  --gog-toast-stack-scale-step: 0.06;
+  --gog-toast-stack-expanded-gap: 84px;
+  --gog-toast-stack-min-opacity: 0.4;
+  --gog-toast-stack-opacity-step: 0.18;
+  --gog-toast-stack-max-depth: 6;
+
+  /* ── Toggle ───────────────────────────────────────────────────────────────────
+     A switch, not a checkbox: it announces as "switch, on". The outer label size reuses
+     the `--gog-control-checkbox-*` scale so a toggle and a checkbox in the same form read
+     at the same weight; the track/thumb geometry is its own, since a switch is wider than
+     it is tall. */
+  --gog-toggle-font-family: var(--gog-font-body);
+  --gog-toggle-gap: var(--gog-space-sm);
+  --gog-toggle-radius: 999px;
+  --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: 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));
+  --gog-toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
+  --gog-toggle-thumb-inset: 2px;
+  --gog-toggle-transition-duration: var(--gog-duration-base);
+  --gog-toggle-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-toggle-label-color: var(--gog-text-color);
+  --gog-toggle-label-line-height: var(--gog-line-height-normal);
+  --gog-toggle-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-toggle-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-toggle-focus-ring-color: var(--gog-accent-color);
+  /* In-track on/off wording */
+  --gog-toggle-state-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-toggle-state-font-weight: var(--gog-font-weight-semibold);
+  --gog-toggle-state-letter-spacing: 0.04em;
+  --gog-toggle-state-padding-inline: var(--gog-space-4);
+  --gog-toggle-state-offset: var(--gog-space-6);
+  /* 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: var(--gog-space-6);
+  --gog-toggle-xsm-track-width: 24px;
+  --gog-toggle-xsm-track-height: 14px;
+  --gog-toggle-xsm-thumb-size: 10px;
+  --gog-toggle-xsm-label-size: var(--gog-control-checkbox-label-size-xsm);
+  --gog-toggle-xsm-state-font-size: 0.5rem;
+  --gog-toggle-sm-track-width: 32px;
+  --gog-toggle-sm-track-height: 18px;
+  --gog-toggle-sm-thumb-size: 14px;
+  --gog-toggle-sm-label-size: var(--gog-control-checkbox-label-size-sm);
+  --gog-toggle-sm-state-font-size: 0.5625rem;
+  --gog-toggle-md-track-width: 44px;
+  --gog-toggle-md-track-height: 24px;
+  --gog-toggle-md-thumb-size: 18px;
+  --gog-toggle-md-label-size: var(--gog-control-checkbox-label-size-md);
+  --gog-toggle-md-state-font-size: 0.625rem;
+  --gog-toggle-lg-track-width: 56px;
+  --gog-toggle-lg-track-height: 32px;
+  --gog-toggle-lg-thumb-size: 26px;
+  --gog-toggle-lg-label-size: var(--gog-control-checkbox-label-size-lg);
+  --gog-toggle-lg-state-font-size: var(--gog-text-xs);
+  --gog-toggle-slg-track-width: 68px;
+  --gog-toggle-slg-track-height: 40px;
+  --gog-toggle-slg-thumb-size: 34px;
+  --gog-toggle-slg-label-size: var(--gog-control-checkbox-label-size-slg);
+  --gog-toggle-slg-state-font-size: 0.8125rem;
+
+  /* ── Tooltip ──────────────────────────────────────────────────────────────── */
+  --gog-tooltip-font-family: var(--gog-font-body);
+  --gog-tooltip-font-size: var(--gog-text-xs);
+  --gog-tooltip-line-height: var(--gog-line-height-normal);
+  --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.
+     A cap, not a fixed height: shorter content stays exactly as tall as it needs to be, this
+     only stops something unusually long (a multi-paragraph TemplateRef) from growing to
+     cover most of the viewport. */
+  --gog-tooltip-max-height: 220px;
+  /* Same "floating panel" recipe as gog-dialog's panel and gog-select's dropdown — a
+     surface-colored box with a plain (not accent) border and the shared panel shadow —
+     rather than an inverted dark/light bubble, so it reads as part of this site instead of
+     a generic dark tooltip dropped on top of it. */
+  --gog-tooltip-bg: var(--gog-surface-color);
+  --gog-tooltip-color: var(--gog-text-color);
+  --gog-tooltip-border-width: var(--gog-panel-border-width);
+  --gog-tooltip-border-style: var(--gog-panel-border-style);
+  --gog-tooltip-border-color: var(--gog-border-color);
+  --gog-tooltip-shadow: var(--gog-panel-shadow);
+  --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: var(--gog-space-8);
+  --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);
+    /* The table's header labels, one step off the raw accent and toward the page's ink. The
+       accent alone is text on a tinted strip (`--gog-table-header-bg` is `--gog-hover-color`), and
+       it read 4.15:1 in `light` and 4.32:1 in `one-light` — the only two themes it failed, and
+       both by a margin small enough that a per-theme patch would have been the tempting fix. This
+       is the general one: 20% of the ink lifts every theme (worst is now one-light at 5.09:1) and
+       keeps the accent identity the header is drawn in. Flat fallback above stays the raw accent,
+       which is what a browser without `color-mix()` has always shown. */
+    --gog-table-accent-color: color-mix(
+      in srgb,
+      var(--gog-accent-color) 80%,
+      var(--gog-text-color)
+    );
+    /* Every other pressable surface, one rule: 20% of the same ingredient its own hover mixes at
+       10-12%, so the press is a clear step past the hover without becoming a fill. 20 rather than
+       a rounder 25 is measured, not chosen: `check:contrast` resolves these washes over the
+       surface each one actually sits on, and 21% puts one-dark's mid-grey text under 4.5:1 on the
+       tab, accordion and button-toggle presses. The accordion mixes `--gog-accent-dim` because
+       its hover does — its header sits on a strip where a full-accent wash was too loud
+       (21.7.1). */
+    --gog-accordion-press-bg: color-mix(in srgb, var(--gog-accent-dim) 20%, transparent);
+    --gog-autocomplete-option-press-bg: color-mix(
+      in srgb,
+      var(--gog-accent-color) 20%,
+      transparent
+    );
+    --gog-button-toggle-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
+    --gog-chip-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
+    --gog-menu-item-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
+    --gog-multiselect-option-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
+    --gog-select-option-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
+    --gog-tabs-press-bg: color-mix(in srgb, var(--gog-accent-color) 20%, transparent);
+
+    /* Button severity — see the block of the same name above for what each ingredient is and
+       why the ink mix is 50%. Four severities, one recipe each, so a new status colour would
+       need four lines rather than a design decision. */
+    --gog-button-success-fill-hover: color-mix(
+      in srgb,
+      var(--gog-success-color) 88%,
+      var(--gog-success-shade)
+    );
+    --gog-button-success-fill-press: color-mix(
+      in srgb,
+      var(--gog-success-color) 76%,
+      var(--gog-success-shade)
+    );
+    --gog-button-success-ink: color-mix(
+      in srgb,
+      var(--gog-success-color) 50%,
+      var(--gog-text-color)
+    );
+    --gog-button-success-wash: color-mix(in srgb, var(--gog-success-color) 12%, transparent);
+    --gog-button-danger-fill-hover: color-mix(
+      in srgb,
+      var(--gog-danger-color) 88%,
+      var(--gog-danger-shade)
+    );
+    --gog-button-danger-fill-press: color-mix(
+      in srgb,
+      var(--gog-danger-color) 76%,
+      var(--gog-danger-shade)
+    );
+    --gog-button-danger-ink: color-mix(in srgb, var(--gog-danger-color) 50%, var(--gog-text-color));
+    --gog-button-danger-wash: color-mix(in srgb, var(--gog-danger-color) 12%, transparent);
+    --gog-button-warning-fill-hover: color-mix(
+      in srgb,
+      var(--gog-warning-color) 88%,
+      var(--gog-warning-shade)
+    );
+    --gog-button-warning-fill-press: color-mix(
+      in srgb,
+      var(--gog-warning-color) 76%,
+      var(--gog-warning-shade)
+    );
+    --gog-button-warning-ink: color-mix(
+      in srgb,
+      var(--gog-warning-color) 50%,
+      var(--gog-text-color)
+    );
+    --gog-button-warning-wash: color-mix(in srgb, var(--gog-warning-color) 12%, transparent);
+    --gog-button-info-fill-hover: color-mix(
+      in srgb,
+      var(--gog-info-color) 88%,
+      var(--gog-info-shade)
+    );
+    --gog-button-info-fill-press: color-mix(
+      in srgb,
+      var(--gog-info-color) 76%,
+      var(--gog-info-shade)
+    );
+    --gog-button-info-ink: color-mix(in srgb, var(--gog-info-color) 50%, var(--gog-text-color));
+    --gog-button-info-wash: color-mix(in srgb, var(--gog-info-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);
+  }
+}