@mkbabb/glass-ui 3.12.0 → 3.13.0

package/dist/styles/theme/bridges.css

@@ -0,0 +1,337 @@
+/* theme/bridges.css — the `@theme inline` block: the tokens.css `var(--token)`
+   BRIDGES (color/shadow/blur/duration/ease/typography) (AZ.W-CARVE partial 2 of 4).
+
+   Inline substitutes the referenced value and mints no second var, so the
+   tokens.css token stays the single override point (plain would emit
+   `--color-primary` AND `--primary`). Guardrail: NEVER `@property`-register a
+   color token — registration snapshots the value and breaks light-dark().
+
+   Cascade: this partial MUST @import AFTER theme/radius.css (it references the
+   radius primitives) and BEFORE theme/literals.css. */
+
+@theme inline {
+    /* ═══════════════════════════════════════════════
+       Typography — size scale → text-* utilities
+       ═══════════════════════════════════════════════ */
+    --text-admin-label: var(--type-admin-label);
+    --text-micro:       var(--type-micro);
+    --text-caption:     var(--type-caption);
+    --text-small:       var(--type-small);
+    --text-body:        var(--type-body);
+    --text-prose:       var(--type-prose);
+    --text-subheading:  var(--type-subheading);
+    --text-heading:     var(--type-heading);
+    --text-title:       var(--type-title);
+    /* AX.W50 D17 — the picker-family type-scale → `text-dropdown` /
+       `text-dropdown-secondary` utilities, bridging the `--dropdown-text` token pair
+       (tokens.css §10, a specialization of W51's `--control-text` comfort register)
+       so a Tailwind `text-dropdown` utility resolves the family scale. Mirrors the
+       `--text-small: var(--type-small)` ladder-bridge idiom above. */
+    --text-dropdown:           var(--dropdown-text);
+    --text-dropdown-secondary: var(--dropdown-text-secondary);
+    --text-display:     var(--type-display-1);
+    --text-display-1:   var(--type-display-1);
+    --text-display-2:   var(--type-display-2);
+    --text-display-3:   var(--type-display-3);
+    --text-display-4:   var(--type-display-4);
+    --text-display-5:   var(--type-display-5);
+
+    /* Line heights → leading-* utilities */
+    --leading-micro:   var(--type-leading-micro);
+    --leading-caption: var(--type-leading-caption);
+    --leading-small:   var(--type-leading-small);
+    --leading-body:    var(--type-leading-body);
+    --leading-prose:   var(--type-leading-prose);
+    --leading-heading: var(--type-leading-heading);
+    --leading-display: var(--type-leading-display);
+
+    /* Letter spacing → tracking-* utilities */
+    --tracking-tight:  var(--type-tracking-tight);
+    --tracking-snug:   var(--type-tracking-snug);
+    --tracking-normal: var(--type-tracking-normal);
+    --tracking-wide:   var(--type-tracking-wide);
+    --tracking-wider:  var(--type-tracking-wider);
+    --tracking-caps:   var(--type-tracking-caps);
+
+    /* ═══════════════════════════════════════════════
+       Font families → font-* utilities
+
+       ONE brand register, bridged from tokens.css §0's --font-stack-* source.
+       --font-text is the body/heading/prose/display register (Plus Jakarta
+       Sans). --font-serif is a bridge alias for the demo configurator's "serif"
+       control slot — it resolves to the SAME text register (the library carries
+       no display-serif voice). A consumer rebrands the whole text register by
+       overriding --font-text once.
+       ═══════════════════════════════════════════════ */
+    --font-text:    var(--font-stack-text);
+    --font-display: var(--font-stack-display);
+    --font-serif:   var(--font-stack-text);
+    --font-sans:    var(--font-stack-sans);
+    --font-mono:    var(--font-stack-mono);
+
+    /* ═══════════════════════════════════════════════
+       Colors — core
+       ═══════════════════════════════════════════════ */
+    --color-border: var(--border);
+    /* AQ.W2 §3d — the whisper-alpha border hairline rung (border-border-soft /
+       bg-border-soft utilities). Auto-dark via --border. */
+    --color-border-soft: var(--border-soft);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    /* AU.W8b.4 — the muted-foreground-strong bridge (text-muted-foreground-strong
+       utility). The base token already exists (tokens.css:362); only the
+       --color-muted-foreground bridge was present. CardDescription consumes
+       text-muted-foreground-strong through this. NOT @property-registered (a
+       design-token color; registration would break light-dark() re-resolution). */
+    --color-muted-foreground-strong: var(--muted-foreground-strong);
+
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+
+    /* R0G-5 — bg-surface-public-data-panel utility. */
+    --color-surface-public-data-panel: var(--surface-public-data-panel);
+
+    --color-shadow: var(--shadow);
+
+    /* Semantic foregrounds — bg-{success,warning,info}-foreground +
+       text-{success,warning,info}-foreground. Companions to the existing
+       --color-{success,warning,info} bridges below. R5 vocab.γ gap row 4. */
+    --color-success-foreground: var(--success-foreground);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-info-foreground:    var(--info-foreground);
+
+    /* Muted-tinted rungs — bg-muted-soft / bg-muted-medium. */
+    --color-muted-soft:   var(--muted-soft);
+    --color-muted-medium: var(--muted-medium);
+
+    /* AU.W8b.4 — glass-tier surface/border bridges (bg-glass-quiet /
+       border-glass-quiet). Companions to the existing --shadow-glass-quiet
+       bridge below; lets the Toggle `card` variant compose bg-glass-quiet /
+       border-glass-quiet / shadow-glass-quiet instead of bg-[var(--glass-…)]
+       arbitrary wraps. NOT @property-registered (design-token colors —
+       registration snapshots the resolved color + breaks light-dark()). */
+    --color-glass-quiet:        var(--glass-bg-quiet);
+    --color-glass-border-quiet: var(--glass-border-quiet);
+
+    /* Foreground-tint rungs — bg-surface-tint-{4,6,8,10,12,15,18,22,25}. */
+    --color-surface-tint-4:  var(--surface-tint-4);
+    --color-surface-tint-6:  var(--surface-tint-6);
+    --color-surface-tint-8:  var(--surface-tint-8);
+    --color-surface-tint-10: var(--surface-tint-10);
+    --color-surface-tint-12: var(--surface-tint-12);
+    --color-surface-tint-15: var(--surface-tint-15);
+    --color-surface-tint-18: var(--surface-tint-18);
+    --color-surface-tint-22: var(--surface-tint-22);
+    --color-surface-tint-25: var(--surface-tint-25);
+    --color-surface-tint-35: var(--surface-tint-35);
+    --color-surface-tint-40: var(--surface-tint-40);
+    --color-surface-tint-70: var(--surface-tint-70);
+
+    /* Surface-tint tier aliases (V.W3.T10) — semantic names mapped to
+       the canonical numeric scale. Lets consumers compose
+       `bg-surface-tint-quiet|floating|modal` without picking a numeric
+       rung; the alias resolves to the rung that matches the surface
+       tier's canonical opacity. Quiet ≈ 6% (light backdrop tint),
+       floating ≈ 12% (panel-tier tint), modal ≈ 18% (heavy modal tint). */
+    --color-surface-tint-quiet:    var(--surface-tint-6);
+    --color-surface-tint-floating: var(--surface-tint-12);
+    --color-surface-tint-modal:    var(--surface-tint-18);
+
+    /* Overlay scrims — bg-overlay-scrim{,-strong,-subtle}. */
+    --color-overlay-scrim:        var(--overlay-scrim);
+    --color-overlay-scrim-strong: var(--overlay-scrim-strong);
+    --color-overlay-scrim-subtle: var(--overlay-scrim-subtle);
+
+    /* ═══════════════════════════════════════════════
+       Colors — section palette (13-stop)
+       ═══════════════════════════════════════════════ */
+    --color-section-0:  var(--section-color-0);
+    --color-section-1:  var(--section-color-1);
+    --color-section-2:  var(--section-color-2);
+    --color-section-3:  var(--section-color-3);
+    --color-section-4:  var(--section-color-4);
+    --color-section-5:  var(--section-color-5);
+    --color-section-6:  var(--section-color-6);
+    --color-section-7:  var(--section-color-7);
+    --color-section-8:  var(--section-color-8);
+    --color-section-9:  var(--section-color-9);
+    --color-section-10: var(--section-color-10);
+    --color-section-11: var(--section-color-11);
+    --color-section-12: var(--section-color-12);
+
+    --color-section-heading: var(--section-heading);
+    --color-accent-pink: var(--accent-pink);
+    --color-accent-red:  var(--accent-red);
+
+    /* ═══════════════════════════════════════════════
+       Colors — viz basis
+       ═══════════════════════════════════════════════ */
+    --color-viz-fourier:   var(--viz-fourier);
+    --color-viz-chebyshev: var(--viz-chebyshev);
+    --color-viz-legendre:  var(--viz-legendre);
+    --color-viz-amber:     var(--viz-amber);
+    --color-viz-green:     var(--viz-green);
+
+    /* ═══════════════════════════════════════════════
+       Colors — semantic UI accents
+       ═══════════════════════════════════════════════ */
+    --color-tier-featured: var(--tier-featured);
+    --color-tier-saved:    var(--tier-saved);
+    --color-like:          var(--like);
+    --color-success:       var(--success);
+    --color-warning:       var(--warning);
+    --color-info:          var(--info);
+    --color-delete:        var(--delete);
+
+    /* ═══════════════════════════════════════════════
+       Colors — gold + rainbow accents (kept for consumers)
+       ═══════════════════════════════════════════════ */
+    --color-gold: var(--gold);
+    --color-gold-light: var(--gold-light);
+    --color-gold-dark: var(--gold-dark);
+    --color-gold-deep: var(--gold-deep);
+
+    --color-rainbow-red:    var(--rainbow-red);
+    --color-rainbow-orange: var(--rainbow-orange);
+    --color-rainbow-yellow: var(--rainbow-yellow);
+    --color-rainbow-green:  var(--rainbow-green);
+    --color-rainbow-blue:   var(--rainbow-blue);
+    --color-rainbow-indigo: var(--rainbow-indigo);
+    --color-rainbow-violet: var(--rainbow-violet);
+
+    /* ═══════════════════════════════════════════════
+       Z-index → z-* utilities
+       ═══════════════════════════════════════════════ */
+    --z-index-behind: var(--z-behind);
+    --z-index-background: var(--z-background);
+    --z-index-content: var(--z-content);
+    --z-index-controls: var(--z-controls);
+    --z-index-bar: var(--z-bar);
+    --z-index-header: var(--z-header);
+    --z-index-dock: var(--z-dock);
+    --z-index-panel: var(--z-panel);
+    --z-index-overlay: var(--z-overlay);
+    --z-index-hovercard: var(--z-hovercard);
+    --z-index-tooltip: var(--z-tooltip);
+    --z-index-popover: var(--z-popover);
+    --z-index-modal: var(--z-modal);
+    --z-index-fullscreen: var(--z-fullscreen);
+    --z-index-toast: var(--z-toast);
+    --z-index-toggle: var(--z-toggle);
+    --z-index-max: var(--z-max);
+
+    /* The radius PRIMITIVES + the semantic radius aliases (→ rounded-*
+       utilities) live in the LEADING plain @theme block above — plain, not
+       inline, so value-identical aliases never collide during candidate
+       resolution. See the order/collision note there. */
+
+    /* ═══════════════════════════════════════════════
+       Sizing → h-*, min-w-*, and spacing utilities
+       ═══════════════════════════════════════════════ */
+    --height-chart-compact: var(--chart-height-compact);
+    --height-chart-default: var(--chart-height-default);
+    --height-chart-large:   var(--chart-height-large);
+    --min-width-input-sm:   var(--input-min-width-sm);
+    --spacing-chart-margin: var(--chart-margin);
+    /* AU.W8b.4 — w-popover utility (Combobox list width). Lifts `w-[200px]`. */
+    --width-popover:        var(--popover-width);
+
+    /* Golden-ratio spacing — p-phi-5 / m-phi-6 etc. via Tailwind's spacing
+       utilities. φ² and φ³ rungs for hero/chassis padding ladder. */
+    --spacing-phi-5: var(--space-phi-5);
+    --spacing-phi-6: var(--space-phi-6);
+
+    /* V.W2 T13 — Icon-size ladder bridge → `size-icon-*`/`h-icon-*`/`w-icon-*`
+       utilities. Consumers can compose via `class="size-icon-2xl"` etc.
+       directly without the `size-[var(--icon-2xl)]` arbitrary-property form. */
+    --spacing-icon-xs:  var(--icon-xs);
+    --spacing-icon-sm:  var(--icon-sm);
+    --spacing-icon-md:  var(--icon-md);
+    --spacing-icon-lg:  var(--icon-lg);
+    --spacing-icon-xl:  var(--icon-xl);
+    --spacing-icon-2xl: var(--icon-2xl);
+    --spacing-icon-3xl: var(--icon-3xl);
+    --spacing-icon-hero: var(--icon-hero);
+
+    /* ═══════════════════════════════════════════════
+       Shadows → shadow-* utilities
+       ═══════════════════════════════════════════════ */
+    --shadow-cartoon:       var(--cartoon-shadow);
+    --shadow-cartoon-hover: var(--cartoon-shadow-hover);
+    --shadow-soft:          var(--soft-shadow);
+    --shadow-elevated:      var(--elevated-shadow);
+    --shadow-modal:         var(--modal-shadow);
+
+    --shadow-card:           var(--card-shadow);
+    --shadow-dock:           var(--dock-shadow);
+    --shadow-dock-collapsed: var(--dock-shadow-collapsed);
+
+    --shadow-glass-wash:     var(--glass-shadow-wash);
+    --shadow-glass-quiet:    var(--glass-shadow-quiet);
+    --shadow-glass-resting:  var(--glass-shadow-resting);
+    --shadow-glass-floating: var(--glass-shadow-floating);
+    --shadow-glass-overlay:  var(--glass-shadow-overlay);
+
+    --shadow-cartoon-sm: var(--cartoon-shadow-sm);
+    --shadow-cartoon-md: var(--cartoon-shadow-md);
+    --shadow-cartoon-lg: var(--cartoon-shadow-lg);
+
+    /* ═══════════════════════════════════════════════
+       Blur → blur-* and backdrop-blur-* utilities
+       ═══════════════════════════════════════════════ */
+    --blur-glass-wash:     var(--glass-blur-wash-radius);
+    --blur-glass-quiet:    var(--glass-blur-quiet-radius);
+    --blur-glass-resting:  var(--glass-blur-resting-radius);
+    --blur-glass-floating: var(--glass-blur-floating-radius);
+    --blur-glass-overlay:  var(--glass-blur-overlay-radius);
+    --blur-dock:           var(--glass-blur-dock-radius);
+
+    /* ═══════════════════════════════════════════════
+       Easing → ease-* utilities
+       ═══════════════════════════════════════════════ */
+    --ease-spring-smooth: var(--spring-smooth);
+    --ease-spring-snappy: var(--spring-snappy);
+    --ease-spring-bouncy: var(--spring-bouncy);
+    --ease-spring-gentle: var(--spring-gentle);
+
+    --ease-standard: var(--motion-ease-standard);
+    --ease-out: var(--motion-ease-out);
+    --ease-in: var(--motion-ease-in);
+    --ease-out-expo: var(--motion-ease-out-expo);
+    --ease-apple: var(--motion-ease-apple);
+    --ease-spring: var(--spring-snappy);
+    --ease-decelerate: var(--motion-ease-out);
+    --ease-accelerate: var(--motion-ease-in);
+
+    /* ═══════════════════════════════════════════════
+       Duration → duration-* utilities
+       ═══════════════════════════════════════════════ */
+    --transition-duration-instant: var(--duration-instant);
+    --transition-duration-fast: var(--duration-fast);
+    --transition-duration-normal: var(--duration-normal);
+    --transition-duration-slow: var(--duration-slow);
+    --transition-duration-panel: var(--duration-panel);
+    --transition-duration-xl: var(--duration-xl);
+    --transition-duration-xxl: var(--duration-xxl);
+    --transition-duration-sparkle: var(--duration-sparkle);
+}

