@weasel-js/theme 1.5.1 → 1.6.0

package/dist/themes-bTfTZjCh.d.ts

@@ -0,0 +1,1299 @@
+/** One value of an axis. `scheme` becomes `color-scheme` in that value's CSS blocks. */
+interface AxisValue {
+    readonly scheme?: 'dark' | 'light';
+}
+interface AxisDef {
+    readonly default: string;
+    readonly values: Readonly<Record<string, AxisValue>>;
+}
+/** Key order is declaration order, which selectors and selection keys follow. */
+type AxisDefs = Readonly<Record<string, AxisDef>>;
+/** A partial choice of axis values, e.g. `{ mode: 'light' }`. */
+type Selection = Readonly<Record<string, string>>;
+/** `{ by: 'mode', dark: …, light: … }`: a value that differs per axis value. */
+interface ByAxis<T> {
+    readonly by: string;
+    readonly [axisValue: string]: Varying<T> | string;
+}
+type Varying<T> = T | ByAxis<T>;
+declare function isByAxis(v: unknown): v is ByAxis<unknown>;
+/** Every axis given a known value; anything missing or unknown takes its default. */
+declare function fullSelection(axes: AxisDefs, selection?: Selection): Selection;
+declare function enumerateSelections(axes: AxisDefs): Selection[];
+/** `mode=dark,density=compact`, axes in declaration order. */
+declare function selectionKey(axes: AxisDefs, selection: Selection): string;
+
+type TokenValue = string | number | readonly (string | number)[];
+/**
+ * A single design token as authored, before aliases are resolved: a DTCG-shaped
+ * `{ type, value }` pair where `value` may still be a `{ref}` to another token.
+ */
+interface RawToken {
+    readonly type: string;
+    readonly value: TokenValue;
+    /** Render the referenced color at this alpha, 0–1. */
+    readonly alpha?: number | undefined;
+    readonly description?: string | undefined;
+}
+/** A token graph flattened to one level, keyed by token name (no `--wzl-`
+ *  prefix). Still unresolved — see `ResolvedTokenMap` for the output side. */
+type FlatTokens = Record<string, RawToken>;
+
+/**
+ * A theme ready to resolve: its axes and its tokens, each plain or varying by
+ * axis, references intact. A `by` that leaves a value out contributes nothing
+ * for that selection, so the theme it extends supplies it.
+ */
+interface Theme {
+    readonly name: string;
+    readonly extends: Theme | null;
+    readonly axes: AxisDefs;
+    readonly tokens: Readonly<Record<string, Varying<RawToken>>>;
+    /** Ramp name → step names in order, for the ramps this theme declares itself. */
+    readonly ramps?: Readonly<Record<string, readonly string[]>>;
+    /** The colors a `tone` index picks from. Absent: the nearest theme it extends that has one. */
+    readonly tones?: SerializableColorList;
+}
+/** What `defineTheme` accepts: a definition whose `extends` is a `Theme`, holding pins and components only. */
+type ThemeInput = Omit<ThemeDefinition, 'extends'> & {
+    readonly extends?: Theme | null;
+};
+/** The built-in theme, from the baked output of themes/weasel.json. */
+declare const weaselTheme: Theme;
+/**
+ * Build a theme from pins. Unless `extends` says otherwise the result layers
+ * onto `weaselTheme`, so a theme only names what it changes. A definition with
+ * seeds, ramps, scales or semantics needs deriving first.
+ */
+declare function defineTheme(input: ThemeInput): Theme;
+
+/** The output of `resolveTheme`: every token of a theme, for one selection, keyed
+ *  by CSS custom-property name and flattened to a final CSS value. */
+type ResolvedTheme = Readonly<Record<TokenName, string>>;
+/** Every axis the chain declares. An axis declared more than once keeps every value; a descendant's value entries and default win. */
+declare function themeAxes(theme: Theme): AxisDefs;
+/**
+ * Merge the extends chain at a selection, resolve every alias, and key the
+ * result by CSS custom-property name. A missing or unknown axis value takes the
+ * axis default.
+ *
+ * Pure — no DOM. An unresolvable reference throws rather than falling back.
+ */
+declare function resolveTheme(theme: Theme, selection?: Selection): ResolvedTheme;
+
+/** The categorical generator the swatch ramp uses, asked for `count` colors. */
+interface GeneratedColors {
+    readonly generate: {
+        readonly count: number;
+        readonly gates?: CategoricalRampDef['gates'];
+    };
+}
+/** A ramp of the active theme, by name — `{ ramp: 'swatch' }` walks its steps in order. */
+interface RampColors {
+    readonly ramp: string;
+}
+/** The forms a theme definition can hold: everything but a function. */
+type SerializableColorList = readonly string[] | GeneratedColors | RampColors;
+/**
+ * Several colors, read by index with `colorAt`, wrapping. Literals; the swatch
+ * ramp's generator; a ramp of the active theme, which follows the mode; or a
+ * function of the index.
+ */
+type ColorList = SerializableColorList | ((i: number) => string);
+/** What a `ColorList` resolves against. `useTheme()`'s value is one. */
+interface ColorContext {
+    readonly theme: Theme;
+    readonly resolved: ResolvedTheme;
+}
+/** A ramp's step names, from the nearest theme in the chain that declares it. */
+declare function rampSteps(theme: Theme, ramp: string): readonly string[];
+/** The tone list a theme declares, from the nearest theme in its chain that has one. */
+declare function themeTones(theme: Theme): ColorList;
+/** The `i`th color of `list`, wrapping. A ramp list reads the resolved theme, so the answer follows its mode. */
+declare function colorAt(list: ColorList, i: number, ctx?: ColorContext): string;
+/**
+ * As `colorAt`, but a ramp list answers with its custom property —
+ * `var(--wzl-swatch-sky)` — so a color written into CSS follows a mode change
+ * without re-rendering, provider or not.
+ */
+declare function colorCssAt(list: ColorList, i: number, ctx?: ColorContext): string;
+/** How many distinct colors `list` holds before it wraps; `undefined` for a function, which never does. */
+declare function colorCount(list: ColorList, ctx?: ColorContext): number | undefined;
+
+/** A number, or `{seeds.name}`. */
+type NumberParam = Varying<number | string>;
+interface PinObject {
+    readonly value: TokenValue;
+    readonly type?: string;
+    readonly description?: string;
+    readonly alpha?: number;
+}
+/** A bare value or `{ value, type?, description?, alpha? }`. The value may be a `{token}` reference. */
+type PinValue = TokenValue | PinObject;
+interface LightnessRampDef {
+    readonly kind: 'lightness';
+    readonly steps: Varying<readonly string[]>;
+    /** First and last step's OKLCH lightness. */
+    readonly lightness: Varying<readonly [NumberParam, NumberParam]>;
+    /** 0 walks evenly; 1 follows a smoothstep S. */
+    readonly curve?: NumberParam;
+    /** Degrees. Ignored when an anchor is given. */
+    readonly hue?: NumberParam;
+    readonly chroma?: Varying<{
+        readonly peak: NumberParam;
+        readonly lightBias?: NumberParam;
+        readonly darkBias?: NumberParam;
+    }>;
+    /**
+     * Step name → exact hex (or `{seeds.name}`). An anchor's hue and chroma replace `hue` and `chroma.peak`; with several,
+     * both blend by step between consecutive anchors, and steps outside them take the nearest anchor's.
+     */
+    readonly anchor?: Varying<Readonly<Record<string, Varying<string>>>>;
+    readonly description?: string;
+    readonly describe?: Readonly<Record<string, string>>;
+}
+interface CategoricalRampDef {
+    readonly kind: 'categorical';
+    readonly steps: Varying<readonly string[]>;
+    /** Any of the palette generator's `Constraints` except `count` and `anchors`. */
+    readonly gates?: Varying<Readonly<Record<string, Varying<number | string>>>>;
+    readonly anchors?: readonly {
+        readonly name: string;
+        readonly hue: number;
+        readonly lightness: number;
+        readonly chroma?: number;
+    }[];
+    readonly description?: string;
+    readonly describe?: Readonly<Record<string, string>>;
+}
+type RampDef = LightnessRampDef | CategoricalRampDef;
+interface ScaleDef {
+    readonly steps: Varying<readonly string[]>;
+    readonly base: NumberParam;
+    /** Linear: `base + step × i`. */
+    readonly step?: NumberParam;
+    /** Geometric: `base × ratio^i`. */
+    readonly ratio?: NumberParam;
+    /** Explicit: `base × factors[i]`, one per step. For a ramp no single rule fits. */
+    readonly factors?: Varying<readonly NumberParam[]>;
+    readonly description?: string;
+    readonly describe?: Readonly<Record<string, string>>;
+}
+interface SemanticCommon {
+    readonly type?: string;
+    readonly description?: string;
+    /** Audited, never applied. */
+    readonly check?: {
+        readonly contrast: number;
+        readonly against: readonly string[];
+    };
+}
+type StepRule = SemanticCommon & {
+    readonly ramp: string;
+    readonly step: Varying<string>;
+};
+type OffsetRule = SemanticCommon & {
+    readonly from: string;
+    readonly offset: number;
+    readonly dir: 'lighter' | 'darker' | 'away';
+};
+type ContrastRule = SemanticCommon & {
+    readonly ramp: string;
+    readonly contrast: {
+        readonly min: number;
+        readonly against: readonly string[];
+    };
+};
+type RefRule = SemanticCommon & {
+    readonly ref: string;
+    readonly alpha?: number;
+};
+type LiteralRule = SemanticCommon & {
+    readonly value: TokenValue;
+};
+type SemanticRule = StepRule | OffsetRule | ContrastRule | RefRule | LiteralRule;
+interface ThemeDefinition {
+    readonly name: string;
+    /** Another definition's name. Absent or null: extends nothing. */
+    readonly extends?: string | null;
+    readonly description?: string;
+    readonly axes?: AxisDefs;
+    readonly seeds?: Readonly<Record<string, Varying<number | string>>>;
+    readonly ramps?: Readonly<Record<string, RampDef>>;
+    readonly scales?: Readonly<Record<string, ScaleDef>>;
+    readonly semantics?: Readonly<Record<string, Varying<SemanticRule>>>;
+    readonly components?: Readonly<Record<string, Varying<PinValue>>>;
+    readonly pins?: Readonly<Record<string, Varying<PinValue>>>;
+    /** The colors a `tone` index picks from. Absent: the nearest theme it extends that has one, else the swatch ramp. */
+    readonly tones?: SerializableColorList;
+}
+
+type Lookup = (name: string) => ThemeDefinition | undefined;
+/** The definition with its whole `extends` chain folded in, child entries winning. */
+declare function mergeChain(def: ThemeDefinition, lookup?: Lookup, seen?: ReadonlySet<string>): ThemeDefinition;
+
+/**
+ * A definition with every rule run: plain or `by`-varying tokens, references intact.
+ * A branch `derive` could not produce is left out, so at runtime it falls through to the parent; definitions with
+ * issues still bake, because the editor bakes mid-edit and the build refuses them before baking. Cycles and dangling
+ * references still throw, as they do in `derive`.
+ */
+interface BakedTheme {
+    readonly name: string;
+    readonly extends: string | null;
+    readonly axes: AxisDefs;
+    /** In layer order, then definition order. */
+    readonly tokens: Readonly<Record<string, Varying<RawToken>>>;
+    /** Each ramp this definition declares → its step names in order, which the tokens alone do not keep. */
+    readonly ramps?: Readonly<Record<string, readonly string[]>>;
+    readonly tones?: SerializableColorList;
+}
+/** Derive `definition` at every selection and fold the results into one record of tokens with no rules left. */
+declare function bake(definition: ThemeDefinition, lookup?: Lookup): BakedTheme;
+/** `definition` and every theme it extends, baked, root first. */
+declare function bakeChain(definition: ThemeDefinition, lookup?: Lookup): BakedTheme[];
+
+/** Every design token the built-in themes declare, spelled as the CSS
+ *  custom property it becomes. */
+type TokenName = '--wzl-accent' | '--wzl-accent-base' | '--wzl-accent-fg' | '--wzl-accent-hover' | '--wzl-accent-soft' | '--wzl-accent-strong' | '--wzl-backdrop' | '--wzl-border' | '--wzl-border-strong' | '--wzl-border-w' | '--wzl-checker-a' | '--wzl-checker-b' | '--wzl-checker-size' | '--wzl-control-h' | '--wzl-control-h-sm' | '--wzl-control-h-xs' | '--wzl-curve-color' | '--wzl-curve-width' | '--wzl-danger' | '--wzl-danger-base' | '--wzl-ease-in-cubic' | '--wzl-ease-in-out-cubic' | '--wzl-ease-out-back' | '--wzl-ease-out-cubic' | '--wzl-fg' | '--wzl-fg-inverse' | '--wzl-fg-muted' | '--wzl-fg-on-accent' | '--wzl-fg-subtle' | '--wzl-field-pad-x' | '--wzl-focus-ring' | '--wzl-font-body' | '--wzl-font-display' | '--wzl-font-mono' | '--wzl-font-size' | '--wzl-font-size-2xs' | '--wzl-font-size-lg' | '--wzl-font-size-md' | '--wzl-font-size-sm' | '--wzl-font-size-xl' | '--wzl-font-size-xs' | '--wzl-font-ui' | '--wzl-font-weight-bold' | '--wzl-font-weight-light' | '--wzl-font-weight-medium' | '--wzl-font-weight-normal' | '--wzl-glass-blur' | '--wzl-glass-tint' | '--wzl-gray-100' | '--wzl-gray-200' | '--wzl-gray-300' | '--wzl-gray-400' | '--wzl-gray-50' | '--wzl-gray-500' | '--wzl-gray-600' | '--wzl-gray-700' | '--wzl-gray-800' | '--wzl-gray-900' | '--wzl-handle-size' | '--wzl-handle-size-lg' | '--wzl-handle-size-sm' | '--wzl-icon-button-size' | '--wzl-leading' | '--wzl-leading-snug' | '--wzl-leading-tight' | '--wzl-line' | '--wzl-line-strong' | '--wzl-line-subtle' | '--wzl-line-width' | '--wzl-motion-fast' | '--wzl-motion-medium' | '--wzl-panel-blur' | '--wzl-panel-border-color' | '--wzl-panel-border-style' | '--wzl-panel-border-width' | '--wzl-panel-pad' | '--wzl-panel-radius' | '--wzl-panel-surface' | '--wzl-panel-title-case' | '--wzl-panel-title-color' | '--wzl-panel-title-font' | '--wzl-panel-title-inset' | '--wzl-panel-title-size' | '--wzl-panel-title-tracking' | '--wzl-panel-title-weight' | '--wzl-panel-tone-mix' | '--wzl-radius-lg' | '--wzl-radius-md' | '--wzl-radius-pill' | '--wzl-radius-sm' | '--wzl-secondary' | '--wzl-secondary-base' | '--wzl-secondary-fg' | '--wzl-secondary-soft' | '--wzl-secondary-strong' | '--wzl-shadow' | '--wzl-slider-thumb-mix' | '--wzl-slider-thumb-size' | '--wzl-slider-track-h' | '--wzl-slider-track-mix' | '--wzl-space-1' | '--wzl-space-2' | '--wzl-space-3' | '--wzl-space-4' | '--wzl-space-5' | '--wzl-space-6' | '--wzl-space-7' | '--wzl-space-8' | '--wzl-space-lg' | '--wzl-space-md' | '--wzl-space-sm' | '--wzl-space-xs' | '--wzl-stance-advanced-title-color' | '--wzl-stance-aside-blur' | '--wzl-stance-aside-border-color' | '--wzl-stance-aside-surface' | '--wzl-stance-aside-title-color' | '--wzl-stance-danger-border-color' | '--wzl-stance-danger-title-color' | '--wzl-stance-danger-tone' | '--wzl-stance-debug-border-style' | '--wzl-stance-debug-title-case' | '--wzl-stance-debug-title-font' | '--wzl-stance-important-border-color' | '--wzl-stance-important-title-color' | '--wzl-stance-notice-tone' | '--wzl-stance-notice-tone-mix' | '--wzl-stance-preview-pad' | '--wzl-stance-preview-title-case' | '--wzl-stance-preview-title-inset' | '--wzl-stance-preview-title-size' | '--wzl-stance-scope-border-width' | '--wzl-stance-scope-nested-radius' | '--wzl-stance-scope-nested-surface' | '--wzl-stance-scope-radius' | '--wzl-stance-scope-tone-mix' | '--wzl-success' | '--wzl-success-base' | '--wzl-surface' | '--wzl-surface-hover' | '--wzl-surface-pressed' | '--wzl-surface-raised' | '--wzl-surface-sunken' | '--wzl-swatch-amber' | '--wzl-swatch-blue' | '--wzl-swatch-citron' | '--wzl-swatch-fuchsia' | '--wzl-swatch-green' | '--wzl-swatch-red' | '--wzl-swatch-rose' | '--wzl-swatch-sky' | '--wzl-swatch-teal' | '--wzl-swatch-violet' | '--wzl-tb-height' | '--wzl-tracking-none' | '--wzl-tracking-wide' | '--wzl-tracking-wider' | '--wzl-warning' | '--wzl-warning-base' | '--wzl-workspace-line' | '--wzl-workspace-surface' | '--wzl-z-modal' | '--wzl-z-overlay' | '--wzl-z-toolbar';
+/** A built-in theme with its aliases already collapsed: every selection
+ *  (keyed `mode=dark`, axes in declaration order) maps every token name to
+ *  a final CSS value. */
+interface GeneratedTheme {
+    readonly name: string;
+    readonly axes: AxisDefs;
+    readonly selections: Readonly<Record<string, Readonly<Record<TokenName, string>>>>;
+}
+/** The built-in themes, resolved, keyed by theme name. Read this to list
+ *  or preview themes without resolving a token graph yourself. */
+declare const THEMES: {
+    readonly weasel: {
+        readonly name: "weasel";
+        readonly axes: {
+            readonly mode: {
+                readonly default: "dark";
+                readonly values: {
+                    readonly dark: {
+                        readonly scheme: "dark";
+                    };
+                    readonly light: {
+                        readonly scheme: "light";
+                    };
+                };
+            };
+            readonly density: {
+                readonly default: "comfortable";
+                readonly values: {
+                    readonly compact: {};
+                    readonly comfortable: {};
+                    readonly roomy: {};
+                };
+            };
+        };
+        readonly selections: {
+            readonly 'mode=dark,density=compact': {
+                readonly '--wzl-gray-50': "#f5f5f6";
+                readonly '--wzl-gray-100': "#e6e7e9";
+                readonly '--wzl-gray-200': "#c9cbcf";
+                readonly '--wzl-gray-300': "#9ea1a8";
+                readonly '--wzl-gray-400': "#6f737b";
+                readonly '--wzl-gray-500': "#4d5058";
+                readonly '--wzl-gray-600': "#383b42";
+                readonly '--wzl-gray-700': "#25272c";
+                readonly '--wzl-gray-800': "#181a1e";
+                readonly '--wzl-gray-900': "#0e0f12";
+                readonly '--wzl-accent-soft': "#1d1454";
+                readonly '--wzl-accent-base': "#2e1f7a";
+                readonly '--wzl-accent-strong': "#5841b8";
+                readonly '--wzl-secondary-soft': "#704e09";
+                readonly '--wzl-secondary-base': "#dc9d15";
+                readonly '--wzl-secondary-strong': "#f1cb8d";
+                readonly '--wzl-swatch-fuchsia': "#f641f7";
+                readonly '--wzl-swatch-green': "#48e628";
+                readonly '--wzl-swatch-sky': "#36bff2";
+                readonly '--wzl-swatch-amber': "#e69628";
+                readonly '--wzl-swatch-teal': "#3ee1cb";
+                readonly '--wzl-swatch-red': "#f75034";
+                readonly '--wzl-swatch-blue': "#407ef7";
+                readonly '--wzl-swatch-citron': "#d5d23a";
+                readonly '--wzl-swatch-rose': "#fa4590";
+                readonly '--wzl-swatch-violet': "#955cf9";
+                readonly '--wzl-font-size-2xs': "7px";
+                readonly '--wzl-font-size-xs': "8px";
+                readonly '--wzl-font-size-sm': "9px";
+                readonly '--wzl-font-size-md': "11px";
+                readonly '--wzl-font-size-lg': "14px";
+                readonly '--wzl-font-size-xl': "17px";
+                readonly '--wzl-space-1': "2px";
+                readonly '--wzl-space-2': "4px";
+                readonly '--wzl-space-3': "6px";
+                readonly '--wzl-space-4': "8px";
+                readonly '--wzl-space-5': "10px";
+                readonly '--wzl-space-6': "12px";
+                readonly '--wzl-space-7': "14px";
+                readonly '--wzl-space-8': "16px";
+                readonly '--wzl-surface': "#181a1e";
+                readonly '--wzl-surface-raised': "#25272c";
+                readonly '--wzl-surface-sunken': "#0e0f12";
+                readonly '--wzl-fg': "#e6e7e9";
+                readonly '--wzl-fg-muted': "#9ea1a8";
+                readonly '--wzl-fg-subtle': "#6f737b";
+                readonly '--wzl-border': "#25272c";
+                readonly '--wzl-border-strong': "#6f737b";
+                readonly '--wzl-accent-fg': "#5841b8";
+                readonly '--wzl-secondary-fg': "#dc9d15";
+                readonly '--wzl-fg-inverse': "#0e0f12";
+                readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
+                readonly '--wzl-panel-surface': "#25272c";
+                readonly '--wzl-panel-border-color': "#25272c";
+                readonly '--wzl-panel-border-style': "solid";
+                readonly '--wzl-panel-border-width': "1px";
+                readonly '--wzl-radius-lg': "14px";
+                readonly '--wzl-panel-radius': "14px";
+                readonly '--wzl-panel-pad': "14px 16px";
+                readonly '--wzl-glass-blur': "3px";
+                readonly '--wzl-panel-blur': "3px";
+                readonly '--wzl-panel-tone-mix': "14%";
+                readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-weight-light': "200";
+                readonly '--wzl-panel-title-weight': "200";
+                readonly '--wzl-panel-title-size': "14px";
+                readonly '--wzl-panel-title-case': "none";
+                readonly '--wzl-panel-title-tracking': "0.01em";
+                readonly '--wzl-panel-title-color': "#e6e7e9";
+                readonly '--wzl-panel-title-inset': "0";
+                readonly '--wzl-stance-scope-border-width': "0";
+                readonly '--wzl-stance-scope-radius': "8px";
+                readonly '--wzl-stance-scope-tone-mix': "22%";
+                readonly '--wzl-stance-scope-nested-radius': "6px";
+                readonly '--wzl-stance-scope-nested-surface': "#181a1e";
+                readonly '--wzl-stance-aside-surface': "transparent";
+                readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-stance-aside-border-color': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-stance-aside-blur': "0px";
+                readonly '--wzl-stance-aside-title-color': "#6f737b";
+                readonly '--wzl-stance-advanced-title-color': "#6f737b";
+                readonly '--wzl-stance-debug-border-style': "dashed";
+                readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-case': "none";
+                readonly '--wzl-danger-base': "#d94a3f";
+                readonly '--wzl-danger': "#d94a3f";
+                readonly '--wzl-stance-danger-tone': "#d94a3f";
+                readonly '--wzl-stance-danger-border-color': "#d94a3f";
+                readonly '--wzl-stance-danger-title-color': "#d94a3f";
+                readonly '--wzl-accent': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone-mix': "8%";
+                readonly '--wzl-stance-important-border-color': "#5841b8";
+                readonly '--wzl-stance-important-title-color': "#5841b8";
+                readonly '--wzl-stance-preview-pad': "0";
+                readonly '--wzl-stance-preview-title-size': "8px";
+                readonly '--wzl-stance-preview-title-case': "none";
+                readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
+                readonly '--wzl-warning-base': "#d99a3f";
+                readonly '--wzl-success-base': "#2ec27e";
+                readonly '--wzl-fg-on-accent': "#f5f5f6";
+                readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
+                readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
+                readonly '--wzl-curve-color': "#5841b8";
+                readonly '--wzl-accent-hover': "#5841b8";
+                readonly '--wzl-secondary': "#dc9d15";
+                readonly '--wzl-warning': "#d99a3f";
+                readonly '--wzl-success': "#2ec27e";
+                readonly '--wzl-focus-ring': "#5841b8";
+                readonly '--wzl-glass-tint': "#2e1f7a";
+                readonly '--wzl-surface-hover': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-surface-pressed': "rgba(230, 231, 233, 0.18)";
+                readonly '--wzl-radius-sm': "3px";
+                readonly '--wzl-radius-md': "5px";
+                readonly '--wzl-radius-pill': "999px";
+                readonly '--wzl-border-w': "1px";
+                readonly '--wzl-line-width': "2px";
+                readonly '--wzl-curve-width': "3px";
+                readonly '--wzl-tb-height': "24px";
+                readonly '--wzl-control-h-xs': "16px";
+                readonly '--wzl-control-h-sm': "18px";
+                readonly '--wzl-control-h': "20px";
+                readonly '--wzl-icon-button-size': "20px";
+                readonly '--wzl-slider-track-h': "4px";
+                readonly '--wzl-slider-thumb-size': "8px";
+                readonly '--wzl-slider-track-mix': "18%";
+                readonly '--wzl-slider-thumb-mix': "70%";
+                readonly '--wzl-handle-size': "9px";
+                readonly '--wzl-handle-size-sm': "7px";
+                readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-checker-a': "#25272c";
+                readonly '--wzl-checker-b': "#181a1e";
+                readonly '--wzl-checker-size': "8px";
+                readonly '--wzl-workspace-surface': "#0e0f12";
+                readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-font-size': "11px";
+                readonly '--wzl-tracking-none': "0";
+                readonly '--wzl-tracking-wide': "0.06em";
+                readonly '--wzl-tracking-wider': "0.08em";
+                readonly '--wzl-z-toolbar': "10";
+                readonly '--wzl-z-overlay': "20";
+                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-leading-tight': "1";
+                readonly '--wzl-leading-snug': "1.2";
+                readonly '--wzl-leading': "1.4";
+                readonly '--wzl-backdrop': "none";
+                readonly '--wzl-motion-fast': "120ms";
+                readonly '--wzl-motion-medium': "240ms";
+                readonly '--wzl-ease-in-cubic': "cubic-bezier(0.32, 0, 0.67, 0)";
+                readonly '--wzl-ease-out-cubic': "cubic-bezier(0.33, 1, 0.68, 1)";
+                readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
+                readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+                readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
+                readonly '--wzl-font-weight-normal': "300";
+                readonly '--wzl-font-weight-medium': "350";
+                readonly '--wzl-font-weight-bold': "400";
+                readonly '--wzl-space-xs': "4px";
+                readonly '--wzl-space-sm': "8px";
+                readonly '--wzl-space-md': "12px";
+                readonly '--wzl-space-lg': "16px";
+            };
+            readonly 'mode=dark,density=comfortable': {
+                readonly '--wzl-gray-50': "#f5f5f6";
+                readonly '--wzl-gray-100': "#e6e7e9";
+                readonly '--wzl-gray-200': "#c9cbcf";
+                readonly '--wzl-gray-300': "#9ea1a8";
+                readonly '--wzl-gray-400': "#6f737b";
+                readonly '--wzl-gray-500': "#4d5058";
+                readonly '--wzl-gray-600': "#383b42";
+                readonly '--wzl-gray-700': "#25272c";
+                readonly '--wzl-gray-800': "#181a1e";
+                readonly '--wzl-gray-900': "#0e0f12";
+                readonly '--wzl-accent-soft': "#1d1454";
+                readonly '--wzl-accent-base': "#2e1f7a";
+                readonly '--wzl-accent-strong': "#5841b8";
+                readonly '--wzl-secondary-soft': "#704e09";
+                readonly '--wzl-secondary-base': "#dc9d15";
+                readonly '--wzl-secondary-strong': "#f1cb8d";
+                readonly '--wzl-swatch-fuchsia': "#f641f7";
+                readonly '--wzl-swatch-green': "#48e628";
+                readonly '--wzl-swatch-sky': "#36bff2";
+                readonly '--wzl-swatch-amber': "#e69628";
+                readonly '--wzl-swatch-teal': "#3ee1cb";
+                readonly '--wzl-swatch-red': "#f75034";
+                readonly '--wzl-swatch-blue': "#407ef7";
+                readonly '--wzl-swatch-citron': "#d5d23a";
+                readonly '--wzl-swatch-rose': "#fa4590";
+                readonly '--wzl-swatch-violet': "#955cf9";
+                readonly '--wzl-font-size-2xs': "9px";
+                readonly '--wzl-font-size-xs': "10px";
+                readonly '--wzl-font-size-sm': "11px";
+                readonly '--wzl-font-size-md': "13px";
+                readonly '--wzl-font-size-lg': "16px";
+                readonly '--wzl-font-size-xl': "20px";
+                readonly '--wzl-space-1': "2px";
+                readonly '--wzl-space-2': "4px";
+                readonly '--wzl-space-3': "6px";
+                readonly '--wzl-space-4': "8px";
+                readonly '--wzl-space-5': "10px";
+                readonly '--wzl-space-6': "12px";
+                readonly '--wzl-space-7': "14px";
+                readonly '--wzl-space-8': "16px";
+                readonly '--wzl-surface': "#181a1e";
+                readonly '--wzl-surface-raised': "#25272c";
+                readonly '--wzl-surface-sunken': "#0e0f12";
+                readonly '--wzl-fg': "#e6e7e9";
+                readonly '--wzl-fg-muted': "#9ea1a8";
+                readonly '--wzl-fg-subtle': "#6f737b";
+                readonly '--wzl-border': "#25272c";
+                readonly '--wzl-border-strong': "#6f737b";
+                readonly '--wzl-accent-fg': "#5841b8";
+                readonly '--wzl-secondary-fg': "#dc9d15";
+                readonly '--wzl-fg-inverse': "#0e0f12";
+                readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
+                readonly '--wzl-panel-surface': "#25272c";
+                readonly '--wzl-panel-border-color': "#25272c";
+                readonly '--wzl-panel-border-style': "solid";
+                readonly '--wzl-panel-border-width': "1px";
+                readonly '--wzl-radius-lg': "14px";
+                readonly '--wzl-panel-radius': "14px";
+                readonly '--wzl-panel-pad': "14px 16px";
+                readonly '--wzl-glass-blur': "3px";
+                readonly '--wzl-panel-blur': "3px";
+                readonly '--wzl-panel-tone-mix': "14%";
+                readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-weight-light': "200";
+                readonly '--wzl-panel-title-weight': "200";
+                readonly '--wzl-panel-title-size': "16px";
+                readonly '--wzl-panel-title-case': "none";
+                readonly '--wzl-panel-title-tracking': "0.01em";
+                readonly '--wzl-panel-title-color': "#e6e7e9";
+                readonly '--wzl-panel-title-inset': "0";
+                readonly '--wzl-stance-scope-border-width': "0";
+                readonly '--wzl-stance-scope-radius': "8px";
+                readonly '--wzl-stance-scope-tone-mix': "22%";
+                readonly '--wzl-stance-scope-nested-radius': "6px";
+                readonly '--wzl-stance-scope-nested-surface': "#181a1e";
+                readonly '--wzl-stance-aside-surface': "transparent";
+                readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-stance-aside-border-color': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-stance-aside-blur': "0px";
+                readonly '--wzl-stance-aside-title-color': "#6f737b";
+                readonly '--wzl-stance-advanced-title-color': "#6f737b";
+                readonly '--wzl-stance-debug-border-style': "dashed";
+                readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-case': "none";
+                readonly '--wzl-danger-base': "#d94a3f";
+                readonly '--wzl-danger': "#d94a3f";
+                readonly '--wzl-stance-danger-tone': "#d94a3f";
+                readonly '--wzl-stance-danger-border-color': "#d94a3f";
+                readonly '--wzl-stance-danger-title-color': "#d94a3f";
+                readonly '--wzl-accent': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone-mix': "8%";
+                readonly '--wzl-stance-important-border-color': "#5841b8";
+                readonly '--wzl-stance-important-title-color': "#5841b8";
+                readonly '--wzl-stance-preview-pad': "0";
+                readonly '--wzl-stance-preview-title-size': "10px";
+                readonly '--wzl-stance-preview-title-case': "none";
+                readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
+                readonly '--wzl-warning-base': "#d99a3f";
+                readonly '--wzl-success-base': "#2ec27e";
+                readonly '--wzl-fg-on-accent': "#f5f5f6";
+                readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
+                readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
+                readonly '--wzl-curve-color': "#5841b8";
+                readonly '--wzl-accent-hover': "#5841b8";
+                readonly '--wzl-secondary': "#dc9d15";
+                readonly '--wzl-warning': "#d99a3f";
+                readonly '--wzl-success': "#2ec27e";
+                readonly '--wzl-focus-ring': "#5841b8";
+                readonly '--wzl-glass-tint': "#2e1f7a";
+                readonly '--wzl-surface-hover': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-surface-pressed': "rgba(230, 231, 233, 0.18)";
+                readonly '--wzl-radius-sm': "3px";
+                readonly '--wzl-radius-md': "5px";
+                readonly '--wzl-radius-pill': "999px";
+                readonly '--wzl-border-w': "1px";
+                readonly '--wzl-line-width': "2px";
+                readonly '--wzl-curve-width': "3px";
+                readonly '--wzl-tb-height': "28px";
+                readonly '--wzl-control-h-xs': "18px";
+                readonly '--wzl-control-h-sm': "20px";
+                readonly '--wzl-control-h': "24px";
+                readonly '--wzl-icon-button-size': "22px";
+                readonly '--wzl-slider-track-h': "4px";
+                readonly '--wzl-slider-thumb-size': "8px";
+                readonly '--wzl-slider-track-mix': "18%";
+                readonly '--wzl-slider-thumb-mix': "70%";
+                readonly '--wzl-handle-size': "9px";
+                readonly '--wzl-handle-size-sm': "7px";
+                readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-checker-a': "#25272c";
+                readonly '--wzl-checker-b': "#181a1e";
+                readonly '--wzl-checker-size': "8px";
+                readonly '--wzl-workspace-surface': "#0e0f12";
+                readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-font-size': "13px";
+                readonly '--wzl-tracking-none': "0";
+                readonly '--wzl-tracking-wide': "0.06em";
+                readonly '--wzl-tracking-wider': "0.08em";
+                readonly '--wzl-z-toolbar': "10";
+                readonly '--wzl-z-overlay': "20";
+                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-leading-tight': "1";
+                readonly '--wzl-leading-snug': "1.2";
+                readonly '--wzl-leading': "1.4";
+                readonly '--wzl-backdrop': "none";
+                readonly '--wzl-motion-fast': "120ms";
+                readonly '--wzl-motion-medium': "240ms";
+                readonly '--wzl-ease-in-cubic': "cubic-bezier(0.32, 0, 0.67, 0)";
+                readonly '--wzl-ease-out-cubic': "cubic-bezier(0.33, 1, 0.68, 1)";
+                readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
+                readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+                readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
+                readonly '--wzl-font-weight-normal': "300";
+                readonly '--wzl-font-weight-medium': "350";
+                readonly '--wzl-font-weight-bold': "400";
+                readonly '--wzl-space-xs': "4px";
+                readonly '--wzl-space-sm': "8px";
+                readonly '--wzl-space-md': "12px";
+                readonly '--wzl-space-lg': "16px";
+            };
+            readonly 'mode=dark,density=roomy': {
+                readonly '--wzl-gray-50': "#f5f5f6";
+                readonly '--wzl-gray-100': "#e6e7e9";
+                readonly '--wzl-gray-200': "#c9cbcf";
+                readonly '--wzl-gray-300': "#9ea1a8";
+                readonly '--wzl-gray-400': "#6f737b";
+                readonly '--wzl-gray-500': "#4d5058";
+                readonly '--wzl-gray-600': "#383b42";
+                readonly '--wzl-gray-700': "#25272c";
+                readonly '--wzl-gray-800': "#181a1e";
+                readonly '--wzl-gray-900': "#0e0f12";
+                readonly '--wzl-accent-soft': "#1d1454";
+                readonly '--wzl-accent-base': "#2e1f7a";
+                readonly '--wzl-accent-strong': "#5841b8";
+                readonly '--wzl-secondary-soft': "#704e09";
+                readonly '--wzl-secondary-base': "#dc9d15";
+                readonly '--wzl-secondary-strong': "#f1cb8d";
+                readonly '--wzl-swatch-fuchsia': "#f641f7";
+                readonly '--wzl-swatch-green': "#48e628";
+                readonly '--wzl-swatch-sky': "#36bff2";
+                readonly '--wzl-swatch-amber': "#e69628";
+                readonly '--wzl-swatch-teal': "#3ee1cb";
+                readonly '--wzl-swatch-red': "#f75034";
+                readonly '--wzl-swatch-blue': "#407ef7";
+                readonly '--wzl-swatch-citron': "#d5d23a";
+                readonly '--wzl-swatch-rose': "#fa4590";
+                readonly '--wzl-swatch-violet': "#955cf9";
+                readonly '--wzl-font-size-2xs': "10px";
+                readonly '--wzl-font-size-xs': "12px";
+                readonly '--wzl-font-size-sm': "13px";
+                readonly '--wzl-font-size-md': "15px";
+                readonly '--wzl-font-size-lg': "18px";
+                readonly '--wzl-font-size-xl': "23px";
+                readonly '--wzl-space-1': "2px";
+                readonly '--wzl-space-2': "4px";
+                readonly '--wzl-space-3': "6px";
+                readonly '--wzl-space-4': "8px";
+                readonly '--wzl-space-5': "10px";
+                readonly '--wzl-space-6': "12px";
+                readonly '--wzl-space-7': "14px";
+                readonly '--wzl-space-8': "16px";
+                readonly '--wzl-surface': "#181a1e";
+                readonly '--wzl-surface-raised': "#25272c";
+                readonly '--wzl-surface-sunken': "#0e0f12";
+                readonly '--wzl-fg': "#e6e7e9";
+                readonly '--wzl-fg-muted': "#9ea1a8";
+                readonly '--wzl-fg-subtle': "#6f737b";
+                readonly '--wzl-border': "#25272c";
+                readonly '--wzl-border-strong': "#6f737b";
+                readonly '--wzl-accent-fg': "#5841b8";
+                readonly '--wzl-secondary-fg': "#dc9d15";
+                readonly '--wzl-fg-inverse': "#0e0f12";
+                readonly '--wzl-shadow': "rgba(0, 0, 0, 0.6)";
+                readonly '--wzl-panel-surface': "#25272c";
+                readonly '--wzl-panel-border-color': "#25272c";
+                readonly '--wzl-panel-border-style': "solid";
+                readonly '--wzl-panel-border-width': "1px";
+                readonly '--wzl-radius-lg': "14px";
+                readonly '--wzl-panel-radius': "14px";
+                readonly '--wzl-panel-pad': "14px 16px";
+                readonly '--wzl-glass-blur': "3px";
+                readonly '--wzl-panel-blur': "3px";
+                readonly '--wzl-panel-tone-mix': "14%";
+                readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-weight-light': "200";
+                readonly '--wzl-panel-title-weight': "200";
+                readonly '--wzl-panel-title-size': "18px";
+                readonly '--wzl-panel-title-case': "none";
+                readonly '--wzl-panel-title-tracking': "0.01em";
+                readonly '--wzl-panel-title-color': "#e6e7e9";
+                readonly '--wzl-panel-title-inset': "0";
+                readonly '--wzl-stance-scope-border-width': "0";
+                readonly '--wzl-stance-scope-radius': "8px";
+                readonly '--wzl-stance-scope-tone-mix': "22%";
+                readonly '--wzl-stance-scope-nested-radius': "6px";
+                readonly '--wzl-stance-scope-nested-surface': "#181a1e";
+                readonly '--wzl-stance-aside-surface': "transparent";
+                readonly '--wzl-line-subtle': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-stance-aside-border-color': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-stance-aside-blur': "0px";
+                readonly '--wzl-stance-aside-title-color': "#6f737b";
+                readonly '--wzl-stance-advanced-title-color': "#6f737b";
+                readonly '--wzl-stance-debug-border-style': "dashed";
+                readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-case': "none";
+                readonly '--wzl-danger-base': "#d94a3f";
+                readonly '--wzl-danger': "#d94a3f";
+                readonly '--wzl-stance-danger-tone': "#d94a3f";
+                readonly '--wzl-stance-danger-border-color': "#d94a3f";
+                readonly '--wzl-stance-danger-title-color': "#d94a3f";
+                readonly '--wzl-accent': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone-mix': "8%";
+                readonly '--wzl-stance-important-border-color': "#5841b8";
+                readonly '--wzl-stance-important-title-color': "#5841b8";
+                readonly '--wzl-stance-preview-pad': "0";
+                readonly '--wzl-stance-preview-title-size': "12px";
+                readonly '--wzl-stance-preview-title-case': "none";
+                readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
+                readonly '--wzl-warning-base': "#d99a3f";
+                readonly '--wzl-success-base': "#2ec27e";
+                readonly '--wzl-fg-on-accent': "#f5f5f6";
+                readonly '--wzl-line': "rgba(230, 231, 233, 0.2)";
+                readonly '--wzl-line-strong': "rgba(230, 231, 233, 0.4)";
+                readonly '--wzl-curve-color': "#5841b8";
+                readonly '--wzl-accent-hover': "#5841b8";
+                readonly '--wzl-secondary': "#dc9d15";
+                readonly '--wzl-warning': "#d99a3f";
+                readonly '--wzl-success': "#2ec27e";
+                readonly '--wzl-focus-ring': "#5841b8";
+                readonly '--wzl-glass-tint': "#2e1f7a";
+                readonly '--wzl-surface-hover': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-surface-pressed': "rgba(230, 231, 233, 0.18)";
+                readonly '--wzl-radius-sm': "3px";
+                readonly '--wzl-radius-md': "5px";
+                readonly '--wzl-radius-pill': "999px";
+                readonly '--wzl-border-w': "1px";
+                readonly '--wzl-line-width': "2px";
+                readonly '--wzl-curve-width': "3px";
+                readonly '--wzl-tb-height': "32px";
+                readonly '--wzl-control-h-xs': "22px";
+                readonly '--wzl-control-h-sm': "24px";
+                readonly '--wzl-control-h': "28px";
+                readonly '--wzl-icon-button-size': "26px";
+                readonly '--wzl-slider-track-h': "4px";
+                readonly '--wzl-slider-thumb-size': "8px";
+                readonly '--wzl-slider-track-mix': "18%";
+                readonly '--wzl-slider-thumb-mix': "70%";
+                readonly '--wzl-handle-size': "9px";
+                readonly '--wzl-handle-size-sm': "7px";
+                readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-checker-a': "#25272c";
+                readonly '--wzl-checker-b': "#181a1e";
+                readonly '--wzl-checker-size': "8px";
+                readonly '--wzl-workspace-surface': "#0e0f12";
+                readonly '--wzl-workspace-line': "rgba(230, 231, 233, 0.1)";
+                readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-font-size': "15px";
+                readonly '--wzl-tracking-none': "0";
+                readonly '--wzl-tracking-wide': "0.06em";
+                readonly '--wzl-tracking-wider': "0.08em";
+                readonly '--wzl-z-toolbar': "10";
+                readonly '--wzl-z-overlay': "20";
+                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-leading-tight': "1";
+                readonly '--wzl-leading-snug': "1.2";
+                readonly '--wzl-leading': "1.4";
+                readonly '--wzl-backdrop': "none";
+                readonly '--wzl-motion-fast': "120ms";
+                readonly '--wzl-motion-medium': "240ms";
+                readonly '--wzl-ease-in-cubic': "cubic-bezier(0.32, 0, 0.67, 0)";
+                readonly '--wzl-ease-out-cubic': "cubic-bezier(0.33, 1, 0.68, 1)";
+                readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
+                readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+                readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
+                readonly '--wzl-font-weight-normal': "300";
+                readonly '--wzl-font-weight-medium': "350";
+                readonly '--wzl-font-weight-bold': "400";
+                readonly '--wzl-space-xs': "4px";
+                readonly '--wzl-space-sm': "8px";
+                readonly '--wzl-space-md': "12px";
+                readonly '--wzl-space-lg': "16px";
+            };
+            readonly 'mode=light,density=compact': {
+                readonly '--wzl-gray-50': "#f5f5f6";
+                readonly '--wzl-gray-100': "#e6e7e9";
+                readonly '--wzl-gray-200': "#c9cbcf";
+                readonly '--wzl-gray-300': "#9ea1a8";
+                readonly '--wzl-gray-400': "#6f737b";
+                readonly '--wzl-gray-500': "#4d5058";
+                readonly '--wzl-gray-600': "#383b42";
+                readonly '--wzl-gray-700': "#25272c";
+                readonly '--wzl-gray-800': "#181a1e";
+                readonly '--wzl-gray-900': "#0e0f12";
+                readonly '--wzl-accent-soft': "#1d1454";
+                readonly '--wzl-accent-base': "#2e1f7a";
+                readonly '--wzl-accent-strong': "#5841b8";
+                readonly '--wzl-secondary-soft': "#016458";
+                readonly '--wzl-secondary-base': "#3ee1cb";
+                readonly '--wzl-secondary-strong': "#94e3d5";
+                readonly '--wzl-swatch-fuchsia': "#f641f7";
+                readonly '--wzl-swatch-green': "#48e628";
+                readonly '--wzl-swatch-sky': "#36bff2";
+                readonly '--wzl-swatch-amber': "#e69628";
+                readonly '--wzl-swatch-teal': "#3ee1cb";
+                readonly '--wzl-swatch-red': "#f75034";
+                readonly '--wzl-swatch-blue': "#407ef7";
+                readonly '--wzl-swatch-citron': "#d5d23a";
+                readonly '--wzl-swatch-rose': "#fa4590";
+                readonly '--wzl-swatch-violet': "#955cf9";
+                readonly '--wzl-font-size-2xs': "7px";
+                readonly '--wzl-font-size-xs': "8px";
+                readonly '--wzl-font-size-sm': "9px";
+                readonly '--wzl-font-size-md': "11px";
+                readonly '--wzl-font-size-lg': "14px";
+                readonly '--wzl-font-size-xl': "17px";
+                readonly '--wzl-space-1': "2px";
+                readonly '--wzl-space-2': "4px";
+                readonly '--wzl-space-3': "6px";
+                readonly '--wzl-space-4': "8px";
+                readonly '--wzl-space-5': "10px";
+                readonly '--wzl-space-6': "12px";
+                readonly '--wzl-space-7': "14px";
+                readonly '--wzl-space-8': "16px";
+                readonly '--wzl-surface': "#f5f5f6";
+                readonly '--wzl-surface-raised': "#e6e7e9";
+                readonly '--wzl-surface-sunken': "#c9cbcf";
+                readonly '--wzl-fg': "#0e0f12";
+                readonly '--wzl-fg-muted': "#383b42";
+                readonly '--wzl-fg-subtle': "#4d5058";
+                readonly '--wzl-border': "#c9cbcf";
+                readonly '--wzl-border-strong': "#4d5058";
+                readonly '--wzl-accent-fg': "#2e1f7a";
+                readonly '--wzl-secondary-fg': "#016458";
+                readonly '--wzl-fg-inverse': "#f5f5f6";
+                readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
+                readonly '--wzl-panel-surface': "#e6e7e9";
+                readonly '--wzl-panel-border-color': "#c9cbcf";
+                readonly '--wzl-panel-border-style': "solid";
+                readonly '--wzl-panel-border-width': "1px";
+                readonly '--wzl-radius-lg': "14px";
+                readonly '--wzl-panel-radius': "14px";
+                readonly '--wzl-panel-pad': "14px 16px";
+                readonly '--wzl-glass-blur': "3px";
+                readonly '--wzl-panel-blur': "3px";
+                readonly '--wzl-panel-tone-mix': "14%";
+                readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-weight-light': "200";
+                readonly '--wzl-panel-title-weight': "200";
+                readonly '--wzl-panel-title-size': "14px";
+                readonly '--wzl-panel-title-case': "none";
+                readonly '--wzl-panel-title-tracking': "0.01em";
+                readonly '--wzl-panel-title-color': "#0e0f12";
+                readonly '--wzl-panel-title-inset': "0";
+                readonly '--wzl-stance-scope-border-width': "0";
+                readonly '--wzl-stance-scope-radius': "8px";
+                readonly '--wzl-stance-scope-tone-mix': "22%";
+                readonly '--wzl-stance-scope-nested-radius': "6px";
+                readonly '--wzl-stance-scope-nested-surface': "#f5f5f6";
+                readonly '--wzl-stance-aside-surface': "transparent";
+                readonly '--wzl-line-subtle': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-stance-aside-border-color': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-stance-aside-blur': "0px";
+                readonly '--wzl-stance-aside-title-color': "#4d5058";
+                readonly '--wzl-stance-advanced-title-color': "#4d5058";
+                readonly '--wzl-stance-debug-border-style': "dashed";
+                readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-case': "none";
+                readonly '--wzl-danger-base': "#d94a3f";
+                readonly '--wzl-danger': "#d94a3f";
+                readonly '--wzl-stance-danger-tone': "#d94a3f";
+                readonly '--wzl-stance-danger-border-color': "#d94a3f";
+                readonly '--wzl-stance-danger-title-color': "#d94a3f";
+                readonly '--wzl-accent': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone-mix': "8%";
+                readonly '--wzl-stance-important-border-color': "#2e1f7a";
+                readonly '--wzl-stance-important-title-color': "#2e1f7a";
+                readonly '--wzl-stance-preview-pad': "0";
+                readonly '--wzl-stance-preview-title-size': "8px";
+                readonly '--wzl-stance-preview-title-case': "none";
+                readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
+                readonly '--wzl-warning-base': "#d99a3f";
+                readonly '--wzl-success-base': "#2ec27e";
+                readonly '--wzl-fg-on-accent': "#f5f5f6";
+                readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
+                readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
+                readonly '--wzl-curve-color': "#5841b8";
+                readonly '--wzl-accent-hover': "#5841b8";
+                readonly '--wzl-secondary': "#3ee1cb";
+                readonly '--wzl-warning': "#d99a3f";
+                readonly '--wzl-success': "#2ec27e";
+                readonly '--wzl-focus-ring': "#5841b8";
+                readonly '--wzl-glass-tint': "#2e1f7a";
+                readonly '--wzl-surface-hover': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-surface-pressed': "rgba(14, 15, 18, 0.18)";
+                readonly '--wzl-radius-sm': "3px";
+                readonly '--wzl-radius-md': "5px";
+                readonly '--wzl-radius-pill': "999px";
+                readonly '--wzl-border-w': "1px";
+                readonly '--wzl-line-width': "2px";
+                readonly '--wzl-curve-width': "3px";
+                readonly '--wzl-tb-height': "24px";
+                readonly '--wzl-control-h-xs': "16px";
+                readonly '--wzl-control-h-sm': "18px";
+                readonly '--wzl-control-h': "20px";
+                readonly '--wzl-icon-button-size': "20px";
+                readonly '--wzl-slider-track-h': "4px";
+                readonly '--wzl-slider-thumb-size': "8px";
+                readonly '--wzl-slider-track-mix': "18%";
+                readonly '--wzl-slider-thumb-mix': "70%";
+                readonly '--wzl-handle-size': "9px";
+                readonly '--wzl-handle-size-sm': "7px";
+                readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-checker-a': "#c9cbcf";
+                readonly '--wzl-checker-b': "#f5f5f6";
+                readonly '--wzl-checker-size': "8px";
+                readonly '--wzl-workspace-surface': "#c9cbcf";
+                readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-font-size': "11px";
+                readonly '--wzl-tracking-none': "0";
+                readonly '--wzl-tracking-wide': "0.06em";
+                readonly '--wzl-tracking-wider': "0.08em";
+                readonly '--wzl-z-toolbar': "10";
+                readonly '--wzl-z-overlay': "20";
+                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-leading-tight': "1";
+                readonly '--wzl-leading-snug': "1.2";
+                readonly '--wzl-leading': "1.4";
+                readonly '--wzl-backdrop': "none";
+                readonly '--wzl-motion-fast': "120ms";
+                readonly '--wzl-motion-medium': "240ms";
+                readonly '--wzl-ease-in-cubic': "cubic-bezier(0.32, 0, 0.67, 0)";
+                readonly '--wzl-ease-out-cubic': "cubic-bezier(0.33, 1, 0.68, 1)";
+                readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
+                readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+                readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
+                readonly '--wzl-font-weight-normal': "300";
+                readonly '--wzl-font-weight-medium': "350";
+                readonly '--wzl-font-weight-bold': "400";
+                readonly '--wzl-space-xs': "4px";
+                readonly '--wzl-space-sm': "8px";
+                readonly '--wzl-space-md': "12px";
+                readonly '--wzl-space-lg': "16px";
+            };
+            readonly 'mode=light,density=comfortable': {
+                readonly '--wzl-gray-50': "#f5f5f6";
+                readonly '--wzl-gray-100': "#e6e7e9";
+                readonly '--wzl-gray-200': "#c9cbcf";
+                readonly '--wzl-gray-300': "#9ea1a8";
+                readonly '--wzl-gray-400': "#6f737b";
+                readonly '--wzl-gray-500': "#4d5058";
+                readonly '--wzl-gray-600': "#383b42";
+                readonly '--wzl-gray-700': "#25272c";
+                readonly '--wzl-gray-800': "#181a1e";
+                readonly '--wzl-gray-900': "#0e0f12";
+                readonly '--wzl-accent-soft': "#1d1454";
+                readonly '--wzl-accent-base': "#2e1f7a";
+                readonly '--wzl-accent-strong': "#5841b8";
+                readonly '--wzl-secondary-soft': "#016458";
+                readonly '--wzl-secondary-base': "#3ee1cb";
+                readonly '--wzl-secondary-strong': "#94e3d5";
+                readonly '--wzl-swatch-fuchsia': "#f641f7";
+                readonly '--wzl-swatch-green': "#48e628";
+                readonly '--wzl-swatch-sky': "#36bff2";
+                readonly '--wzl-swatch-amber': "#e69628";
+                readonly '--wzl-swatch-teal': "#3ee1cb";
+                readonly '--wzl-swatch-red': "#f75034";
+                readonly '--wzl-swatch-blue': "#407ef7";
+                readonly '--wzl-swatch-citron': "#d5d23a";
+                readonly '--wzl-swatch-rose': "#fa4590";
+                readonly '--wzl-swatch-violet': "#955cf9";
+                readonly '--wzl-font-size-2xs': "9px";
+                readonly '--wzl-font-size-xs': "10px";
+                readonly '--wzl-font-size-sm': "11px";
+                readonly '--wzl-font-size-md': "13px";
+                readonly '--wzl-font-size-lg': "16px";
+                readonly '--wzl-font-size-xl': "20px";
+                readonly '--wzl-space-1': "2px";
+                readonly '--wzl-space-2': "4px";
+                readonly '--wzl-space-3': "6px";
+                readonly '--wzl-space-4': "8px";
+                readonly '--wzl-space-5': "10px";
+                readonly '--wzl-space-6': "12px";
+                readonly '--wzl-space-7': "14px";
+                readonly '--wzl-space-8': "16px";
+                readonly '--wzl-surface': "#f5f5f6";
+                readonly '--wzl-surface-raised': "#e6e7e9";
+                readonly '--wzl-surface-sunken': "#c9cbcf";
+                readonly '--wzl-fg': "#0e0f12";
+                readonly '--wzl-fg-muted': "#383b42";
+                readonly '--wzl-fg-subtle': "#4d5058";
+                readonly '--wzl-border': "#c9cbcf";
+                readonly '--wzl-border-strong': "#4d5058";
+                readonly '--wzl-accent-fg': "#2e1f7a";
+                readonly '--wzl-secondary-fg': "#016458";
+                readonly '--wzl-fg-inverse': "#f5f5f6";
+                readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
+                readonly '--wzl-panel-surface': "#e6e7e9";
+                readonly '--wzl-panel-border-color': "#c9cbcf";
+                readonly '--wzl-panel-border-style': "solid";
+                readonly '--wzl-panel-border-width': "1px";
+                readonly '--wzl-radius-lg': "14px";
+                readonly '--wzl-panel-radius': "14px";
+                readonly '--wzl-panel-pad': "14px 16px";
+                readonly '--wzl-glass-blur': "3px";
+                readonly '--wzl-panel-blur': "3px";
+                readonly '--wzl-panel-tone-mix': "14%";
+                readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-weight-light': "200";
+                readonly '--wzl-panel-title-weight': "200";
+                readonly '--wzl-panel-title-size': "16px";
+                readonly '--wzl-panel-title-case': "none";
+                readonly '--wzl-panel-title-tracking': "0.01em";
+                readonly '--wzl-panel-title-color': "#0e0f12";
+                readonly '--wzl-panel-title-inset': "0";
+                readonly '--wzl-stance-scope-border-width': "0";
+                readonly '--wzl-stance-scope-radius': "8px";
+                readonly '--wzl-stance-scope-tone-mix': "22%";
+                readonly '--wzl-stance-scope-nested-radius': "6px";
+                readonly '--wzl-stance-scope-nested-surface': "#f5f5f6";
+                readonly '--wzl-stance-aside-surface': "transparent";
+                readonly '--wzl-line-subtle': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-stance-aside-border-color': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-stance-aside-blur': "0px";
+                readonly '--wzl-stance-aside-title-color': "#4d5058";
+                readonly '--wzl-stance-advanced-title-color': "#4d5058";
+                readonly '--wzl-stance-debug-border-style': "dashed";
+                readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-case': "none";
+                readonly '--wzl-danger-base': "#d94a3f";
+                readonly '--wzl-danger': "#d94a3f";
+                readonly '--wzl-stance-danger-tone': "#d94a3f";
+                readonly '--wzl-stance-danger-border-color': "#d94a3f";
+                readonly '--wzl-stance-danger-title-color': "#d94a3f";
+                readonly '--wzl-accent': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone-mix': "8%";
+                readonly '--wzl-stance-important-border-color': "#2e1f7a";
+                readonly '--wzl-stance-important-title-color': "#2e1f7a";
+                readonly '--wzl-stance-preview-pad': "0";
+                readonly '--wzl-stance-preview-title-size': "10px";
+                readonly '--wzl-stance-preview-title-case': "none";
+                readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
+                readonly '--wzl-warning-base': "#d99a3f";
+                readonly '--wzl-success-base': "#2ec27e";
+                readonly '--wzl-fg-on-accent': "#f5f5f6";
+                readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
+                readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
+                readonly '--wzl-curve-color': "#5841b8";
+                readonly '--wzl-accent-hover': "#5841b8";
+                readonly '--wzl-secondary': "#3ee1cb";
+                readonly '--wzl-warning': "#d99a3f";
+                readonly '--wzl-success': "#2ec27e";
+                readonly '--wzl-focus-ring': "#5841b8";
+                readonly '--wzl-glass-tint': "#2e1f7a";
+                readonly '--wzl-surface-hover': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-surface-pressed': "rgba(14, 15, 18, 0.18)";
+                readonly '--wzl-radius-sm': "3px";
+                readonly '--wzl-radius-md': "5px";
+                readonly '--wzl-radius-pill': "999px";
+                readonly '--wzl-border-w': "1px";
+                readonly '--wzl-line-width': "2px";
+                readonly '--wzl-curve-width': "3px";
+                readonly '--wzl-tb-height': "28px";
+                readonly '--wzl-control-h-xs': "18px";
+                readonly '--wzl-control-h-sm': "20px";
+                readonly '--wzl-control-h': "24px";
+                readonly '--wzl-icon-button-size': "22px";
+                readonly '--wzl-slider-track-h': "4px";
+                readonly '--wzl-slider-thumb-size': "8px";
+                readonly '--wzl-slider-track-mix': "18%";
+                readonly '--wzl-slider-thumb-mix': "70%";
+                readonly '--wzl-handle-size': "9px";
+                readonly '--wzl-handle-size-sm': "7px";
+                readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-checker-a': "#c9cbcf";
+                readonly '--wzl-checker-b': "#f5f5f6";
+                readonly '--wzl-checker-size': "8px";
+                readonly '--wzl-workspace-surface': "#c9cbcf";
+                readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-font-size': "13px";
+                readonly '--wzl-tracking-none': "0";
+                readonly '--wzl-tracking-wide': "0.06em";
+                readonly '--wzl-tracking-wider': "0.08em";
+                readonly '--wzl-z-toolbar': "10";
+                readonly '--wzl-z-overlay': "20";
+                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-leading-tight': "1";
+                readonly '--wzl-leading-snug': "1.2";
+                readonly '--wzl-leading': "1.4";
+                readonly '--wzl-backdrop': "none";
+                readonly '--wzl-motion-fast': "120ms";
+                readonly '--wzl-motion-medium': "240ms";
+                readonly '--wzl-ease-in-cubic': "cubic-bezier(0.32, 0, 0.67, 0)";
+                readonly '--wzl-ease-out-cubic': "cubic-bezier(0.33, 1, 0.68, 1)";
+                readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
+                readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+                readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
+                readonly '--wzl-font-weight-normal': "300";
+                readonly '--wzl-font-weight-medium': "350";
+                readonly '--wzl-font-weight-bold': "400";
+                readonly '--wzl-space-xs': "4px";
+                readonly '--wzl-space-sm': "8px";
+                readonly '--wzl-space-md': "12px";
+                readonly '--wzl-space-lg': "16px";
+            };
+            readonly 'mode=light,density=roomy': {
+                readonly '--wzl-gray-50': "#f5f5f6";
+                readonly '--wzl-gray-100': "#e6e7e9";
+                readonly '--wzl-gray-200': "#c9cbcf";
+                readonly '--wzl-gray-300': "#9ea1a8";
+                readonly '--wzl-gray-400': "#6f737b";
+                readonly '--wzl-gray-500': "#4d5058";
+                readonly '--wzl-gray-600': "#383b42";
+                readonly '--wzl-gray-700': "#25272c";
+                readonly '--wzl-gray-800': "#181a1e";
+                readonly '--wzl-gray-900': "#0e0f12";
+                readonly '--wzl-accent-soft': "#1d1454";
+                readonly '--wzl-accent-base': "#2e1f7a";
+                readonly '--wzl-accent-strong': "#5841b8";
+                readonly '--wzl-secondary-soft': "#016458";
+                readonly '--wzl-secondary-base': "#3ee1cb";
+                readonly '--wzl-secondary-strong': "#94e3d5";
+                readonly '--wzl-swatch-fuchsia': "#f641f7";
+                readonly '--wzl-swatch-green': "#48e628";
+                readonly '--wzl-swatch-sky': "#36bff2";
+                readonly '--wzl-swatch-amber': "#e69628";
+                readonly '--wzl-swatch-teal': "#3ee1cb";
+                readonly '--wzl-swatch-red': "#f75034";
+                readonly '--wzl-swatch-blue': "#407ef7";
+                readonly '--wzl-swatch-citron': "#d5d23a";
+                readonly '--wzl-swatch-rose': "#fa4590";
+                readonly '--wzl-swatch-violet': "#955cf9";
+                readonly '--wzl-font-size-2xs': "10px";
+                readonly '--wzl-font-size-xs': "12px";
+                readonly '--wzl-font-size-sm': "13px";
+                readonly '--wzl-font-size-md': "15px";
+                readonly '--wzl-font-size-lg': "18px";
+                readonly '--wzl-font-size-xl': "23px";
+                readonly '--wzl-space-1': "2px";
+                readonly '--wzl-space-2': "4px";
+                readonly '--wzl-space-3': "6px";
+                readonly '--wzl-space-4': "8px";
+                readonly '--wzl-space-5': "10px";
+                readonly '--wzl-space-6': "12px";
+                readonly '--wzl-space-7': "14px";
+                readonly '--wzl-space-8': "16px";
+                readonly '--wzl-surface': "#f5f5f6";
+                readonly '--wzl-surface-raised': "#e6e7e9";
+                readonly '--wzl-surface-sunken': "#c9cbcf";
+                readonly '--wzl-fg': "#0e0f12";
+                readonly '--wzl-fg-muted': "#383b42";
+                readonly '--wzl-fg-subtle': "#4d5058";
+                readonly '--wzl-border': "#c9cbcf";
+                readonly '--wzl-border-strong': "#4d5058";
+                readonly '--wzl-accent-fg': "#2e1f7a";
+                readonly '--wzl-secondary-fg': "#016458";
+                readonly '--wzl-fg-inverse': "#f5f5f6";
+                readonly '--wzl-shadow': "rgba(0, 0, 0, 0.18)";
+                readonly '--wzl-panel-surface': "#e6e7e9";
+                readonly '--wzl-panel-border-color': "#c9cbcf";
+                readonly '--wzl-panel-border-style': "solid";
+                readonly '--wzl-panel-border-width': "1px";
+                readonly '--wzl-radius-lg': "14px";
+                readonly '--wzl-panel-radius': "14px";
+                readonly '--wzl-panel-pad': "14px 16px";
+                readonly '--wzl-glass-blur': "3px";
+                readonly '--wzl-panel-blur': "3px";
+                readonly '--wzl-panel-tone-mix': "14%";
+                readonly '--wzl-font-display': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-panel-title-font': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-weight-light': "200";
+                readonly '--wzl-panel-title-weight': "200";
+                readonly '--wzl-panel-title-size': "18px";
+                readonly '--wzl-panel-title-case': "none";
+                readonly '--wzl-panel-title-tracking': "0.01em";
+                readonly '--wzl-panel-title-color': "#0e0f12";
+                readonly '--wzl-panel-title-inset': "0";
+                readonly '--wzl-stance-scope-border-width': "0";
+                readonly '--wzl-stance-scope-radius': "8px";
+                readonly '--wzl-stance-scope-tone-mix': "22%";
+                readonly '--wzl-stance-scope-nested-radius': "6px";
+                readonly '--wzl-stance-scope-nested-surface': "#f5f5f6";
+                readonly '--wzl-stance-aside-surface': "transparent";
+                readonly '--wzl-line-subtle': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-stance-aside-border-color': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-stance-aside-blur': "0px";
+                readonly '--wzl-stance-aside-title-color': "#4d5058";
+                readonly '--wzl-stance-advanced-title-color': "#4d5058";
+                readonly '--wzl-stance-debug-border-style': "dashed";
+                readonly '--wzl-font-mono': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-font': "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+                readonly '--wzl-stance-debug-title-case': "none";
+                readonly '--wzl-danger-base': "#d94a3f";
+                readonly '--wzl-danger': "#d94a3f";
+                readonly '--wzl-stance-danger-tone': "#d94a3f";
+                readonly '--wzl-stance-danger-border-color': "#d94a3f";
+                readonly '--wzl-stance-danger-title-color': "#d94a3f";
+                readonly '--wzl-accent': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone': "#2e1f7a";
+                readonly '--wzl-stance-notice-tone-mix': "8%";
+                readonly '--wzl-stance-important-border-color': "#2e1f7a";
+                readonly '--wzl-stance-important-title-color': "#2e1f7a";
+                readonly '--wzl-stance-preview-pad': "0";
+                readonly '--wzl-stance-preview-title-size': "12px";
+                readonly '--wzl-stance-preview-title-case': "none";
+                readonly '--wzl-stance-preview-title-inset': "6px 10px 0";
+                readonly '--wzl-warning-base': "#d99a3f";
+                readonly '--wzl-success-base': "#2ec27e";
+                readonly '--wzl-fg-on-accent': "#f5f5f6";
+                readonly '--wzl-line': "rgba(14, 15, 18, 0.2)";
+                readonly '--wzl-line-strong': "rgba(14, 15, 18, 0.4)";
+                readonly '--wzl-curve-color': "#5841b8";
+                readonly '--wzl-accent-hover': "#5841b8";
+                readonly '--wzl-secondary': "#3ee1cb";
+                readonly '--wzl-warning': "#d99a3f";
+                readonly '--wzl-success': "#2ec27e";
+                readonly '--wzl-focus-ring': "#5841b8";
+                readonly '--wzl-glass-tint': "#2e1f7a";
+                readonly '--wzl-surface-hover': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-surface-pressed': "rgba(14, 15, 18, 0.18)";
+                readonly '--wzl-radius-sm': "3px";
+                readonly '--wzl-radius-md': "5px";
+                readonly '--wzl-radius-pill': "999px";
+                readonly '--wzl-border-w': "1px";
+                readonly '--wzl-line-width': "2px";
+                readonly '--wzl-curve-width': "3px";
+                readonly '--wzl-tb-height': "32px";
+                readonly '--wzl-control-h-xs': "22px";
+                readonly '--wzl-control-h-sm': "24px";
+                readonly '--wzl-control-h': "28px";
+                readonly '--wzl-icon-button-size': "26px";
+                readonly '--wzl-slider-track-h': "4px";
+                readonly '--wzl-slider-thumb-size': "8px";
+                readonly '--wzl-slider-track-mix': "18%";
+                readonly '--wzl-slider-thumb-mix': "70%";
+                readonly '--wzl-handle-size': "9px";
+                readonly '--wzl-handle-size-sm': "7px";
+                readonly '--wzl-handle-size-lg': "10px";
+                readonly '--wzl-checker-a': "#c9cbcf";
+                readonly '--wzl-checker-b': "#f5f5f6";
+                readonly '--wzl-checker-size': "8px";
+                readonly '--wzl-workspace-surface': "#c9cbcf";
+                readonly '--wzl-workspace-line': "rgba(14, 15, 18, 0.1)";
+                readonly '--wzl-field-pad-x': "8px";
+                readonly '--wzl-font-size': "15px";
+                readonly '--wzl-tracking-none': "0";
+                readonly '--wzl-tracking-wide': "0.06em";
+                readonly '--wzl-tracking-wider': "0.08em";
+                readonly '--wzl-z-toolbar': "10";
+                readonly '--wzl-z-overlay': "20";
+                readonly '--wzl-z-modal': "30";
+                readonly '--wzl-leading-tight': "1";
+                readonly '--wzl-leading-snug': "1.2";
+                readonly '--wzl-leading': "1.4";
+                readonly '--wzl-backdrop': "none";
+                readonly '--wzl-motion-fast': "120ms";
+                readonly '--wzl-motion-medium': "240ms";
+                readonly '--wzl-ease-in-cubic': "cubic-bezier(0.32, 0, 0.67, 0)";
+                readonly '--wzl-ease-out-cubic': "cubic-bezier(0.33, 1, 0.68, 1)";
+                readonly '--wzl-ease-in-out-cubic': "cubic-bezier(0.65, 0, 0.35, 1)";
+                readonly '--wzl-ease-out-back': "cubic-bezier(0.34, 1.56, 0.64, 1)";
+                readonly '--wzl-font-ui': "Oswald, 'Helvetica Neue Condensed', 'Arial Narrow', system-ui, sans-serif";
+                readonly '--wzl-font-body': "Inter, system-ui, -apple-system, 'Segoe UI', sans-serif";
+                readonly '--wzl-font-weight-normal': "300";
+                readonly '--wzl-font-weight-medium': "350";
+                readonly '--wzl-font-weight-bold': "400";
+                readonly '--wzl-space-xs': "4px";
+                readonly '--wzl-space-sm': "8px";
+                readonly '--wzl-space-md': "12px";
+                readonly '--wzl-space-lg': "16px";
+            };
+        };
+    };
+};
+/** The built-in themes as authored: their unbaked definitions. */
+declare const THEME_SOURCES: Readonly<Record<string, ThemeDefinition>>;
+/** The built-in themes with every rule run and references intact. This is
+ *  what `weaselTheme` is built from, so the runtime entry bundles no generator. */
+declare const BAKED_THEMES: Readonly<Record<string, BakedTheme>>;
+
+export { mergeChain as $, type AxisDef as A, BAKED_THEMES as B, type ColorContext as C, themeAxes as D, themeTones as E, type FlatTokens as F, type GeneratedColors as G, weaselTheme as H, type CategoricalRampDef as I, type ContrastRule as J, type LightnessRampDef as K, type Lookup as L, type LiteralRule as M, type NumberParam as N, type OffsetRule as O, type PinObject as P, type RampDef as Q, type ResolvedTheme as R, type Selection as S, type TokenName as T, type RefRule as U, type Varying as V, type ScaleDef as W, type SemanticRule as X, type StepRule as Y, bake as Z, bakeChain as _, type Theme as a, type TokenValue as b, type AxisDefs as c, type AxisValue as d, type BakedTheme as e, type ByAxis as f, type ColorList as g, type GeneratedTheme as h, type PinValue as i, type RampColors as j, type RawToken as k, type SerializableColorList as l, THEMES as m, THEME_SOURCES as n, type ThemeDefinition as o, type ThemeInput as p, colorAt as q, colorCount as r, colorCssAt as s, defineTheme as t, enumerateSelections as u, fullSelection as v, isByAxis as w, rampSteps as x, resolveTheme as y, selectionKey as z };