@guildofgleks/ui 0.0.1 → 0.2.2

package/src/styles/theme.css

@@ -0,0 +1,943 @@
+/*
+ * @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-<block>-*`. 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-btn-bg`,
+ *                    `--gog-btn-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-btn-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;
+  --gog-text-xl: 1.5rem;
+  --gog-text-2xl: 2rem;
+  --gog-text-3xl: 3rem;
+
+  /* ── Spacing & geometry ─────────────────────────────────────────────────────── */
+  --gog-space-xs: 4px;
+  --gog-space-sm: 8px;
+  --gog-space-md: 16px;
+  --gog-space-lg: 24px;
+  --gog-space-2xl: 48px;
+
+  --gog-radius: 8px;
+  --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. */
+  --gog-control-padding-y: 10px;
+  --gog-control-padding-x: 14px;
+  --gog-control-icon-offset: 10px;
+  --gog-control-border-width: 2px;
+  --gog-control-border-style: solid;
+
+  --gog-control-checkbox-padding: 6px;
+  --gog-control-checkbox-box-size-xsm: 12px;
+  --gog-control-checkbox-box-size-sm: 18px;
+  --gog-control-checkbox-box-size-md: 24px;
+  --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 ─────────────────────────────────────────────────────────── */
+  --gog-btn-xsm-padding: 0.25rem 0.5rem;
+  --gog-btn-sm-padding: 0.5rem 0.875rem;
+  --gog-btn-md-padding: 0.75rem 1.25rem;
+  --gog-btn-lg-padding: 1rem 1.5rem;
+  --gog-btn-slg-padding: 1.25rem 1.75rem;
+  --gog-btn-xsm-font-size: 0.75rem;
+  --gog-btn-sm-font-size: 0.875rem;
+  --gog-btn-md-font-size: 1rem;
+  --gog-btn-lg-font-size: 1.125rem;
+  --gog-btn-slg-font-size: 1.25rem;
+
+  /* ── Field sizing (input / select / multiselect share one scale) ───────────── */
+  --gog-field-xsm-padding-y: 4px;
+  --gog-field-xsm-padding-x: 8px;
+  --gog-field-xsm-icon-offset: 6px;
+  --gog-field-xsm-icon-inset: 24px;
+
+  --gog-field-sm-padding-y: 6px;
+  --gog-field-sm-padding-x: 10px;
+  --gog-field-sm-icon-offset: 8px;
+  --gog-field-sm-icon-inset: 30px;
+
+  --gog-field-md-icon-inset: 36px;
+
+  --gog-field-lg-padding-y: 14px;
+  --gog-field-lg-padding-x: 18px;
+  --gog-field-lg-icon-offset: 14px;
+  --gog-field-lg-icon-inset: 44px;
+
+  --gog-field-slg-padding-y: 18px;
+  --gog-field-slg-padding-x: 22px;
+  --gog-field-slg-font-size: 1.25rem;
+  --gog-field-slg-icon-offset: 18px;
+  --gog-field-slg-icon-inset: 52px;
+
+  /* ── 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-gap: 10px;
+  --gog-toast-stack-padding: 16px;
+  --gog-toast-z-index: 9999;
+  --gog-toast-enter-distance: 110%;
+  --gog-toast-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
+
+  /* ── Overlay stacking ───────────────────────────────────────────────────────
+     Baseline for dropdown panels. gog-dialog re-declares this on its own panel so
+     dropdowns opened inside a dialog stack above it. */
+  --gog-dropdown-z: 300;
+  --gog-spinner-overlay-z: 8000;
+
+  /* ── Light palette (also the no-data-theme default) ───────────────────────── */
+  color-scheme: light;
+  --gog-background-color: #f6f0e6;
+  --gog-surface-color: #eae0d0;
+  --gog-hover-color: #dfd3bf;
+  --gog-border-color: #c4b496;
+  --gog-text-color: #1e170e;
+  --gog-accent-text-color: #ece4d0;
+  --gog-muted-text-color: #6e5438;
+  --gog-primary-color: #1e170e;
+  --gog-accent-color: #8c6200;
+  --gog-accent-bright: #b8860b;
+  --gog-accent-dim: #634500;
+  --gog-accent-pale: #f4e8c1;
+  --gog-secondary-color: #a07800;
+  --gog-success-color: #2d6a4f;
+  --gog-danger-color: #9b2226;
+  --gog-warning-color: #bb3e03;
+  --gog-info-color: #4a6fa5;
+  --gog-panel-shadow: 0 12px 28px rgba(30, 23, 14, 0.08);
+  --gog-spinner-overlay-bg: rgba(246, 240, 230, 0.75);
+}
+
+:root[data-theme='light'],
+[data-theme='light'] {
+  color-scheme: light;
+
+  /* Фоновые и поверхностные тона (Тёплый пергамент) */
+  --gog-background-color: #f6f0e6;
+  --gog-surface-color: #eae0d0;
+  --gog-hover-color: #dfd3bf;
+  --gog-border-color: #c4b496;
+
+  /* Типографика */
+  --gog-text-color: #1e170e; /* Глубокий тёмно-коричневый вместо чисто черного */
+  --gog-accent-text-color: #ece4d0;
+  --gog-muted-text-color: #6e5438; /* Мягкий коричневый */
+
+  /* Бренд и акценты (Благородное золото) */
+  --gog-primary-color: #1e170e;
+  --gog-accent-color: #8c6200; /* Более контрастный золотисто-бронзовый */
+  --gog-accent-bright: #b8860b;
+  --gog-accent-dim: #634500;
+  --gog-accent-pale: #f4e8c1;
+  --gog-secondary-color: #a07800;
+
+  /* Гармонизированная семантика (Подходит под warm-стиль) */
+  --gog-success-color: #2d6a4f; /* Изумрудно-зеленый */
+  --gog-danger-color: #9b2226; /* Рубиновый */
+  --gog-warning-color: #bb3e03; /* Тёмно-янтарный */
+  --gog-info-color: #4a6fa5; /* Приглушенный стальной синий */
+
+  --gog-panel-shadow: 0 12px 28px rgba(30, 23, 14, 0.08);
+  --gog-spinner-overlay-bg: rgba(246, 240, 230, 0.75);
+}
+
+:root[data-theme='dark'],
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  /* Фоновые и поверхностные тона (Тёмная обсидиановая кузница) */
+  --gog-background-color: #0f0d0a;
+  --gog-surface-color: #191510;
+  --gog-hover-color: #262018;
+  --gog-border-color: #382e22;
+
+  /* Типографика (Комфортная для чтения) */
+  --gog-text-color: #e5dec9; /* Мягкий крем/слоновая кость (глаза не устают) */
+  --gog-accent-text-color: #e5dec9;
+  --gog-muted-text-color: #9e8c72; /* Приглушенное пергаментное золото */
+
+  /* Бренд и акценты (Светящееся золото) */
+  --gog-primary-color: #e5dec9;
+  --gog-accent-color: #f3be3a; /* Яркий золотой акцент */
+  --gog-accent-bright: #ffd05b;
+  --gog-accent-dim: #b5881a;
+  --gog-accent-pale: #3d2f0e;
+  --gog-secondary-color: #d4a373;
+
+  /* Гармонизированная семантика для тёмной темы */
+  --gog-success-color: #52b788;
+  --gog-danger-color: #e63946;
+  --gog-warning-color: #f4a261;
+  --gog-info-color: #64dfdf;
+
+  --gog-panel-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
+  --gog-spinner-overlay-bg: rgba(15, 13, 10, 0.75);
+}
+
+/*
+ * ── 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. */
+  --gog-panel-radius: calc(var(--gog-radius) + 8px);
+  --gog-field-xsm-font-size: var(--gog-text-xs);
+  --gog-field-sm-font-size: var(--gog-text-sm);
+  --gog-field-md-padding-y: var(--gog-control-padding-y);
+  --gog-field-md-padding-x: var(--gog-control-padding-x);
+  --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: 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-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-accordion-body-color: var(--gog-text-color);
+  --gog-accordion-body-line-height: 1.6;
+  --gog-accordion-header-text-transform: uppercase;
+  --gog-accordion-header-gap: 12px;
+  --gog-accordion-disabled-opacity: 0.5;
+  --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;
+  --gog-accordion-header-bg: transparent;
+  /* A subtle black wash over whatever sits behind the accordion, so the body always
+     reads slightly darker than the header regardless of the surrounding surface color. */
+  --gog-accordion-body-bg: color-mix(in srgb, black 6%, transparent);
+  --gog-accordion-skeleton-start: var(--gog-accent-dim);
+  --gog-accordion-skeleton-mid: color-mix(in srgb, var(--gog-accent-dim) 50%, transparent);
+  --gog-accordion-skeleton-end: var(--gog-accent-dim);
+  --gog-accordion-skeleton-radius: 2px;
+  --gog-accordion-skeleton-height: 12px;
+  --gog-accordion-skeleton-width: 55%;
+  --gog-accordion-skeleton-duration: 1.4s;
+  /* Per-size metrics. `lg` is the default size. */
+  --gog-accordion-xsm-padding-y: 4px;
+  --gog-accordion-xsm-padding-x: 8px;
+  --gog-accordion-xsm-font-size: var(--gog-text-xs);
+  --gog-accordion-xsm-letter-spacing: 0.2px;
+  --gog-accordion-xsm-content-gap: 2px;
+  --gog-accordion-xsm-body-font-size: var(--gog-text-xs);
+  --gog-accordion-xsm-body-line-height: 1.5;
+  --gog-accordion-xsm-body-padding-top: 4px;
+  --gog-accordion-xsm-body-padding-bottom: 6px;
+  --gog-accordion-xsm-chevron-size: 11px;
+  --gog-accordion-xsm-chevron-font-size: 10px;
+
+  --gog-accordion-sm-padding-y: 6px;
+  --gog-accordion-sm-padding-x: 10px;
+  --gog-accordion-sm-font-size: var(--gog-text-xs);
+  --gog-accordion-sm-letter-spacing: 0.4px;
+  --gog-accordion-sm-content-gap: 2px;
+  --gog-accordion-sm-body-font-size: var(--gog-text-xs);
+  --gog-accordion-sm-body-line-height: var(--gog-accordion-body-line-height);
+  --gog-accordion-sm-body-padding-top: 6px;
+  --gog-accordion-sm-body-padding-bottom: 8px;
+  --gog-accordion-sm-chevron-size: 13px;
+  --gog-accordion-sm-chevron-font-size: 12px;
+
+  --gog-accordion-md-padding-y: 10px;
+  --gog-accordion-md-padding-x: 14px;
+  --gog-accordion-md-font-size: var(--gog-text-xs);
+  --gog-accordion-md-letter-spacing: 0.8px;
+  --gog-accordion-md-content-gap: 2px;
+  --gog-accordion-md-body-font-size: var(--gog-text-sm);
+  --gog-accordion-md-body-line-height: var(--gog-accordion-body-line-height);
+  --gog-accordion-md-body-padding-top: 8px;
+  --gog-accordion-md-body-padding-bottom: 12px;
+  --gog-accordion-md-chevron-size: 15px;
+  --gog-accordion-md-chevron-font-size: 14px;
+
+  --gog-accordion-lg-padding-y: 14px;
+  --gog-accordion-lg-padding-x: 16px;
+  --gog-accordion-lg-font-size: var(--gog-text-sm);
+  --gog-accordion-lg-letter-spacing: 0.8px;
+  --gog-accordion-lg-content-gap: 4px;
+  --gog-accordion-lg-body-font-size: var(--gog-text-md);
+  --gog-accordion-lg-body-line-height: var(--gog-accordion-body-line-height);
+  --gog-accordion-lg-body-padding-top: 12px;
+  --gog-accordion-lg-body-padding-bottom: 16px;
+  --gog-accordion-lg-chevron-size: 18px;
+  --gog-accordion-lg-chevron-font-size: 16px;
+
+  --gog-accordion-slg-padding-y: 18px;
+  --gog-accordion-slg-padding-x: 18px;
+  --gog-accordion-slg-font-size: var(--gog-text-md);
+  --gog-accordion-slg-letter-spacing: 0.8px;
+  --gog-accordion-slg-content-gap: 4px;
+  --gog-accordion-slg-body-font-size: var(--gog-text-lg);
+  --gog-accordion-slg-body-line-height: var(--gog-accordion-body-line-height);
+  --gog-accordion-slg-body-padding-top: 16px;
+  --gog-accordion-slg-body-padding-bottom: 20px;
+  --gog-accordion-slg-chevron-size: 20px;
+  --gog-accordion-slg-chevron-font-size: 18px;
+
+  /* ── Button ────────────────────────────────────────────────────────────────
+     `--gog-btn-bg`, `--gog-btn-color`, `--gog-btn-border`, `--gog-btn-shadow`,
+     `--gog-btn-hover-bg`, `--gog-btn-hover-shadow`, `--gog-btn-padding` and
+     `--gog-btn-font-size` are intentionally NOT declared — they are the per-instance
+     escape hatch the variant/size classes fall back through. */
+  --gog-btn-font-family: var(--gog-font-heading);
+  --gog-btn-font-weight: 900;
+  --gog-btn-letter-spacing: 1px;
+  --gog-btn-text-transform: uppercase;
+  --gog-btn-line-height: 1;
+  --gog-btn-gap: var(--gog-space-sm);
+  --gog-btn-radius: var(--gog-radius);
+  --gog-btn-border-width: var(--gog-control-border-width);
+  --gog-btn-border-style: var(--gog-control-border-style);
+  --gog-btn-transition-duration: var(--gog-duration-base);
+  --gog-btn-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-btn-focus-ring-offset: 3px;
+  --gog-btn-active-scale: 0.97;
+  --gog-btn-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-btn-loading-opacity: 0.7;
+  --gog-btn-spinner-max-size: 70%;
+
+  --gog-btn-primary-bg: var(--gog-accent-color);
+  --gog-btn-primary-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-btn-primary-border: transparent;
+  --gog-btn-primary-shadow: none;
+  --gog-btn-primary-hover-bg: var(--gog-accent-bright);
+  --gog-btn-primary-hover-color: var(--gog-btn-primary-color);
+  --gog-btn-primary-hover-shadow: 0 0 16px
+    color-mix(in srgb, var(--gog-accent-bright) 45%, transparent);
+  --gog-btn-primary-spinner-color: var(--gog-text-color);
+
+  --gog-btn-secondary-bg: var(--gog-secondary-color);
+  --gog-btn-secondary-color: var(--gog-accent-text-color, var(--gog-primary-color));
+  --gog-btn-secondary-border: transparent;
+  --gog-btn-secondary-shadow: none;
+  --gog-btn-secondary-hover-bg: var(--gog-accent-color);
+  --gog-btn-secondary-hover-color: var(--gog-btn-secondary-color);
+  --gog-btn-secondary-hover-shadow: none;
+  --gog-btn-secondary-spinner-color: var(--gog-text-color);
+
+  --gog-btn-outline-bg: transparent;
+  --gog-btn-outline-color: var(--gog-accent-color);
+  --gog-btn-outline-border: var(--gog-accent-color);
+  --gog-btn-outline-shadow: none;
+  --gog-btn-outline-hover-bg: var(--gog-accent-color);
+  --gog-btn-outline-hover-color: var(--gog-primary-color);
+  --gog-btn-outline-hover-shadow: none;
+  --gog-btn-outline-spinner-color: var(--gog-accent-color);
+
+  --gog-btn-ghost-bg: transparent;
+  --gog-btn-ghost-color: var(--gog-accent-color);
+  --gog-btn-ghost-border: transparent;
+  --gog-btn-ghost-shadow: none;
+  --gog-btn-ghost-hover-bg: color-mix(in srgb, var(--gog-accent-color) 12%, transparent);
+  --gog-btn-ghost-hover-color: var(--gog-btn-ghost-color);
+  --gog-btn-ghost-hover-shadow: none;
+  --gog-btn-ghost-spinner-color: var(--gog-accent-color);
+
+  /* ── Checkbox ──────────────────────────────────────────────────────────────
+     Box/label/icon size and padding come from the `--gog-control-checkbox-*` scale;
+     checkbox.component.ts maps the `size` input onto the host. */
+  --gog-checkbox-font-family: var(--gog-font-body);
+  --gog-checkbox-gap: 10px;
+  --gog-checkbox-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: 1.3;
+  --gog-checkbox-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+  --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;
+
+  /* ── 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: color-mix(in srgb, var(--gog-surface-color) 88%, var(--gog-hover-color));
+  --gog-chip-hover-bg: color-mix(in srgb, var(--gog-hover-color) 45%, var(--gog-surface-color));
+  --gog-chip-border: var(--gog-border-color);
+  --gog-chip-border-width: 1px;
+  --gog-chip-border-style: solid;
+  --gog-chip-color: var(--gog-text-color);
+  --gog-chip-font-weight: 500;
+  --gog-chip-line-height: 1.2;
+  --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: 0.55;
+  --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: 0.225rem;
+  --gog-chip-xsm-padding-inline: 0.375rem;
+  --gog-chip-xsm-gap: 0.275rem;
+  --gog-chip-xsm-avatar-size: 0.875rem;
+  --gog-chip-xsm-icon-size: 0.6875rem;
+  --gog-chip-xsm-remove-size: 0.75rem;
+
+  --gog-chip-sm-font-size: 0.75rem;
+  --gog-chip-sm-padding-block: 0.3rem;
+  --gog-chip-sm-padding-inline: 0.5rem;
+  --gog-chip-sm-gap: 0.375rem;
+  --gog-chip-sm-avatar-size: 1rem;
+  --gog-chip-sm-icon-size: 0.75rem;
+  --gog-chip-sm-remove-size: 0.875rem;
+
+  --gog-chip-md-font-size: 0.875rem;
+  --gog-chip-md-padding-block: 0.45rem;
+  --gog-chip-md-padding-inline: 0.75rem;
+  --gog-chip-md-gap: 0.5rem;
+  --gog-chip-md-avatar-size: 1.25rem;
+  --gog-chip-md-icon-size: 0.875rem;
+  --gog-chip-md-remove-size: 1rem;
+
+  --gog-chip-lg-font-size: 1rem;
+  --gog-chip-lg-padding-block: 0.6rem;
+  --gog-chip-lg-padding-inline: 0.875rem;
+  --gog-chip-lg-gap: 0.625rem;
+  --gog-chip-lg-avatar-size: 1.5rem;
+  --gog-chip-lg-icon-size: 1rem;
+  --gog-chip-lg-remove-size: 1.125rem;
+
+  --gog-chip-slg-font-size: 1.125rem;
+  --gog-chip-slg-padding-block: 0.75rem;
+  --gog-chip-slg-padding-inline: 1rem;
+  --gog-chip-slg-gap: 0.75rem;
+  --gog-chip-slg-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: 16px 20px 14px;
+  --gog-dialog-header-gap: 12px;
+  --gog-dialog-header-border-color: var(--gog-border-color);
+  --gog-dialog-body-padding: 20px;
+  --gog-dialog-body-max-height: calc(var(--gog-dialog-max-height) - 60px);
+  --gog-dialog-close-size: 2rem;
+  --gog-dialog-close-font-size: 0.875rem;
+  --gog-dialog-close-color: var(--gog-muted-text-color);
+  --gog-dialog-close-hover-color: var(--gog-text-color);
+  --gog-dialog-close-hover-bg: color-mix(in srgb, var(--gog-hover-color) 70%, transparent);
+  --gog-dialog-close-hover-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-confirm-gap: 12px;
+  --gog-confirm-min-width: 320px;
+  --gog-confirm-max-width: 440px;
+  --gog-confirm-color: var(--gog-text-color);
+  --gog-confirm-description-color: var(--gog-muted-text-color);
+  --gog-confirm-actions-gap: var(--gog-space-sm);
+  --gog-confirm-actions-offset: var(--gog-space-sm);
+
+  /* ── 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: 4px;
+  --gog-input-label-color: var(--gog-accent-color);
+  --gog-input-label-font-size: var(--gog-text-sm);
+  --gog-input-label-letter-spacing: 1px;
+  --gog-input-label-text-transform: uppercase;
+  --gog-input-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: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+  --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);
+  --gog-input-error-offset: 2px;
+  --gog-input-icon-color: var(--gog-muted-text-color);
+  --gog-input-icon-hover-color: var(--gog-accent-color);
+  --gog-input-icon-action-radius: 4px;
+  --gog-input-icon-focus-ring-width: 2px;
+  --gog-input-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-input-transition-duration: var(--gog-duration-base);
+
+  /* ── Multiselect ───────────────────────────────────────────────────────────── */
+  --gog-ms-font-family: var(--gog-font-body);
+  --gog-ms-label-font-family: var(--gog-font-heading);
+  --gog-ms-gap: 4px;
+  --gog-ms-option-gap: 4px;
+  --gog-ms-options-padding: 4px;
+  --gog-ms-label-color: var(--gog-accent-color);
+  --gog-ms-label-font-size: var(--gog-text-sm);
+  --gog-ms-label-letter-spacing: 1px;
+  --gog-ms-label-text-transform: uppercase;
+  --gog-ms-field-bg: var(--gog-surface-color);
+  --gog-ms-field-border: var(--gog-accent-dim);
+  --gog-ms-field-border-width: var(--gog-control-border-width);
+  --gog-ms-field-border-style: var(--gog-control-border-style);
+  --gog-ms-radius: var(--gog-radius);
+  --gog-ms-field-color: var(--gog-text-color);
+  --gog-ms-value-color: var(--gog-text-color);
+  --gog-ms-placeholder-color: var(--gog-muted-text-color);
+  --gog-ms-focus-border: var(--gog-accent-color);
+  --gog-ms-focus-ring: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+  --gog-ms-focus-glow: 0 0 8px var(--gog-ms-focus-ring);
+  --gog-ms-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-ms-focus-ring-offset: var(--gog-focus-ring-offset);
+  --gog-ms-error-color: var(--gog-danger-color);
+  --gog-ms-error-font-size: var(--gog-text-xs);
+  --gog-ms-error-offset: 2px;
+  --gog-ms-border-color: var(--gog-accent-color);
+  --gog-ms-panel-bg: var(--gog-surface-color);
+  --gog-ms-panel-border: var(--gog-accent-color);
+  --gog-ms-panel-shadow: var(--gog-panel-shadow);
+  --gog-ms-panel-max-height: 260px;
+  --gog-ms-panel-offset: 2px;
+  --gog-ms-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
+  --gog-ms-option-color: var(--gog-text-color);
+  --gog-ms-option-gap-inline: 10px;
+  /* 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-ms-option-height: 40px;
+  --gog-ms-option-radius: calc(var(--gog-radius) - 2px);
+  --gog-ms-option-disabled-opacity: 0.5;
+  --gog-ms-option-transition-duration: var(--gog-duration-fast);
+  --gog-ms-checkbox-border: var(--gog-accent-dim);
+  --gog-ms-checkbox-bg: var(--gog-background-color);
+  --gog-ms-checkbox-checked-bg: var(--gog-accent-color);
+  --gog-ms-checkbox-checked-color: var(--gog-primary-color);
+  --gog-ms-controls-gap: 4px;
+  --gog-ms-controls-padding: 6px 10px;
+  --gog-ms-actions-gap: 6px;
+  --gog-ms-clear-radius: 2px;
+  --gog-ms-disabled-opacity: var(--gog-disabled-opacity);
+  --gog-ms-transition-duration: var(--gog-duration-base);
+  --gog-ms-arrow-transition-duration: var(--gog-duration-slow);
+  /* Icon geometry, expressed as a ratio of the control's font size. */
+  --gog-ms-clear-icon-ratio: 0.7;
+  --gog-ms-arrow-icon-ratio: 0.875;
+  --gog-ms-mark-size-ratio: 1.2375;
+  --gog-ms-mark-icon-ratio: 1.125;
+
+  /* ── Paginator ─────────────────────────────────────────────────────────────── */
+  --gog-paginator-gap: 4px;
+  --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);
+  --gog-paginator-ellipsis-min-width: 32px;
+
+  /* ── Select ────────────────────────────────────────────────────────────────── */
+  --gog-select-font-family: var(--gog-font-body);
+  --gog-select-label-font-family: var(--gog-font-heading);
+  --gog-select-gap: 4px;
+  --gog-select-label-color: var(--gog-accent-color);
+  --gog-select-label-font-size: var(--gog-text-sm);
+  --gog-select-label-letter-spacing: 1px;
+  --gog-select-label-text-transform: uppercase;
+  --gog-select-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: color-mix(in srgb, var(--gog-accent-color) 25%, transparent);
+  --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);
+  --gog-select-chevron-inset: 40px;
+  --gog-select-control-gap: 12px;
+  --gog-select-panel-bg: var(--gog-surface-color);
+  --gog-select-panel-shadow: var(--gog-panel-shadow);
+  --gog-select-panel-max-height: 260px;
+  --gog-select-panel-offset: 2px;
+  --gog-select-option-hover-bg: color-mix(in srgb, var(--gog-accent-color) 10%, transparent);
+  --gog-select-option-selected-color: var(--gog-accent-color);
+  --gog-select-option-color: var(--gog-text-color);
+  --gog-select-option-gap: 10px;
+  /* 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: 0.5;
+  --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);
+
+  /* ── Skeleton ─────────────────────────────────────────────────────────────── */
+  --gog-skeleton-base: color-mix(in srgb, var(--gog-border-color) 40%, var(--gog-surface-color));
+  --gog-skeleton-shine: color-mix(in srgb, var(--gog-skeleton-base), white 35%);
+  --gog-skeleton-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-label-font-family: var(--gog-font-heading);
+  --gog-slider-value-font-family: var(--gog-font-mono);
+  --gog-slider-error-font-family: var(--gog-font-body);
+  --gog-slider-gap: 6px;
+  --gog-slider-label-color: var(--gog-accent-color);
+  --gog-slider-label-font-size: var(--gog-text-sm);
+  --gog-slider-label-letter-spacing: 1px;
+  --gog-slider-label-text-transform: uppercase;
+  --gog-slider-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;
+  --gog-slider-track-bg: var(--gog-accent-dim);
+  --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: 2px;
+  --gog-slider-thumb-radius: 50%;
+  --gog-slider-thumb-shadow: color-mix(in srgb, var(--gog-accent-bright) 40%, transparent);
+  --gog-slider-thumb-glow-size: 6px;
+  --gog-slider-focus-ring: color-mix(in srgb, var(--gog-accent-color) 30%, transparent);
+  --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: 12px;
+  --gog-table-border-color: var(--gog-accent-dim);
+  --gog-table-border-width: 2px;
+  --gog-table-border-style: solid;
+  --gog-table-row-border-width: 1px;
+  --gog-table-surface: var(--gog-surface-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);
+  --gog-table-muted-color: var(--gog-muted-text-color);
+  --gog-table-focus-ring: var(--gog-accent-color);
+  --gog-table-focus-ring-width: var(--gog-focus-ring-width);
+  --gog-table-header-letter-spacing: 1px;
+  --gog-table-header-text-transform: uppercase;
+  --gog-table-num-col-width: 48px;
+  --gog-table-th-inner-gap: 6px;
+  --gog-table-sort-icon-size: 0.9em;
+  --gog-table-sort-icon-width: 1.1em;
+  --gog-table-sort-icon-opacity: 0.6;
+  --gog-table-empty-padding: 24px 14px;
+  --gog-table-empty-font-size: var(--gog-text-md);
+  --gog-table-loading-padding: 32px 14px;
+  --gog-table-loading-opacity: 0.5;
+  --gog-table-row-transition-duration: var(--gog-duration-fast);
+  --gog-table-footer-gap: var(--gog-space-sm);
+  --gog-table-footer-min-height: 32px;
+  --gog-table-total-font-size: var(--gog-text-xs);
+  --gog-table-total-letter-spacing: 0.5px;
+  --gog-table-total-text-transform: uppercase;
+  --gog-table-num-font-size: var(--gog-text-xs);
+  --gog-table-padding-h: 14px;
+  --gog-table-xsm-padding-v: 2px;
+  --gog-table-xsm-th-font-size: var(--gog-text-xs);
+  --gog-table-xsm-td-font-size: var(--gog-text-xs);
+  --gog-table-sm-padding-v: 3px;
+  --gog-table-sm-th-font-size: var(--gog-text-xs);
+  --gog-table-sm-td-font-size: var(--gog-text-xs);
+  --gog-table-md-padding-v: 6px;
+  --gog-table-md-th-font-size: var(--gog-text-xs);
+  --gog-table-md-td-font-size: var(--gog-text-sm);
+  --gog-table-lg-padding-v: 10px;
+  --gog-table-lg-th-font-size: var(--gog-text-sm);
+  --gog-table-lg-td-font-size: var(--gog-text-md);
+  --gog-table-slg-padding-v: 14px;
+  --gog-table-slg-th-font-size: var(--gog-text-md);
+  --gog-table-slg-td-font-size: var(--gog-text-lg);
+
+  /* ── 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: 1px;
+  --gog-tag-border-style: solid;
+  --gog-tag-inner-border-width: 1px;
+  --gog-tag-font-weight: 600;
+  --gog-tag-line-height: 1;
+  --gog-tag-radius: max(var(--gog-radius), 2px);
+  --gog-tag-pill-radius: 9999px;
+
+  --gog-tag-xsm-font-size: 0.6875rem;
+  --gog-tag-xsm-padding-block: 0.1875rem;
+  --gog-tag-xsm-padding-inline: 0.375rem;
+  --gog-tag-xsm-gap: 0.1875rem;
+  --gog-tag-xsm-icon-size: 0.6875rem;
+
+  --gog-tag-sm-font-size: 0.75rem;
+  --gog-tag-sm-padding-block: 0.25rem;
+  --gog-tag-sm-padding-inline: 0.5rem;
+  --gog-tag-sm-gap: 0.25rem;
+  --gog-tag-sm-icon-size: 0.75rem;
+
+  --gog-tag-md-font-size: 0.875rem;
+  --gog-tag-md-padding-block: 0.375rem;
+  --gog-tag-md-padding-inline: 0.75rem;
+  --gog-tag-md-gap: 0.375rem;
+  --gog-tag-md-icon-size: 0.875rem;
+
+  --gog-tag-lg-font-size: 1rem;
+  --gog-tag-lg-padding-block: 0.5rem;
+  --gog-tag-lg-padding-inline: 0.875rem;
+  --gog-tag-lg-gap: 0.5rem;
+  --gog-tag-lg-icon-size: 1rem;
+
+  --gog-tag-slg-font-size: 1.125rem;
+  --gog-tag-slg-padding-block: 0.625rem;
+  --gog-tag-slg-padding-inline: 1rem;
+  --gog-tag-slg-gap: 0.625rem;
+  --gog-tag-slg-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: 12px 14px;
+  --gog-toast-radius: 0px;
+  --gog-toast-content-gap: 10px;
+  --gog-toast-main-gap: var(--gog-space-sm);
+  --gog-toast-actions-gap: 6px;
+  --gog-toast-message-font-size: var(--gog-text-sm);
+  --gog-toast-message-line-height: 1.5;
+  --gog-toast-icon-size: 1rem;
+  --gog-toast-icon-line-height: 1.4;
+  --gog-toast-action-padding: 0.25rem 0.5rem;
+  --gog-toast-action-font-size: 0.75rem;
+  --gog-toast-close-padding: 0.125rem 0.25rem;
+  --gog-toast-close-font-size: 0.75rem;
+  --gog-toast-progress-height: 3px;
+  --gog-toast-progress-opacity: 30%;
+  --gog-toast-transition-duration: 0.25s;
+  --gog-toast-base-z: 100;
+  /* 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;
+}