package/dist/styles/theme/dark.css

@@ -0,0 +1,7 @@
+/* theme/dark.css — the class-based dark-mode variant (AZ.W-CARVE partial 4 of 4).
+
+   Cascade: this partial MUST @import LAST (after radius/bridges/literals) — it
+   declares the `dark:` variant the rest of the cascade keys off. */
+
+/* Class-based dark mode */
+@variant dark (&:where(.dark, .dark *));

package/dist/styles/theme/literals.css

@@ -0,0 +1,94 @@
+/* theme/literals.css — the trailing plain @theme: directly-authored LITERALS
+   (AZ.W-CARVE partial 3 of 4).
+
+   The override surface here is the namespaced var itself, not a tokens.css
+   bridge, so these mint their global variable. The --animate-* composites
+   (literal keyframe name + var() timing — no tokens.css twin to double), the
+   opacity rungs, and the text-shadow family.
+
+   Cascade: this partial MUST @import AFTER theme/bridges.css and BEFORE
+   theme/dark.css. */
+
+@theme {
+    /* ═══════════════════════════════════════════════
+       Animation → animate-* utilities
+       ═══════════════════════════════════════════════ */
+    --animate-floating-panel-in: floating-panel-in var(--duration-fast) var(--ease-out);
+    --animate-tooltip-in: tooltip-in var(--duration-fast) var(--ease-out);
+    --animate-fade-in: fade-in var(--duration-normal) var(--spring-smooth);
+    --animate-scale-in: scale-in var(--duration-normal) var(--spring-smooth);
+    --animate-slide-up: slide-up var(--duration-normal) var(--spring-smooth);
+    --animate-dock-in: dock-in var(--duration-panel) var(--spring-snappy) both;
+    /* ── Shimmer family: documented duration offset ──────────────────────────
+       The shimmer ladder is intentionally non-paired-by-name:
+       - `--animate-shimmer` reads `--duration-shimmer-fast` (3s) — fast loop
+         tempo for the band-pass shimmer pattern (skeleton, marketing).
+       - `--animate-shimmer-sweep` and `--animate-gold-shimmer` both read the
+         unsuffixed `--duration-shimmer` (5s) — slower one-pass sweep for
+         brand-polish moments (Complete! gold-shimmer headline, hero lifts).
+       The fast/canonical split exists because the two shimmer modes (looping
+       band-pass vs one-pass sweep) want different tempos. The pre-V audit
+       (C-c §5.3) flagged this as a "naming inversion"; it is intentional —
+       documented here so the offset is searchable. The orphan
+       `--duration-shimmer-slow` (8s) was excised in V.W2 T5. */
+    --animate-shimmer: shimmer var(--duration-shimmer-fast) linear infinite;
+    --animate-shimmer-sweep: shimmer-sweep var(--duration-shimmer) ease-in-out infinite;
+    --animate-gold-shimmer: gold-shimmer-slide var(--duration-shimmer) linear infinite;
+    --animate-shake: shake 0.5s ease-in-out;
+
+    /* ═══════════════════════════════════════════════
+       Opacity → opacity-* utilities
+
+       Bridges the canonical `--opacity-disabled` (0.5) and
+       `--opacity-icon-muted` (0.8) rungs from tokens.css §11. Tailwind
+       v4 generates `opacity-disabled` / `opacity-icon-muted` utilities
+       (and the `disabled:opacity-disabled` modifier form) from these
+       @theme declarations; the values match tokens.css line 550-551.
+
+       Consumers replace 18+ hardcoded `disabled:opacity-50` literals
+       across the primitive slice with `disabled:opacity-disabled`.
+       (Per audit U.W0.C-a §1.2 / §gap.4 — U12.)
+       ═══════════════════════════════════════════════ */
+    --opacity-disabled:   0.5;
+    --opacity-icon-muted: 0.8;
+
+    /* ═══════════════════════════════════════════════
+       text-shadow → text-shadow-* utilities (AW.W26)
+
+       text-shadow is the lone shadow family that shipped no `@theme` bridge
+       (Tailwind v4.1 minted the `text-shadow-{2xs,xs,sm,md,lg}` utilities). The
+       rungs are warm-`--shadow-color`-derived via `color-mix` per the box-shadow
+       ladder (tokens.css §7) + the cartoon-shadow precept's one-source chain, so
+       they re-tint under `.dark` BY CONSTRUCTION — `--shadow-color: var(--foreground)`
+       flips light→dark with no hardcoded `.dark` re-declaration. The hand-rolled
+       multi-stop `text-shadow:` literals in `.depth-text` (utilities.css) +
+       `.text-engraved` (typography.css) now compose these tokens. */
+    --text-shadow-2xs: 0 1px 0 color-mix(in srgb, var(--shadow-color) 12%, transparent);
+    --text-shadow-xs:  0 1px 1px color-mix(in srgb, var(--shadow-color) 16%, transparent);
+    --text-shadow-sm:  0 1px 0 color-mix(in srgb, var(--shadow-color) 14%, transparent),
+                       0 2px 3px color-mix(in srgb, var(--shadow-color) 18%, transparent);
+    --text-shadow-md:  0 1px 0 color-mix(in srgb, var(--shadow-color) 16%, transparent),
+                       0 2px 4px color-mix(in srgb, var(--shadow-color) 20%, transparent),
+                       0 4px 8px color-mix(in srgb, var(--shadow-color) 14%, transparent);
+    --text-shadow-lg:  0 1px 0 color-mix(in srgb, var(--shadow-color) 18%, transparent),
+                       0 2px 4px color-mix(in srgb, var(--shadow-color) 22%, transparent),
+                       0 6px 12px color-mix(in srgb, var(--shadow-color) 18%, transparent);
+
+    /* Two IDENTITY text-shadow tokens — the hard offset STAMP (`.depth-text`)
+       + the two-stop EMBOSS (`.text-engraved`). These hold the multi-stop
+       literals INSIDE the `@theme` defs so the utilities compose `var(--text-shadow-*)`
+       and no raw `text-shadow:` literal survives in `utilities.css`/`typography.css`
+       (AW.W26 gate 4). Both are `--shadow-color`/surface-tint-derived, so they
+       re-tint under `.dark` BY CONSTRUCTION. */
+    --text-shadow-depth: 1px 1px 0 var(--shadow),
+                         2px 2px 0 var(--shadow),
+                         3px 3px 0 var(--shadow),
+                         4px 4px 0 var(--shadow),
+                         5px 5px 0 var(--shadow),
+                         5px 5px 1px color-mix(in srgb, var(--shadow-color) 10%, transparent),
+                         2px 2px 2px color-mix(in srgb, var(--shadow-color) 20%, transparent),
+                         4px 4px 5px color-mix(in srgb, var(--shadow-color) 25%, transparent),
+                         6px 6px 10px color-mix(in srgb, var(--shadow-color) 15%, transparent);
+    --text-shadow-engraved: 0 1px 0 color-mix(in srgb, var(--background) 30%, transparent),
+                            0 -1px 0 var(--surface-tint-8);
+}

