@mkbabb/glass-ui 4.1.0 → 5.0.0

package/src/styles/glass/control-surfaces.css

@@ -93,38 +93,42 @@
        specificity). `:focus-visible` Baseline Widely — no fallback. */
     .input-pill:focus-visible {
         outline: none;
-        border-color: var(--color-accent-opaque, var(--ring));
-        box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--ring) 30%, transparent));
+        /* BG.W-DESHADCN — the focus fallback reads the renamed house
+           `--focus-ring-color` (off the shadcn `--ring`; value unchanged). */
+        border-color: var(--color-accent-opaque, var(--focus-ring-color));
+        box-shadow: 0 0 0 2px var(--color-accent, color-mix(in srgb, var(--focus-ring-color) 30%, transparent));
     }
 
     /* AQ.W4 §W4.1 — validity vocabulary on `.input-pill` (Input + Textarea).
-       The forgiving `:where(:user-invalid, .user-invalid-fallback,
-       [aria-invalid="true"])` group is ONE rule covering THREE trigger surfaces:
-       native constraint-validation (`:user-invalid`), the `useUserInvalidAria`
-       fallback class for engines without `:user-invalid` (css §3.2; NOT a
-       live+dead alias — the class is the SOLE fallback), AND (AW.W18) the
-       imperative `[aria-invalid="true"]` attribute. The `[aria-invalid]` arm
-       serves APP-DRIVEN validity — a custom key match, an async server check —
-       where there is no native constraint to trip `:user-invalid`, so the app
-       sets the ARIA attribute and the library's own ring paints with no
-       `:deep()` re-paint at the consumer. The destructive/success tints reuse
-       the semantic tokens via `color-mix` per the house pattern (W2). Non-color
+       The `:where(:user-invalid, [aria-invalid="true"])` group is ONE rule
+       covering TWO trigger surfaces: native constraint-validation
+       (`:user-invalid`, Baseline Chrome 119+/Safari 16.5+ on the target set) AND
+       (AW.W18) the imperative `[aria-invalid="true"]` attribute. The
+       `[aria-invalid]` arm serves APP-DRIVEN validity — a custom key match, an
+       async server check — where there is no native constraint to trip
+       `:user-invalid`, so the app sets the ARIA attribute and the library's own
+       ring paints with no `:deep()` re-paint at the consumer. The legacy
+       `.user-invalid-fallback` / `.user-valid-fallback` class members (for
+       engines without `:user-invalid`) were COLLAPSED at BG.NF.2
+       W-LEGACY-LADDER-COLLAPSE — the aria-BRIDGE half of `useUserInvalidAria`
+       KEEPS (a11y, not a ladder). The destructive/success tints reuse the
+       semantic tokens via `color-mix` per the house pattern (W2). Non-color
        reinforcement is the error TEXT (W4.5 `error` slot) + the `required`
        asterisk — the border/bg shift is the supplementary cue, never the sole
        one. `:user-valid` is intentionally subtle (border only, no bg fill) so
        a long valid form is not a wall of green. */
-    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]) {
+    .input-pill:where(:user-invalid, [aria-invalid="true"]) {
         border-color: var(--destructive);
         background: color-mix(in srgb, var(--destructive) 8%, var(--glass-bg-quiet));
     }
-    .input-pill:where(:user-valid, .user-valid-fallback) {
+    .input-pill:where(:user-valid) {
         border-color: var(--success);
     }
     /* Invalid + keyboard-focused → destructive ring (overrides the accent
        `:focus-visible` ring above by order + the extra invalid compound). The
        `[aria-invalid]` arm rides the same widened group so an app-driven
        invalid field shows the destructive ring on focus too. */
-    .input-pill:where(:user-invalid, .user-invalid-fallback, [aria-invalid="true"]):focus-visible {
+    .input-pill:where(:user-invalid, [aria-invalid="true"]):focus-visible {
         border-color: var(--destructive);
         /* BB.W-INVALID-RING — the shared destructive ring register (the
            --focus-ring-shadow sibling). The byte-identical recipe is now ONE

package/src/styles/glass/deep.css

@@ -34,11 +34,81 @@
  * BEFORE the a11y @media brackets (which still win by the :root level re-point).
  */
 @layer components {
-    /* The deep decoration: re-point the floating rung's blur token to the deep
-       family. The base `.glass-floating` rule (`backdrop-filter:
-       var(--glass-blur-floating)`) then paints the deep `blur(16px) saturate(1.5)`
-       at `--glass-depth: 1` — the Apple-deep register, opt-in. */
+    /* The deep decoration: COMPUTE the deep LERP here (at the consuming element) +
+       re-point the floating rung's blur token to it.
+
+       THE FREEZE-FIX (BG.W-GLASS-DEPTH-TIER — the C18 dual-engine painted dead-knob,
+       2026-07-05). The LERP intermediates read `var(--glass-depth)`, a REGISTERED
+       `@property` (`inherits: true; initial-value: 1`). Per the CSS Properties &
+       Values API a `var()` to a registered custom property inside ANOTHER custom
+       property is eager-substituted with the referenced property's COMPUTED value AT
+       THE DECLARING ELEMENT. So these intermediates MUST be declared HERE (on
+       `.glass-deep`), NOT at `:root` (tokens/glass-deep.css) — at `:root` the tier
+       grade is not yet in scope and `--glass-depth` computes to its `initial-value` 1,
+       freezing the whole calc at the depth-1 endpoint (every deep surface paints the
+       16px / 1.8 ceiling, tier grade inert). The tier map below sets `--glass-depth`
+       per tier ON THE BASE RUNG the `.glass-deep` decoration composes with (same
+       element), so declared here `var(--glass-depth)` resolves to the element's LIVE
+       tier grade and the ladder PAINTS: content ~14px < popover ~15px < menu 16px.
+
+       The composition is IDENTICAL to the retired `:root` form — same endpoints
+       (`--glass-blur-floating-radius` depth-0 floor / `--glass-blur-deep-radius`
+       depth-1 ceiling, `--glass-saturate-floating` / `--glass-saturate-deep`), same
+       `* var(--glass-level)` clarity scale (so the opaque escape + the a11y brackets
+       reach the deep plate through the ONE level path; at `--glass-level: 0` the deep
+       blur resolves blur(0)). Only the DECLARING SELECTOR moved (:root → .glass-deep).
+       The base `.glass-floating` rule (`backdrop-filter: var(--glass-blur-floating)`)
+       then paints the deep blur — the Apple-deep register, opt-in. */
     .glass-deep {
+        --glass-blur-deep-active-radius:
+            calc(
+                (
+                    var(--glass-blur-floating-radius)
+                    + (var(--glass-blur-deep-radius) - var(--glass-blur-floating-radius))
+                    * var(--glass-depth)
+                )
+                * var(--glass-level)
+            );
+        --glass-saturate-deep-active:
+            calc(
+                var(--glass-saturate-floating)
+                + (var(--glass-saturate-deep) - var(--glass-saturate-floating))
+                * var(--glass-depth)
+            );
+        --glass-blur-deep:
+            blur(var(--glass-blur-deep-active-radius))
+            saturate(var(--glass-saturate-deep-active));
         --glass-blur-floating: var(--glass-blur-deep);
     }
+
+    /* ── The tier-ladder depth MAP (BG.W-GLASS-DEPTH-TIER) ──────────────────────
+       Map --glass-depth onto the tier ladder so the deep register's thickness
+       tracks surface PROMINENCE by construction: the overlay/menu rungs default a
+       HIGHER depth than the content rungs (menu > popover > button). Each rung sets
+       the ONE --glass-depth scalar from its named grade (tokens/glass-deep.css) — a
+       pure per-rung DEFAULT, NOT a new blur recipe. So a deep surface inherits its
+       tier's depth: a `deep` Card (glass-floating glass-deep) resolves the popover
+       grade (~15px), the hero CTA button (glass-wash btn-glass glass-deep) resolves
+       the content grade (~14px), a deep overlay/modal reaches the full 16px ceiling
+       — thickness tracks prominence by construction, ZERO new machinery.
+
+       D5-SAFE: no rung reads var(--glass-blur-deep) here — --glass-depth only DRIVES
+       the deep LERP (glass-deep.css), so a NON-deep tier surface is BYTE-UNCHANGED
+       (a plain popover stays the calm 13px; the calm ladder never reads --glass-depth)
+       and only a `.glass-deep`-composed surface consumes the graded depth.
+
+       SUBSTITUTION-vs-INHERITANCE (the recorded seam): zero-specificity :where() so
+       a consumer overrides the default at the element (`--glass-depth` inline / a
+       higher-specificity rule). To retune a whole band from an ancestor, override the
+       named grade token (`--glass-depth-popover: …`) — the tier rules read it, so it
+       cascades in (the per-band twin of the global --glass-depth ancestor dial). */
+    :where(.glass-overlay) {
+        --glass-depth: var(--glass-depth-menu);
+    }
+    :where(.glass-floating) {
+        --glass-depth: var(--glass-depth-popover);
+    }
+    :where(.glass-card, .glass-resting, .glass-quiet, .glass-wash) {
+        --glass-depth: var(--glass-depth-content);
+    }
 }

package/src/styles/glass/defined.css

@@ -0,0 +1,88 @@
+/* glass/defined.css
+   BG.W-GLASS-DEFAULT-DEFINITION (GA-1) — the DEFINED glass tier.
+
+   Glass is the maximal default (AX.W54), but the blur is imperceptible over a FLAT page
+   — a bare <Button>/.input-pill reads as a near-gray shape (chroma 0.0138, BD GOLDEN).
+   This tier splits glass into TWO registers on the ONE existing --glass-level/edge
+   machinery (NOT a fork of the cascade, NOT a competing backdrop-filter, NOT a parallel
+   recipe):
+     · transmissive (today's maximal glass) — the DEFAULT for surfaces WITH a colorful
+       backdrop (cards over the field, overlays over content, the dock over aurora).
+       BYTE-UNTOUCHED.
+     · defined — a `.glass-defined` TOKEN-SUBSTITUTION decoration on a base rung (the
+       .glass-opaque/.glass-deep precedent) that reads as a SHAPE over ANY backdrop by
+       composing three things the material ALREADY owns: (a) a stronger warm rim
+       (--glass-border-defined), (b) a warm-cream floor-fill (--glass-floor-fill) layered
+       UNDER the transmissive plate, (c) the shipped W-BUTTON-GLASS lit register
+       (specular + --glass-btn-* depth stack, unchanged). ONE engage scalar,
+       @property --glass-definition (property-regs.css; 0 = transmissive, 1 = defined) —
+       both legs read it, so the scalar is genuinely load-bearing (dead-knob-proof) and a
+       host dials definition on any ancestor.
+
+   The DEFAULT flip (the wave's PURPOSE): the control cohort — Button glass variants
+   (.btn-glass) · .input-pill (Input/Textarea/NumberField) · .control-surface
+   (SelectTrigger) — is DEFINED by default, so a control reads as a control over a flat
+   page (the AX.W54 over-reach transposition BD §3.3 invited). A CONTENT surface composes
+   NO .glass-defined and stays transmissive (the negative arm — the flip does not bleed).
+   Menu ROWS stay transmissive inside an already-defined panel (KS-GLASS §3.2 decided
+   sub-question — a row inside a defined panel needs state fills, not its own floor).
+
+   @import-ed after deep.css in glass.css (a decoration ON a base rung, the deep.css
+   sibling); the tokens live in tokens/glass.css. */
+@layer components {
+    /* The floor layers UNDER the plate via TWO image layers: CSS image layers always
+       paint OVER background-color, so a two-image plate-over-floor is the ONLY ordering
+       that reads plate-over-floor. The base rung paints its plate via the `background:`
+       SHORTHAND (→ background-COLOR), so `background-color: transparent` is LOAD-BEARING
+       — un-zeroed the composite would be plate(image) ⊕ floor(image) ⊕ plate(color), the
+       plate counted TWICE. Zeroed, the stack is EXACTLY one plate over one floor (the
+       calibration target). Each family maps --glass-defined-plate to its OWN fill token
+       so the floor sits under the fill it actually paints; a bare `.glass-*` rung +
+       .glass-defined falls back to the ladder-rung plate (--glass-plate-tinted). */
+    .glass-defined,
+    .btn-glass,
+    .input-pill,
+    .control-surface {
+        --glass-definition: 1;
+        /* The substitution-vs-inheritance fix (the --dock-scale re-declare / --glass-bg-dock
+           pre-substituted-seam precedent — CLAUDE.md "The substitution-vs-inheritance trap").
+           --glass-floor-fill + --glass-border-defined are composed at :root, where
+           --glass-definition is 0 — and a custom property's inner var() substitutes at the
+           element that DECLARES it, so the :root copies resolve TRANSPARENT (calc(0 * N%)) and
+           inherit DOWN already-resolved. Flipping --glass-definition: 1 here would be a DEAD KNOB
+           (the floor/rim keep their :root-resolved transparent value). RE-DECLARE both on this
+           definition-1 rule so their var(--glass-definition) re-resolves against THIS element's
+           value (card@15% floor + foreground@14% rim actually paint). The :root copies stay the
+           transmissive default (definition 0 -> transparent) for a content surface. Both legs
+           still read the scalar (dead-knob-proof); --glass-floor-fill-max stays the one knob. */
+        --glass-floor-fill: color-mix(
+            in srgb,
+            var(--card) calc(var(--glass-definition) * var(--glass-floor-fill-max)),
+            transparent
+        );
+        --glass-border-defined: color-mix(
+            in srgb,
+            var(--foreground) calc(var(--glass-definition) * 14%),
+            transparent
+        );
+        background-color: transparent;
+        background-image:
+            linear-gradient(
+                var(--glass-defined-plate, var(--glass-plate-tinted)),
+                var(--glass-defined-plate, var(--glass-plate-tinted))
+            ),
+            linear-gradient(var(--glass-floor-fill), var(--glass-floor-fill));
+        border-color: var(--glass-border-defined);
+    }
+
+    /* Per-family plate mapping — the floor layers under the fill each family PAINTS
+       (btn-glass composes its own tinted --glass-fill; the form controls read the shared
+       --control-surface-bg REST register). */
+    .btn-glass {
+        --glass-defined-plate: var(--glass-fill);
+    }
+    .input-pill,
+    .control-surface {
+        --glass-defined-plate: var(--control-surface-bg);
+    }
+}

package/src/styles/glass/glass-atom.css

@@ -0,0 +1,247 @@
+/* ════════════════════════════════════════════════════════════════════════
+   .glass-atom — BD.W-GLASS-ATOM-REGISTER: the ONE shared warm-glass register
+   the four small atoms (Badge-glass · metric-badge · slider fill · the `+N`
+   chip) consume in two registers (loud opaque identity vs quiet transmissive
+   glass).
+
+   CONSUME-ONLY — declares ZERO own glass tokens (the no-fork fence, Fence 1).
+   It COMPOSES:
+     · `.glass-capsule`        — the warm-transmissive lozenge BODY (warm floor +
+                                 rim + lift). `.glass-atom` is a PEER of any
+                                 sized chip, NEVER `.glass-chip` itself (Fence 2):
+                                 both compose `.glass-capsule`. A consumer applies
+                                 BOTH classes (`class="glass-capsule glass-atom"`)
+                                 or composes the capsule body via the glass tier
+                                 the host already wears.
+     · `--glass-fill-tint` / `--glass-fill-strength` (BE.W-TINTED-CHIP, glass.css)
+                                 — the per-instance plate-fill data hue. The atom
+                                 is its ≥Nth consumer; it APPLIES the axis on the
+                                 quiet register, never re-mints a tint.
+     · `--glass-material-rim`  — the keyed directional rim (the defined edge), the
+                                 SHIPPED two-stop rim re-pointed by `--glass-key`.
+     · the inert `.cartoon-cast` child + `--cartoon-ink` / `--shadow-cartoon-*`
+                                 (BD.W-CARTOON-CASTER / -CEL-INK) — the warm cel
+                                 stamp; the loud register intensifies on `data-cast`.
+     · `--motion-weight` × `--ease-cartoon-punch` (BD.W-MOTION-WEIGHT /
+                                 -CARTOON-PUNCH) — the non-uniform press squash +
+                                 the weight-coupled smear/settle.
+
+   @layer components, @import-ed by icon-chip.css (in-lane) AFTER glass.css (so
+   `.glass-capsule` + the `--glass-*` axes resolve) and BEFORE the consuming
+   recipes. Every channel is compositor-only + Safari-native (no
+   `backdrop-filter: url()`, no goo — Fence 8). The warm 0-alpha sources are
+   explicit `oklch(L C H / 0)` (NEVER bare `transparent` — the WebKit
+   black-premultiply hole, build-trap-(d)).
+   ════════════════════════════════════════════════════════════════════════ */
+
+@layer components {
+    /* ── The warm idle floor (the #2 dormant-tint cure) ──
+       The atom carries chroma BEFORE any field paints + on a dead ground. The
+       floor is NON-self-referential (build-trap-(b): a property reading ITSELF in
+       its own `max()` resolves to guaranteed-invalid and the term drops). A
+       SEPARATE input var is the source: a consumer (the accent ramp) writes
+       `--accent-fill-strength-in`, and the resolved fill strength floors at
+       `--atom-tint-floor` — PLAIN per-mode (12% light / 15% dark), NEVER
+       `light-dark()` (the inset-shadow trap). */
+    .glass-atom {
+        --atom-tint-floor: 12%;
+        --accent-fill-strength: max(
+            var(--accent-fill-strength-in, 0%),
+            var(--atom-tint-floor)
+        );
+        /* The quiet register's tint application reads the SHARED per-instance PLATE
+           recipe `--glass-fill-tinted` (BG.W-GLASS-CONSUMER-BAND, tokens/glass.css) —
+           NOT a forked `color-mix` re-spell. The plate tints toward the per-instance
+           DATA hue (`--glass-fill-tint` at `--glass-fill-strength`), so a semantic
+           badge (`destructive`/`success`/`info`) reaches its hue — closing the prior
+           `.glass-atom` fork that mixed a FIXED `--glass-capsule-warm` cream regardless
+           of the data hue (the comment claimed "toward the per-instance data hue" while
+           the code ignored it). At the `@property` defaults this is the byte-identical
+           no-op (`color-mix(in oklab, X, transparent 0%)` ≡ X); the capsule's own warm
+           floor above keeps the idle body warm. ONE plate, ONE rim (`--glass-material-
+           rim`, the capsule carries it) — the shared plate/rim pair. */
+        /* The motion register — the press/hover deform rides
+           `--motion-weight × --ease-cartoon-punch`. The atom inherits the rest
+           `--motion-weight: 0.618`; the loud register (`data-cast`, below) pushes
+           it to 1 so the punch is never muted (the loud-register coupling). The
+           SPATIAL legs (scale/translate) settle on the punch clock; the EFFECTS
+           legs (background/box-shadow) stay on the bezier (motion-canon P1). */
+        transition:
+            background var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            scale var(--duration-normal) var(--ease-cartoon-punch),
+            translate var(--duration-normal) var(--ease-cartoon-punch);
+    }
+    .dark .glass-atom {
+        --atom-tint-floor: 15%;
+    }
+
+    /* ── The non-uniform PRESS squash (the punch, NOT a shrink) ──
+       Widen X, compress Y (`scale: 1.04 0.94`) — real squash & stretch. The
+       `:active` is the no-JS floor; a consumer's `useLiquidPress` may drive a
+       continuous ramp via `--cartoon-press-t` (the caster reads it). The
+       `border-radius` is the pill, so under non-uniform scale the end-caps track
+       the scaled box (challenge #2 R4 — the capsule radius stays circle-tolerant). */
+    .glass-atom:active:not([data-disabled]):not(:disabled) {
+        scale: 1.04 0.94;
+    }
+
+    /* ── The cel cast — UNIVERSAL-but-GRADED (challenge #1 R5 / #3 R5) ──
+       Every atom carries a hairline warm rim-cast at rest (the family floor); the
+       loud flagships (`data-cast`) INTENSIFY to the loud layered-offset stamp.
+       The cast rides the inert `.cartoon-cast` child (BD.W-CARTOON-CASTER) — the
+       child carries `--shadow-cartoon-md` at rest and moves on `translate`/`scale`
+       only; here the atom only RE-POINTS the loud register's resting/hover rung
+       (it does not re-author the caster). The loud register pushes
+       `--motion-weight: 1` so the punch reads at full amplitude. */
+    .glass-atom[data-cast] {
+        --motion-weight: 1;
+    }
+    .glass-atom[data-cast] .cartoon-cast {
+        box-shadow: var(--shadow-cartoon-sm);
+    }
+    @media (hover: hover) {
+        .glass-atom[data-cast]:hover:not(:active) .cartoon-cast {
+            box-shadow: var(--shadow-cartoon-md);
+        }
+    }
+
+    /* ── The QUIET register (`[data-surface="glass"]`) — the transmissive tint ──
+       The quiet capsule applies the per-instance fill tint over the warm floor.
+       This is where the warm-not-gray read is won (badge-glass, the `+N` chip).
+       The body composes `.glass-capsule` (the consumer applies both classes); the
+       atom only LAYERS the tinted fill on top of the capsule's warm composite via
+       `background-image` (a later layer over the capsule's `background:` shorthand
+       — the proven `.paper-grid` coexistence seam, paints OVER the translucent
+       fill, UNDER content). The 0-alpha stop is warm `oklch(… / 0)`, never bare
+       `transparent` (challenge #1 R4 / #2 R4 — the WebKit desaturation fix). */
+    .glass-atom[data-surface="glass"] {
+        background-image: linear-gradient(
+            var(--glass-fill-tinted),
+            var(--glass-fill-tinted)
+        );
+    }
+
+    /* ── PRM/PRT carve ──
+       Under reduced-motion `--motion-weight: 0` zeroes the squash + the cast
+       travel/lag in ONE assignment (every `calc(… * --motion-weight)` in the
+       caster collapses to rest); the press scale collapses to 1. The warm tint +
+       the rim + the STATIC cel STAMP persist (a still frame, never a frozen
+       mid-animation — the legibility floor). */
+    @media (prefers-reduced-motion: reduce) {
+        .glass-atom {
+            --motion-weight: 0;
+        }
+        .glass-atom:active:not([data-disabled]):not(:disabled) {
+            scale: 1;
+        }
+    }
+
+    /* ── prefers-contrast: more — the rim α floors UP (WCAG 1.4.11 non-text) ──
+       The keyed rim is the legibility CONTRACT (the cast is a supplement,
+       challenge #2 R6). Under more-contrast the atom floors its border ink so the
+       lit edge clears ≥3:1 vs the OPAQUE body, not only the glass body. */
+    @media (prefers-contrast: more) {
+        .glass-atom {
+            border-color: color-mix(in srgb, var(--foreground) 24%, transparent);
+        }
+    }
+
+    /* ════════════════════════════════════════════════════════════════════════
+       .badge-atom — the Badge consumer of the register (loud + quiet).
+
+       The LOUD register (the default opaque identity pill): the family signature
+       WITHOUT the glass body — the keyed warm rim (the defined edge, the
+       `border-transparent` melt fix), the non-uniform press-squish, the
+       universal-but-graded cel. The badge applies `.badge-atom` on EVERY variant
+       (the CVA base); `surface="glass"` ALSO applies `.glass-capsule .glass-atom`
+       for the quiet transmissive body.
+       ════════════════════════════════════════════════════════════════════════ */
+    .badge-atom {
+        position: relative;
+        /* AQ.W3 identity base — `scale`/`translate` longhands mint the stacking
+           context once so the press squash + the cast child compose cleanly. */
+        scale: 1;
+        translate: 0;
+        /* The DEFINED EDGE — the SHIPPED keyed two-stop rim (re-pointed by
+           `--glass-key`) as the pill's silhouette, so a sand `secondary` no longer
+           melts into a cream panel (the live `border-transparent` melt). It is a
+           box-shadow rim, NOT a `border` (the base CVA retired the `border`
+           keyword), so it adds zero layout box + reads warm. The press/lift scale
+           rides the punch register `× --motion-weight`. */
+        box-shadow: var(--glass-material-rim);
+        transition:
+            background var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            scale var(--duration-normal) var(--ease-cartoon-punch),
+            translate var(--duration-normal) var(--ease-cartoon-punch);
+    }
+
+    /* The non-uniform PRESS squash (widen X, compress Y — NOT a uniform shrink). */
+    .badge-atom:active:not([data-disabled]):not([aria-disabled='true']) {
+        scale: 1.04 0.94;
+    }
+
+    /* `outline` variant — the rim reads a louder warm-ink edge (it IS the edge). */
+    .badge-atom--outline {
+        box-shadow: var(--glass-material-rim);
+        border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
+    }
+
+    /* The LOUD cel stamp (opt-in, `data-cast`) — pushes the weight to 1 so the
+       punch reads at full amplitude + intensifies the inert child's cast. The
+       hairline rim-cast family floor is the rim above; this is the LOUD layered
+       offset (the flagship sticker stamp). */
+    .badge-atom[data-cast] {
+        --motion-weight: 1;
+    }
+    .badge-atom[data-cast] .cartoon-cast {
+        box-shadow: var(--shadow-cartoon-sm);
+    }
+    @media (hover: hover) {
+        .badge-atom[data-cast]:hover:not(:active) .cartoon-cast {
+            box-shadow: var(--shadow-cartoon-md);
+        }
+    }
+
+    /* The QUIET glass register — retire the opaque `bg-*` plate so the warm-glass
+       `.glass-capsule` body + the `.glass-atom` tinted `background-image` paint the
+       surface (no double-fill). The variant `bg-*` utility sets `background-color`;
+       this resets it to transparent so the capsule fill + the data-hue tint win.
+       The text color (the variant's `text-*`) is kept — the label still reads. */
+    .badge-atom--glass {
+        background-color: transparent !important;
+        /* The quiet capsule tints toward the variant's SEMANTIC hue via the shared
+           `--glass-fill-tint` axis (BE.W-TINTED-CHIP) — colored glass, never a
+           forked tint. The strength is a calm stop (the body ink stays legible).
+           A consumer overrides `--glass-fill-tint` per-instance for a bespoke hue. */
+        --glass-fill-strength: var(--badge-glass-strength, 16%);
+    }
+    /* Per-axis glass tint — the data hue the quiet body mixes toward. BI.W-SYNONYM-
+       RENAMES: the STYLE plate keys off `[data-variant]` (default/secondary/outline),
+       the SEMANTIC hue off `[data-tone]` (destructive/success/warning/info — a tone
+       is not a style). A set tone's rule follows the variant rule in source order, so
+       a `tone` capsule's hue wins the cascade — byte-identical to the former
+       per-`variant` tint map. `secondary`/`outline` are the calm/neutral routes. */
+    .badge-atom--glass[data-variant='default'] { --glass-fill-tint: var(--primary); }
+    .badge-atom--glass[data-variant='secondary'] { --glass-fill-tint: var(--glass-capsule-warm); }
+    .badge-atom--glass[data-variant='outline'] { --glass-fill-tint: var(--glass-capsule-warm); }
+    .badge-atom--glass[data-tone='destructive'] { --glass-fill-tint: var(--destructive); }
+    .badge-atom--glass[data-tone='success'] { --glass-fill-tint: var(--success); }
+    .badge-atom--glass[data-tone='warning'] { --glass-fill-tint: var(--warning); }
+    .badge-atom--glass[data-tone='info'] { --glass-fill-tint: var(--info); }
+
+    @media (prefers-reduced-motion: reduce) {
+        .badge-atom {
+            --motion-weight: 0;
+        }
+        .badge-atom:active:not([data-disabled]) {
+            scale: 1;
+        }
+    }
+    @media (prefers-contrast: more) {
+        .badge-atom {
+            border: 1px solid color-mix(in srgb, var(--foreground) 28%, transparent);
+        }
+    }
+}