package/dist/styles/theme/radius.css

@@ -0,0 +1,95 @@
+/* theme/radius.css — the LEADING plain @theme: the radius primitives + the
+   radius semantic aliases + the corner-SHAPE axis (AZ.W-CARVE partial 1 of 4).
+
+   Plain (not inline) on purpose — the radius scale has no tokens.css twin, so
+   each `--radius-*` is the lone declaration + single override point. Inline is
+   WRONG here: it substitutes the VALUE, so two aliases resolving to one
+   primitive (`--radius-card`/`--radius-dialog` both → `--radius-2xl`) collapse
+   to an identical value and v4 drops one `rounded-*` utility when both are
+   scanned. Plain mints each alias's own var, so value-identical siblings never
+   collide. This partial MUST @import BEFORE theme/bridges.css (the inline
+   bridges reference these primitives). */
+
+/* Radius primitives — leading plain @theme (declared before the inline aliases
+   reference them; see the order note above). */
+@theme {
+    --radius: 0.625rem;
+    --radius-xs: 4px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-xl: 12px;
+    --radius-2xl: 1rem;
+    /* AW.W3b — a finite radius rung above --radius-2xl (16px), below
+       --radius-pill (the stadium). The big-dock card shell's corner geometry. */
+    --radius-3xl: 1.5rem;
+    --radius-pill: 9999px;
+
+    /* Semantic radius aliases — plain @theme (not inline; see header note).
+       Value-identical siblings (e.g. --radius-card + --radius-dialog) would
+       collapse + drop a rounded-* utility under inline; plain mints each
+       alias's own var. */
+    --radius-lg:      var(--radius);
+    --radius-card:    var(--radius-2xl);
+    --radius-panel:   var(--radius-xl);
+    --radius-dialog:  var(--radius-2xl);
+    --radius-input:   var(--radius);
+    --radius-button:  var(--radius);
+    /* AW.W25 — form-radius unification. `--radius-field` is the non-pill field
+       rung the multi-line / stepper form atoms (Textarea, NumberFieldInput)
+       resolve so a multi-line box stops inheriting the `9999px` stadium pill;
+       single-line controls (Input, SelectTrigger) keep the pill. `--radius-control`
+       is the semantic control-corner rung that retires the raw `rounded-sm` (4px)
+       on Checkbox + base Tabs onto a softer, named radius. One geometry language
+       across the form family — token + class only, no new primitive. */
+    --radius-field:   var(--radius-2xl);
+    --radius-control: var(--radius-md);
+    --radius-badge:   var(--radius-pill);
+    --radius-dock:    var(--radius-pill);
+    /* AW.W3b — the big-dock card shell's default (comfortable-density) radius.
+       The density-scaled --dock-card-radius (dock.css) resolves through this. */
+    --radius-dock-card: var(--radius-3xl);
+    --radius-tooltip: var(--radius-lg);
+
+    /* ── AX.W56 — the corner-SHAPE axis (parallel to the corner-RADIUS ladder above).
+       `corner-shape` only changes the CURVE within the `border-radius` box; the
+       region is still the `--radius-*` token. These are plain @theme (the radius
+       siblings' rationale applies — each alias is its own override point, and the
+       semantic shapes are value-identical keywords that must not collapse under
+       inline). Chrome 139+ only (~65% global May 2026); the un-gated `border-radius`
+       round stays the cross-engine CONTRACT and the `@supports (corner-shape:
+       superellipse(2))` gate (glass.css/dock.css) is the PE tier. NEVER make
+       corner-shape the contract — Safari/Firefox have no positive signal through 2026.
+
+       Superellipse exponent (MDN authoritative): `superellipse(K)` paints
+       |x|^(2K) + |y|^(2K) = 1, so the curve exponent n = 2K. The CSS `squircle`
+       keyword == `superellipse(2)` == n=4 — the iOS-idiomatic web squircle. The
+       k-PRIMITIVE band (a consumer dials 1.7–2.4 to taste; W42's dock-morph calc()s
+       its animated k against this ONE vocabulary — do not re-define a second k). */
+    --corner-k-squircle: 2;   /* the squircle — superellipse(2), n=4               */
+    --corner-k-soft:     1.7; /* gentler, between round and squircle — n≈3.4       */
+    --corner-k-sharp:    2.4; /* crisper square-bias for large surfaces — n≈4.8    */
+
+    /* Semantic per-surface SHAPE aliases — the rounded-vs-squircle POLICY (a
+       RADIUS-THRESHOLD policy: the superellipse only READS at a LARGE radius
+       ~--radius-xl/12px and up). ROUND set = card, pill (small controls + data
+       cards + stadium pills — the superellipse is imperceptible, dropping it is
+       free). SQUIRCLE set = bigdock, dialog, sheet, panel, hero (the large-radius
+       glass overlays where the iOS-26 silhouette reads — the blur halo + cartoon
+       under-shadow follow the shape). ALL ride the ONE --corner-k-squircle vocab.
+       W56b (USER-DECISION R1) extended the family off big-dock-only onto the large
+       glass overlays; @supports-gated in glass/squircle.css over the `border-radius`
+       round CONTRACT. A consumer dials any surface back to round (or opts one in) by
+       re-pointing its `--corner-shape-<surface>` alias. */
+    --corner-shape-card:    round;
+    --corner-shape-pill:    round;
+    --corner-shape-bigdock: superellipse(var(--corner-k-squircle));
+    --corner-shape-dialog:  superellipse(var(--corner-k-squircle));
+    --corner-shape-sheet:   superellipse(var(--corner-k-squircle));
+    --corner-shape-panel:   superellipse(var(--corner-k-squircle));
+    --corner-shape-hero:    superellipse(var(--corner-k-squircle));
+    /* AX.W59 — the spectrum slider's track-height thumb reads as a SQUIRCLE
+       (the iOS color-picker idiom). It rides the same --corner-k-squircle
+       vocabulary; @supports-gated in Slider.vue over a --radius-* round
+       fallback. A consumer dials it to round (a circular knob) or to soft. */
+    --corner-shape-thumb:   superellipse(var(--corner-k-squircle));
+}