@mkbabb/glass-ui 0.2.0 → 2.0.0

package/src/styles/utilities.css

@@ -1,13 +1,67 @@
 /* Shared utility classes */
 
-@layer components {
-    /* ── Popover/dropdown shared animation ── */
-    .popover-animate {
-        @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
-    }
+/* ── Popover/dropdown shared animation ──
+   `@utility` form (V.W3.T8 / A5 §5.9 standardisation): data-state animation
+   pair for popover-class containers (Popover, DropdownMenu, ContextMenu,
+   Tooltip, HoverCard, Select). Composed alongside `.slide-in-from-side`
+   for direction-keyed entries. */
+@utility popover-animate {
+    @apply data-[state=open]:animate-in data-[state=closed]:animate-out
+           data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
+           data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
+}
+
+/* ── Slide-in entry by side data-attr ──
+   `@utility` form (V.W3.T8). Side-keyed slide entry that pairs with
+   reka-ui's `data-side` (`top|right|bottom|left`). The animation
+   direction inverts each side so panels enter from outside the
+   anchor's edge. */
+@utility slide-in-from-side {
+    @apply data-[side=bottom]:slide-in-from-top-2
+           data-[side=left]:slide-in-from-right-2
+           data-[side=right]:slide-in-from-left-2
+           data-[side=top]:slide-in-from-bottom-2;
+}
 
-    .slide-in-from-side {
-        @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+@layer components {
+    /* ── Section description (V.W3.T7) ──────────────────────────────
+       Canonical recipe for the `<Section>` primitive's description
+       paragraph. Composes the body type + muted-foreground color in
+       one declaration so consumers don't fight twMerge's
+       typography-class collapse. */
+    .section-description {
+        font-size: var(--type-body);
+        color: var(--muted-foreground);
+        line-height: 1.5;
+    }
+
+    /* ── Labeled-field label (V.W3.T5 / A5 §5.5) ────────────────────
+       Canonical recipe for `<LabeledField>`'s tooltip-wrapped label
+       layer. Four sibling wrappers (LabeledInput, LabeledSelect,
+       LabeledSlider, LabeledSwitch) used to repeat this literal across
+       their templates; promoting it to a utility lets the parent SFC
+       own one canonical declaration. */
+    .labeled-field-label {
+        font-family: var(--font-display);
+        font-size: var(--type-body);
+        color: var(--muted-foreground);
+        cursor: help;
+    }
+
+    /* ── Popover-content recipe (V.W3.T3 / A5 §3.2) ─────────────────
+       Canonical recipe for floating-tier portal containers
+       (PopoverContent, DropdownMenuContent, SelectContent, etc.).
+       Covers radius + outline + popover-foreground; consumers compose
+       this with `.glass-floating` (bg + blur + border + shadow), with
+       `.popover-animate` (data-state animation), and with the per-host
+       z-rung. The floating-tier shadow comes from
+       `--glass-shadow-floating` via `.glass-floating`, replacing the
+       `shadow-md`/`shadow-lg` literals that bypassed the canonical
+       cascade. */
+    .popover-content {
+        border-radius: var(--radius-panel);
+        color: var(--popover-foreground);
+        outline: none;
     }
 
     /* ── Scrollbar ── */
@@ -30,34 +84,13 @@
         box-shadow: var(--focus-ring-shadow);
     }
 
-    /* ── Button press/interactive states ── */
-    .btn-press {
-        transition: transform var(--duration-fast) var(--ease-standard);
-    }
-    .btn-press:active {
-        transform: scale(var(--scale-press-btn));
-    }
-    .btn-press:disabled {
-        opacity: 0.5;
-        pointer-events: none;
-    }
-
-    .btn-interactive {
-        transition: all var(--duration-fast) var(--ease-standard);
-    }
-    .btn-interactive:hover {
-        transform: scale(var(--scale-hover));
-    }
-    .btn-interactive:active {
-        transform: scale(var(--scale-press));
-    }
-    .btn-interactive:disabled {
-        opacity: 0.5;
-        pointer-events: none;
-    }
-    .btn-interactive:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
+    /* ── Hairline-accent — 0.5px catch-light + under-shadow pair ──
+       Composes the canonical `--border-hairline` token (tokens.css §
+       Glass-decorative). Adopt at any surface that wants the canonical
+       2-stop hairline (dock surfaces, instrument-chassis). Auto-mirrors
+       in dark via the .dark token override. */
+    .hairline-accent {
+        box-shadow: var(--border-hairline);
     }
 
     /* ── Interactive item (hover bg + focus ring + active scale) ── */
@@ -81,9 +114,38 @@
     .interactive-item:active {
         transform: scale(0.98);
     }
-    .interactive-item:disabled {
+    .interactive-item:disabled,
+    .interactive-item[data-disabled] {
         pointer-events: none;
-        opacity: 0.5;
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+    }
+
+    /* ── Tap-squish — universal press-state choreography ──
+       AL-W10 SLIM (X6 §M-1 + Y7 §3 + DESIGN.md §L3). I compose this
+       class onto every interactive surface that wants the iOS tap-
+       squish idiom; the press scales to `--scale-press` (0.96, the
+       canonical iOS `.regular` control rung) and the spring carries
+       the return via `--spring-snappy` (the §L3 release-spring
+       contract). I keep this as a single canonical rung — NOT a
+       3-rung ladder. The outliers I leave alone are button `0.97` and
+       dock control `0.92`, which consume their own scale tokens
+       directly.
+
+       Under PRM I retire the press transform entirely and lean on the
+       consumer's own hover/active bg-tint cascade to acknowledge the
+       press. */
+    .tap-squish {
+        transition: transform var(--duration-fast) var(--spring-snappy);
+        transform-origin: center center;
+    }
+    .tap-squish:active {
+        transform: scale(var(--scale-press));
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .tap-squish:active {
+            transform: none;
+        }
     }
 
     /* ── Status dot indicator ── */
@@ -98,64 +160,6 @@
             background var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
     }
-    .status-dot--active {
-        background: var(--color-status-active, hsl(142 71% 45%));
-    }
-    .status-dot--paused {
-        background: var(--color-status-paused, hsl(48 96% 53%));
-    }
-    .status-dot--idle {
-        background: var(--color-status-idle, var(--muted-foreground));
-    }
-
-    /* ── Paper texture backgrounds ── */
-    .bg-paper-clean {
-        background-image: var(--paper-clean-texture);
-        background-repeat: repeat;
-        background-size: var(--paper-texture-size);
-        background-blend-mode: multiply;
-    }
-    .bg-paper-aged {
-        background-image: var(--paper-aged-texture);
-        background-repeat: repeat;
-        background-size: var(--paper-texture-size);
-        background-blend-mode: multiply;
-    }
-
-    /* ── Rainbow text ── */
-    .rainbow-text {
-        background: linear-gradient(
-            90deg,
-            hsl(0 85% 70%),
-            hsl(30 85% 65%),
-            hsl(60 85% 60%),
-            hsl(120 65% 55%),
-            hsl(200 85% 60%),
-            hsl(260 75% 65%),
-            hsl(320 80% 65%)
-        );
-        background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }
-
-    /* ── Rainbow border ── */
-    .rainbow-border {
-        background:
-            linear-gradient(var(--background), var(--background)) padding-box,
-            linear-gradient(
-                    135deg,
-                    hsl(0 85% 70%),
-                    hsl(60 85% 60%),
-                    hsl(120 65% 55%),
-                    hsl(200 85% 60%),
-                    hsl(260 75% 65%),
-                    hsl(320 80% 65%),
-                    hsl(0 85% 70%)
-                )
-                border-box;
-        border: 2px solid transparent;
-    }
-
     /* ── Depth text (layered shadow with customizable colors) ── */
     .depth-text {
         --depth-color-primary: var(--primary);
@@ -168,20 +172,10 @@
             3px 3px 0 var(--depth-color-shadow),
             4px 4px 0 var(--depth-color-shadow),
             5px 5px 0 var(--depth-color-shadow),
-            5px 5px 1px rgba(0, 0, 0, 0.1),
-            2px 2px 2px rgba(0, 0, 0, 0.2),
-            4px 4px 5px rgba(0, 0, 0, 0.25),
-            6px 6px 10px rgba(0, 0, 0, 0.15);
-    }
-
-    /* ── Touch gate (iOS Safari) ── */
-    .touch-gate-target {
-        outline: 2px solid transparent;
-        outline-offset: -2px;
-        transition: outline-color var(--duration-fast) var(--ease-standard);
-    }
-    .touch-gate-active {
-        outline-color: color-mix(in srgb, var(--ring) 25%, transparent);
+            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);
     }
 
     /* ── 3D preserve ── */
@@ -197,38 +191,63 @@
         font-size: max(1rem, 1em);
     }
 
-    /* ── Scroll fade mask ── */
+    /* ── Scroll fade masks ── */
     .scroll-fade-mask {
         mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
         -webkit-mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
     }
 
-    /* ── Shimmer text effects ── */
-    .gold-shimmer {
-        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
-        background-size: 250% 100%;
-        background-clip: text;
-        -webkit-background-clip: text;
-        color: transparent;
-        animation: shimmer 5s linear infinite;
+    .scroll-fade-top {
+        mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width));
+        -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width));
     }
 
-    .blue-shimmer {
-        background: linear-gradient(90deg, #1e40af, #60a5fa, #3b82f6, #60a5fa, #1e40af);
-        background-size: 200% 100%;
-        background-clip: text;
-        -webkit-background-clip: text;
-        color: transparent;
-        animation: shimmer 3s linear infinite;
+    .scroll-fade-bottom {
+        mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-fade-width)), transparent);
+        -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-fade-width)), transparent);
+    }
+
+    .scroll-fade-y {
+        mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
+        -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
+    }
+
+    /* ── Card scroll-timeline host (AI.W1-α) ───────────────────────────────
+       Canonical scroll-overflow host that emits the `--card-scroll` named
+       scroll-timeline consumed by `<CardHeader shrink>`. Apply to the
+       scroll-overflow ancestor (typically the `<Card>` itself OR a wrapper
+       inside it that carries `overflow-y: auto`).
+
+       `contain: layout style paint` isolates the named timeline so child
+       animations respond to THIS host's scroll only — not to portal-
+       triggered layout shifts in ancestor containers (the load-bearing
+       isolation guarantee the value.js `PaneHeader.vue:18-29` comment
+       called out and the AI.W1 spec §1.2 ratified as canon).
+
+       Disambiguated from `.scroll-fade-*` (mask-image fade gradient at
+       the container's leading/trailing edge) — `.card-scroll-host` does
+       NOT paint any visual; it only emits the timeline. */
+    .card-scroll-host {
+        contain: layout style paint;
+        scroll-timeline: --card-scroll block;
     }
 
-    .gold-shimmer-subtle {
-        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold-dark));
-        background-size: 300% 100%;
+    /* ── Shimmer text effects ──
+       The text-fill + background-clip composition is load-bearing visual
+       (the gold gradient itself); only the `animation:` line is wrapped in
+       the PRM no-preference bracket so PRM users see the static gradient
+       without the slide animation. */
+    .gold-shimmer {
+        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
+        background-size: 250% 100%;
         background-clip: text;
         -webkit-background-clip: text;
         color: transparent;
-        animation: shimmer 8s linear infinite;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+        .gold-shimmer {
+            animation: gold-shimmer-slide var(--duration-shimmer) linear infinite;
+        }
     }
 
     /* ── Keyboard key ── */
@@ -248,24 +267,172 @@
         line-height: 1;
     }
 
-    /* ── Code badge ── */
-    .code-badge {
-        font-family: var(--font-mono, monospace);
-        font-size: 0.75rem;
-        border-radius: var(--radius-md);
-        border: 1px solid var(--border);
-        padding: 0.125rem 0.375rem;
+    /* ── Metric badge pill — compact glass label for numeric telemetry ── */
+    .metric-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: var(--metric-badge-gap, 0.125rem);
+        max-width: var(--metric-badge-max-width, 8rem);
+        min-height: var(--metric-badge-min-height, 1.5rem);
+        padding:
+            var(--metric-badge-padding-block, 0.125rem)
+            var(--metric-badge-padding-inline, 0.5rem);
+        overflow: hidden;
+        flex-shrink: 0;
+        line-height: 1;
+        /* Canonical 5-tier glass surface: the `quiet` rung paints the badge
+           plate at the `--glass-bg-quiet` α (0.50) with `--glass-blur-quiet`.
+           Reduced-transparency / no-backdrop-filter fallbacks propagate
+           through the lazy custom-property resolution that `glass.css`
+           sets up — the badge no longer bypasses the canon.
+           (Per audit U.W0.C-c §7.2.) */
+        border: 1px solid var(--metric-badge-border, var(--glass-border-quiet));
+        border-radius: var(--metric-badge-radius, var(--radius-badge, var(--radius-pill)));
+        background: var(--metric-badge-bg, var(--glass-bg-quiet));
+        backdrop-filter: var(--metric-badge-blur, var(--glass-blur-quiet));
+        box-shadow: var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight));
+        transition:
+            background var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            transform var(--duration-fast) var(--ease-standard);
+    }
+
+    .metric-badge > span {
+        line-height: 1;
+    }
+
+    .metric-badge:hover {
+        /* Hover lifts to the `resting` rung — one step up the canonical
+           ladder (audit U.W0.C-c §7.2). */
+        border-color: var(--metric-badge-hover-border, var(--glass-border-resting));
+        background: var(--metric-badge-hover-bg, var(--glass-bg-resting));
+        box-shadow: var(--metric-badge-hover-shadow, 0 2px 10px color-mix(in srgb, var(--shadow-color) 12%, transparent), var(--glass-highlight));
+        transform: scale(var(--metric-badge-hover-scale, 1.02));
+    }
+
+    .metric-badge:active {
+        transform: scale(var(--metric-badge-press-scale, 0.96));
+    }
+
+    .metric-badge:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring-shadow);
+    }
+
+    /* Phase-finish catch-light — the quieter cousin of --glass-specular.
+       Speedtest toggles `data-just-resolved="true"` on a metric pill once
+       its phase completes; the badge briefly carries a 1px catch-light
+       streak at the top edge. Reads as the pill catching club lighting at
+       the moment its result resolves. */
+    .metric-badge[data-just-resolved="true"] {
+        box-shadow:
+            inset 0 1px 0 0 rgb(255 255 255 / 0.18),
+            var(--metric-badge-shadow,
+                0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent),
+                var(--glass-highlight));
+    }
+
+    /* ── Label-bearing variants ───────────────────────────────────────────
+       When the badge carries a `labelPosition`, the prose-style annotation
+       slot precedes the amount. Inline keeps the row baseline-aligned;
+       stacked breaks to a column with items flush-left. The label slot
+       carries its own tracked uppercase rules; the badge's max-width
+       relaxes so the wider register fits. */
+    .metric-badge--label-inline {
+        flex-direction: row;
+        align-items: baseline;
+        justify-content: flex-start;
+        gap: var(--metric-badge-label-gap, 0.375rem);
+        max-width: var(--metric-badge-label-max-width, none);
+        text-align: left;
+    }
+
+    .metric-badge--label-stacked {
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        gap: var(--metric-badge-label-gap-stacked, 0.0625rem);
+        max-width: var(--metric-badge-label-max-width, none);
+        text-align: left;
+        min-height: var(--metric-badge-min-height-stacked, 2.625rem);
+        padding-block: var(--metric-badge-padding-block-stacked, 0.375rem);
+    }
+
+    /* T.W2.T2 — stacked variant pairs amount + unit on a single row (row 2)
+       below the label (row 1). The `.metric-badge__row` wrapper baseline-
+       aligns the value and unit so the quantity reads as one phrase, not as
+       three siblings split across three rows (the pre-T behaviour the
+       audit B-spec §2.1 flagged). */
+    .metric-badge--label-stacked .metric-badge__row {
+        display: inline-flex;
+        align-items: baseline;
+        gap: var(--metric-badge-row-gap-stacked, 0.25rem);
     }
 
-    /* ── Input bar — glassmorphic inline input container ── */
+    /* T.W2.T3 — MetricPill density modifiers. The pill is a thin composition
+       over MetricBadge with `labelPosition="stacked"` defaults; the density
+       knob adjusts block padding + horizontal padding so the pill reads at
+       the right register for its dock host. `spacious` is the default
+       (chassis-strip rhythm), `comfortable` keeps the tighter compact
+       register for densely-packed dock clusters. The selectors compose with
+       `.metric-badge--label-stacked` so the inline ladder remains untouched
+       — these are stacked-only refinements. */
+    .metric-pill[data-density="spacious"].metric-badge--label-stacked {
+        --metric-badge-padding-block-stacked: 0.5rem;
+        --metric-badge-padding-inline: 0.75rem;
+    }
+
+    .metric-pill[data-density="comfortable"].metric-badge--label-stacked {
+        --metric-badge-padding-block-stacked: 0.25rem;
+        --metric-badge-padding-inline: 0.5rem;
+    }
+
+    .metric-badge__label {
+        letter-spacing: 0.18em;
+        line-height: 1;
+    }
+
+    /* Dual-slot default visibility (R2-spec):
+       The library renders both `--full` and `--abbr` siblings whenever both
+       props are passed. Default identity is the full label; the abbreviation
+       sits hidden until consumer container-query CSS flips it. The adjacent-
+       sibling selector preserves single-slot back-compat: when a consumer
+       passes only `abbreviation` (no `--full` sibling rendered), the abbr
+       reads at default visibility. */
+    .metric-badge__label--full + .metric-badge__label--abbr {
+        display: none;
+    }
+
+    /* sm-tier label tracking — tighter than the md/lg/xl 0.18em rung so the
+       compact register reads as a tighter annotation against the smaller
+       glyph rise. R2-spec D-Rec-2 (audit-D). */
+    .metric-badge[data-size="sm"] .metric-badge__label {
+        letter-spacing: 0.1em;
+    }
+
+    /* Q.W3 Lane A — the `.glass-dock[data-density="…"]` density rungs that
+       set `--dock-tab-h` + `--dock-label-size` were consolidated into
+       `dock.css` (their canonical dock-styles home). They formerly lived
+       here and resolved only by the index.css import order (utilities.css
+       after dock.css); the cascade-order dependency is now gone. */
+
+    /* ── Input bar — glassmorphic inline input container ──
+       Composes the canonical `floating` glass rung (--glass-bg-floating
+       ≈ 80% α, --glass-blur-floating ≈ 24px) — same surface read as the
+       prior raw composition but routed through the canonical 5-tier
+       ladder so PRT / no-backdrop-filter fallbacks propagate cleanly.
+       (Per audit U.W0.C-c §7.2.) */
     .input-bar {
         display: flex;
         align-items: center;
         gap: 0.5rem;
         border-radius: var(--radius-2xl);
-        border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
-        background: color-mix(in srgb, var(--card) 80%, transparent);
-        backdrop-filter: blur(24px);
+        border: 1px solid var(--glass-border-floating);
+        background: var(--glass-bg-floating);
+        backdrop-filter: var(--glass-blur-floating);
 
         padding: 0 0.75rem;
         height: 2.25rem;
@@ -276,7 +443,7 @@
             border-color var(--duration-fast) var(--ease-standard);
     }
     .input-bar:focus-within {
-        box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 40%, transparent);
+        box-shadow: var(--focus-ring-shadow);
         border-color: var(--border);
     }
 
@@ -293,24 +460,13 @@
         color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
     }
 
-    /* ── Dashed well — muted container for adding/selecting items ── */
-    .dashed-well {
-        max-width: var(--max-width-input);
-        border-radius: var(--radius-2xl);
-        border: 2px dashed color-mix(in srgb, var(--primary) 30%, transparent);
-        background: color-mix(in srgb, var(--primary) 5%, transparent);
-        padding: 0.75rem;
-        display: grid;
-        gap: 0.5rem;
-    }
-
     /* ── Hover lift — translate-y + shadow on hover (3 levels) ── */
     .hover-lift {
         transition-property: transform, box-shadow;
         transition-duration: var(--duration-normal);
-        transition-timing-function: ease;
+        transition-timing-function: var(--ease-standard);
     }
-    .hover-lift:hover {
+    .hover-lift:hover:not(:disabled):not([aria-disabled='true']) {
         transform: translateY(var(--lift-sm));
         box-shadow: var(--shadow-md);
     }
@@ -318,9 +474,9 @@
     .hover-lift-md {
         transition-property: transform, box-shadow;
         transition-duration: var(--duration-normal);
-        transition-timing-function: ease;
+        transition-timing-function: var(--ease-standard);
     }
-    .hover-lift-md:hover {
+    .hover-lift-md:hover:not(:disabled):not([aria-disabled='true']) {
         transform: translateY(var(--lift-md));
         box-shadow: var(--shadow-md);
     }
@@ -328,125 +484,41 @@
     .hover-lift-lg {
         transition-property: transform, box-shadow;
         transition-duration: var(--duration-normal);
-        transition-timing-function: ease;
+        transition-timing-function: var(--ease-standard);
     }
-    .hover-lift-lg:hover {
+    .hover-lift-lg:hover:not(:disabled):not([aria-disabled='true']) {
         transform: translateY(var(--lift-lg));
         box-shadow: var(--shadow-lg);
     }
 
-    /* ── Hover shadow lift — shadow-only hover ── */
-    .hover-shadow-lift {
-        transition-property: box-shadow;
-        transition-duration: var(--duration-normal);
-        transition-timing-function: var(--spring-smooth);
-    }
-    .hover-shadow-lift:hover {
-        box-shadow: var(--shadow-xl);
-    }
-
-    /* ── Glass overlay — dark backdrop ── */
-    .glass-overlay {
-        background: rgb(0 0 0 / 0.6);
-        backdrop-filter: blur(4px);
-
-    }
-
-    /* ── Cartoon shadows — multi-layer offset shadow + border + translateY ── */
+    /* ── Cartoon shadows — token-driven box-shadow + bezel border + lift ──
+       The box-shadow stack reads from the canonical
+       `--shadow-cartoon-{sm,md,lg}` rungs declared at tokens.css:304-312.
+       Those rungs use `color-mix(in srgb, var(--shadow-color) N%, transparent)`
+       so dark-mode flips the cast through `--shadow-color` automatically.
+       The 2px bezel border + translateY are the cartoon-stamp geometry
+       atop the canonical depth — kept here so a single class delivers
+       the whole cartoon read.
+       (Per audit U.W0.C-c §1.3 / Union 1 — collapses the dual-system
+       drift onto the token-driven shadow.) */
     .shadow-cartoon-sm {
-        box-shadow:
-            -3px 2px 1px var(--shadow-cartoon-color),
-            0 3px 1px var(--shadow-cartoon-color),
-            -3px 3px 1px var(--shadow-cartoon-color-soft);
+        box-shadow: var(--shadow-cartoon-sm);
         border: 2px solid var(--border);
         transform: translateY(-1px);
     }
 
     .shadow-cartoon-md {
-        box-shadow:
-            -4px 3px 1px var(--shadow-cartoon-color),
-            0 4px 1px var(--shadow-cartoon-color),
-            -4px 4px 2px var(--shadow-cartoon-color-soft);
+        box-shadow: var(--shadow-cartoon-md);
         border: 2px solid var(--border);
         transform: translateY(-1px);
     }
 
     .shadow-cartoon-lg {
-        box-shadow:
-            -6px 4px 1px var(--shadow-cartoon-color),
-            0 6px 1px var(--shadow-cartoon-color),
-            -6px 6px 2px var(--shadow-cartoon-color-soft);
+        box-shadow: var(--shadow-cartoon-lg);
         border: 2px solid var(--border);
         transform: translateY(-2px);
     }
 
-    .shadow-cartoon-sm-hover {
-        box-shadow:
-            -4px 3px 1px var(--shadow-cartoon-color-hover),
-            0 4px 1px var(--shadow-cartoon-color-hover),
-            -4px 4px 2px var(--shadow-cartoon-color-hover-soft);
-        border: 2px solid var(--border);
-        transform: translateY(-2px);
-    }
-
-    /* ── Shimmer text — background gradient sweep over text ── */
-    .shimmer-text {
-        background: linear-gradient(
-            90deg,
-            currentColor 0%,
-            currentColor 40%,
-            rgba(255, 255, 255, 0.8) 50%,
-            currentColor 60%,
-            currentColor 100%
-        );
-        background-size: 200% 100%;
-        background-clip: text;
-        -webkit-background-clip: text;
-        animation: shimmer-sweep var(--shimmer-duration, 2000ms) ease-in-out infinite;
-    }
-
-    .dark .shimmer-text {
-        background: linear-gradient(
-            90deg,
-            currentColor 0%,
-            currentColor 40%,
-            rgba(255, 255, 255, 0.9) 50%,
-            currentColor 60%,
-            currentColor 100%
-        );
-        background-size: 200% 100%;
-        background-clip: text;
-        -webkit-background-clip: text;
-        animation: shimmer-sweep var(--shimmer-duration, 2000ms) ease-in-out infinite;
-    }
-
-    /* ── Rainbow gradients ── */
-    .rainbow-pastel {
-        background: linear-gradient(to right, var(--rainbow-pastel-red), var(--rainbow-pastel-orange), var(--rainbow-pastel-yellow), var(--rainbow-pastel-green), var(--rainbow-pastel-blue), var(--rainbow-pastel-indigo), var(--rainbow-pastel-violet));
-    }
-    .rainbow-vivid {
-        background: linear-gradient(to right, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-indigo), var(--rainbow-violet));
-    }
-
-    /* ── Progress gradient (rainbow) ── */
-    .progress-gradient {
-        background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #06b6d0, #3b82f6, #9333ea);
-    }
-
-    /* ── Glassmorphic checkbox ── */
-    .checkbox-glass {
-        height: 1.25rem;
-        width: 1.25rem;
-        border-radius: var(--radius-lg);
-        border: 2px solid color-mix(in srgb, var(--border) 60%, transparent);
-        backdrop-filter: blur(4px);
-
-        box-shadow: var(--shadow-sm);
-        transition-property: background-color, border-color, transform, box-shadow;
-        transition-duration: var(--duration-normal);
-        transition-timing-function: var(--spring-snappy);
-    }
-
     /* ── Divider utilities ── */
     .divider-h {
         height: 2px;
@@ -470,208 +542,332 @@
         );
     }
 
-    .divider-v {
-        width: 2px;
-        background: linear-gradient(
-            to bottom,
-            transparent 3%,
-            var(--border) 15%,
-            var(--border) 85%,
-            transparent 97%
-        );
+}
+
+/* ── Hover scale (O.W6 Lane C) ──
+   Canonical hover-transform utility consuming the `--scale-hover` token
+   (tokens.css §11). Promoted from consumer-side `hover:scale-105`
+   recipe — 13 sites in keyframes.js demo + 9 sites in words/frontend
+   per O11/d L3 + O11/a I4. Single-token recipe (no ladder); the dual
+   `--scale-press-{xs..lg}` ladder discussion is the press-axis cohort
+   (O-N-7), not hover. Consumers reach the utility via
+   `class="scale-on-hover"`; transition + easing bind to the canonical
+   `--duration-fast` + `--ease-standard` tokens. */
+@utility scale-on-hover {
+    @apply transition-transform duration-fast ease-standard;
+
+    &:hover {
+        transform: scale(var(--scale-hover));
     }
+}
 
-    /* ── Shake error ── */
-    .shake-error {
-        animation: shake 0.5s ease-in-out;
+/* ── Sheet/drawer slide-out animation grammar ──
+   Mirror of `.popover-animate` for sheet/drawer panels. Pairs with
+   `slide-in-from-{top,right,bottom,left}-N` to compose side-keyed entries.
+   The open path uses --duration-panel (slow, deliberate); the close path
+   uses --duration-fast so dismiss feels snappy. R5 vocab.γ gap row 6;
+   consumed by W2.A sheet/drawer migration. */
+@utility sheet-animate {
+    @apply data-[state=open]:animate-in data-[state=closed]:animate-out
+           data-[state=open]:fade-in data-[state=closed]:fade-out
+           data-[state=open]:duration-[var(--duration-panel)]
+           data-[state=closed]:duration-[var(--duration-fast)];
+}
+
+/* ── Audacious primary CTA recipe (K.W6 HEADLINE) ────────────────────
+   Lifted from `dock.css` `.dock-tab-button[data-tier="primary"]` per
+   K.W6 spec §3 (Option B — drop phase-tinting from the canonical
+   variant; phase-tint stays as a dock-local extension). Composes three
+   at-rest marks (top-highlight via --glass-highlight, bottom under-shadow
+   via --border-hairline, baseline glass via --card surface) with three
+   disco accents on hover (specular swap via --glass-specular, sparkle
+   sweep via the ::after star, disco-grain via --paper-clean-texture
+   blended with a --primary radial). Reservation: disco fires on hover
+   only — at rest the button reads as a Vignelli-restrained composed
+   glass surface.
+
+   Pair with `bg-primary text-primary-foreground` for the canonical
+   Button variant; the utility owns the texture/highlight/sparkle
+   composition only. */
+@utility btn-audacious {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    border: 1px solid var(--glass-border-quiet);
+    box-shadow:
+        var(--border-hairline),
+        var(--glass-highlight);
+    transition:
+        background var(--duration-fast) var(--ease-standard),
+        color var(--duration-fast) var(--ease-standard),
+        transform var(--duration-fast) var(--ease-standard),
+        box-shadow var(--duration-fast) var(--ease-standard),
+        --ripple-radius var(--motion-duration-ripple, 340ms) var(--ease-out-expo);
+
+    /* Hover composition: paper-grain texture overlaid on a soft
+       --primary radial, with the specular catch-light replacing the
+       resting hairline highlight. The radial uses --primary at 18%
+       — same alpha rung the dock primary tier consumes for phase
+       tinting, just bound to the canonical CTA color instead. */
+    &:hover:not(:disabled) {
+        background-image:
+            var(--paper-clean-texture),
+            radial-gradient(
+                ellipse at 30% 30%,
+                color-mix(in srgb, var(--primary) 18%, transparent),
+                transparent 70%
+            );
+        background-blend-mode: overlay, normal;
+        background-size: var(--paper-texture-size), auto;
+        box-shadow:
+            var(--glass-specular),
+            0 0.5px 0 0 rgb(0 0 0 / 0.06);
+    }
+
+    /* AI.W4-M.2 (Q5 — G-AI-D27 ratified) — press-ripple via a typed
+       `--ripple-radius` length custom property. The `::before`
+       element paints a radial gradient whose stop radius equals the
+       typed length; the `:active` rule sets the length to the cap
+       (`--ripple-radius-max`, 12rem), and the host's transition
+       (above) interpolates the radius via the @property registration
+       (tokens.css §18). Release returns the length to its 0px initial
+       value and the ripple retires. The ripple paints at z-index 0
+       (above the host's background, below the slot content which sits
+       in the default 0 stacking context but with text inheriting the
+       slot's foreground colour). */
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        z-index: 0;
+        border-radius: inherit;
+        background: radial-gradient(
+            circle at center,
+            color-mix(in srgb, var(--primary-foreground, hsl(0 0% 100%)) 35%, transparent) 0,
+            color-mix(in srgb, var(--primary-foreground, hsl(0 0% 100%)) 18%, transparent)
+                calc(var(--ripple-radius, 0px) * 0.55),
+            transparent var(--ripple-radius, 0px)
+        );
+        transition: inherit;
+        will-change: background;
     }
 
-    /* ── Input focus ring ── */
-    .input-focus {
-        outline: none;
-        transition-property: box-shadow;
-        transition-duration: var(--duration-normal);
-        transition-timing-function: var(--spring-smooth);
+    &:active:not(:disabled) {
+        --ripple-radius: var(--ripple-radius-max, 12rem);
     }
-    .input-focus:focus-visible {
-        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
-        outline: none;
+
+    /* Sparkle glyph — hidden at rest, animated on hover. The star
+       sweeps diagonally from top-left to bottom-right per the canonical
+       sparkle-sweep keyframe (animations.css). */
+    &::after {
+        content: "✦";
+        position: absolute;
+        top: 0.25rem;
+        left: 0.5rem;
+        color: hsl(0 0% 100% / 0.7);
+        font-size: 0.75rem;
+        line-height: 1;
+        pointer-events: none;
+        opacity: 0;
+        will-change: transform, opacity;
+        z-index: 1;
     }
 
-    /* ── Active scale — press feedback ── */
-    .active-scale:active {
-        transform: scale(0.97);
-        transition-property: transform;
-        transition-duration: var(--duration-fast);
-    }
-
-    /* ── Stagger children — cascading entrance for list/grid items ── */
-    .stagger-children > * {
-        animation: fade-in var(--duration-normal) var(--spring-smooth, ease) backwards;
-        animation-delay: calc(var(--stagger-index, 0) * 50ms);
-    }
-    .stagger-children > *:nth-child(1) { --stagger-index: 0; }
-    .stagger-children > *:nth-child(2) { --stagger-index: 1; }
-    .stagger-children > *:nth-child(3) { --stagger-index: 2; }
-    .stagger-children > *:nth-child(4) { --stagger-index: 3; }
-    .stagger-children > *:nth-child(5) { --stagger-index: 4; }
-    .stagger-children > *:nth-child(6) { --stagger-index: 5; }
-    .stagger-children > *:nth-child(7) { --stagger-index: 6; }
-    .stagger-children > *:nth-child(8) { --stagger-index: 7; }
-    .stagger-children > *:nth-child(9) { --stagger-index: 8; }
-    .stagger-children > *:nth-child(10) { --stagger-index: 9; }
-    .stagger-children > *:nth-child(11) { --stagger-index: 10; }
-    .stagger-children > *:nth-child(12) { --stagger-index: 11; }
-
-    /* ── Scroll reveal — animate on viewport entry (zero JS) ── */
-    @supports (animation-timeline: view()) {
-        /* One-shot: fades in during entry, stays visible */
-        .scroll-reveal {
-            animation: fade-in linear both;
-            animation-timeline: view();
-            animation-range: entry 0% entry 100%;
+    @media (prefers-reduced-motion: no-preference) {
+        &:hover::after {
+            animation: sparkle-sweep var(--duration-sparkle) var(--ease-out-expo);
         }
+    }
 
-        /* Reversible: fades in on scroll down, fades out on scroll back up */
-        .scroll-reveal-reverse {
-            animation: fade-in linear both;
-            animation-timeline: view();
-            animation-range: entry 0% cover 50%;
+    /* PRM bracket — the press-ripple retires; the press still reads
+       via the audacious recipe's transform/scale beat (the ripple is
+       affirmation atop affirmation). */
+    @media (prefers-reduced-motion: reduce) {
+        transition:
+            background var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            transform var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+
+        &:active:not(:disabled) {
+            --ripple-radius: 0px;
         }
     }
+}
 
-    /* ── Letter spacing hover spread ── */
-    .text-hover-spread {
-        letter-spacing: var(--tracking-tight);
-        transition: letter-spacing var(--duration-normal) var(--spring-smooth, ease);
-    }
-    .text-hover-spread:hover {
-        letter-spacing: var(--tracking-wide);
-    }
+/* ── Gold CTA shimmer modifier — AN.R0 D9 ───────────────────────────────
+   `btn-audacious-gold` extends `btn-audacious` with a gold sweep shimmer
+   on hover. Pair as `btn-audacious btn-audacious-gold` (or use the Button
+   `variant="gold-audacious"` which composes both). The hover shimmer is a
+   translucent linear-gradient sweep (low alpha — tasteful, not garish)
+   that slides left-to-right via the existing `gold-shimmer-slide` keyframe
+   (animations.css). The gold gradient uses the canonical `--color-gold-*`
+   token triad (tokens.css §13).
+
+   Design register:
+   • PRM no-preference: shimmer sweeps continuously at `--duration-shimmer`
+     rate; the sparkle-sweep (from btn-audacious) coexists on hover.
+   • PRM reduce: static gold tint shows on hover; no animation.
+   • The gold shimmer is a background-image layer ABOVE the existing
+     btn-audacious paper-grain + primary-radial layers, blended with
+     `overlay` so the glass substrate reads through at partial opacity.
+   • The `::before` ripple and `::after` sparkle from btn-audacious are
+     unchanged; this modifier only retunes the hover background layers.
+   • Consumer applies: `<Button variant="gold-audacious">Next →</Button>` */
+@utility btn-audacious-gold {
+    /* At rest: a faint warm gold tint over the glass surface reads as "warm
+       glass" without announcing the hover state prematurely. */
+    background-image:
+        linear-gradient(
+            135deg,
+            color-mix(in srgb, var(--color-gold) 8%, transparent),
+            color-mix(in srgb, var(--color-gold-light) 5%, transparent) 50%,
+            color-mix(in srgb, var(--color-gold) 8%, transparent)
+        );
 
-    /* ── Disabled base state ── */
-    .disabled-base:disabled {
-        pointer-events: none;
-        cursor: not-allowed;
-        opacity: 0.5;
+    /* Hover: replace the audacious primary-radial with a gold sweep shimmer.
+       The shimmer gradient rides above the paper-grain texture; the `overlay`
+       blend-mode concentrates the gold on bright grain facets and recedes on
+       dark ones — the same lens metaphor as the btn-audacious primary radial. */
+    &:hover:not(:disabled) {
+        background-image:
+            var(--paper-clean-texture),
+            linear-gradient(
+                90deg,
+                transparent 0%,
+                color-mix(in srgb, var(--color-gold-dark) 22%, transparent) 25%,
+                color-mix(in srgb, var(--color-gold-light) 30%, transparent) 50%,
+                color-mix(in srgb, var(--color-gold-dark) 22%, transparent) 75%,
+                transparent 100%
+            );
+        background-blend-mode: overlay, normal;
+        background-size: var(--paper-texture-size), 250% 100%;
+        background-position: 0 0, 100% 0;
+        box-shadow:
+            var(--glass-specular),
+            0 0 0 1px color-mix(in srgb, var(--color-gold) 30%, transparent),
+            0 0.5px 0 0 rgb(0 0 0 / 0.06);
     }
 
-    /* ── Card hover transitions ── */
-    .card-hover {
-        transition-property: color, background-color, border-color, box-shadow;
-        transition-duration: var(--duration-normal);
-        transition-timing-function: ease;
-    }
-    .card-hover:hover {
-        border-color: color-mix(in srgb, var(--border) 50%, transparent);
-        background-color: color-mix(in srgb, var(--muted) 30%, transparent);
+    @media (prefers-reduced-motion: no-preference) {
+        &:hover:not(:disabled) {
+            animation: btn-gold-bg-sweep var(--duration-shimmer) linear infinite;
+        }
     }
+}
 
-    .card-hover-interactive {
-        transition-property: color, background-color, border-color, box-shadow;
-        transition-duration: var(--duration-normal);
-        transition-timing-function: ease;
-    }
-    .card-hover-interactive:hover {
-        border-color: color-mix(in srgb, var(--primary) 30%, transparent);
-        background-color: color-mix(in srgb, var(--primary) 5%, transparent);
-    }
+/* Background-position sweep for the gold CTA hover shimmer.
+   Distinct from `gold-shimmer-slide` (which animates background-position for
+   a text-clip gradient). This variant sweeps the `background-position` of the
+   250% wide gradient across the button's bounding box. */
+@keyframes btn-gold-bg-sweep {
+    0%   { background-position: 0 0, 100% 0; }
+    100% { background-position: 0 0, -100% 0; }
+}
 
-    /* ── Sort button active state ── */
-    .sort-button-active {
-        background-color: color-mix(in srgb, var(--primary) 10%, transparent);
-        color: var(--primary);
-        border-color: color-mix(in srgb, var(--primary) 30%, transparent);
-    }
+/* ── Table density utilities — AN.R0 ─────────────────────────────────────
+   `table-cell` and `table-head` replace the former Tailwind `p-4` / `h-12`
+   literals in TableCell.vue / TableHead.vue. Both read `--table-density`
+   (tokens.css §19) so a single CSS-var assignment on a wrapping element
+   scales all row padding + header height simultaneously. Default density=1
+   resolves to the identical geometry as the previous Tailwind literals. */
+@utility table-cell {
+    padding-inline: var(--table-cell-px, 1rem);
+    padding-block: var(--table-cell-py, 1rem);
+}
 
-    /* ── Heatmap color scale (10 levels, light mode) ── */
-    .heatmap-1 {
-        background-color: rgb(254 226 226);
-        color: rgb(127 29 29);
-    }
-    .heatmap-2 {
-        background-color: rgb(254 202 202);
-        color: rgb(127 29 29);
-    }
-    .heatmap-3 {
-        background-color: rgb(252 165 165);
-        color: rgb(127 29 29);
-    }
-    .heatmap-4 {
-        background-color: rgb(248 113 113);
-        color: rgb(127 29 29);
-    }
-    .heatmap-5 {
-        background-color: rgb(239 68 68);
-        color: rgb(220 38 38);
-    }
-    .heatmap-6 {
-        background-color: rgb(220 38 38);
-        color: rgb(254 226 226);
-    }
-    .heatmap-7 {
-        background-color: rgb(185 28 28);
-        color: rgb(254 226 226);
-    }
-    .heatmap-8 {
-        background-color: rgb(153 27 27);
-        color: rgb(254 226 226);
-    }
-    .heatmap-9 {
-        background-color: rgb(127 29 29);
-        color: rgb(254 226 226);
-    }
-    .heatmap-10 {
-        background-color: rgb(69 10 10);
-        color: rgb(254 226 226);
-    }
+@utility table-head {
+    height: var(--table-head-h, 3rem);
+    padding-inline: var(--table-head-px, 1rem);
+}
 
-    /* ── Heatmap color scale (dark mode) ── */
-    .dark .heatmap-1 {
-        background-color: rgb(30 10 10);
-        color: rgb(156 163 175);
-    }
-    .dark .heatmap-2 {
-        background-color: rgb(45 15 15);
-        color: rgb(209 213 219);
-    }
-    .dark .heatmap-3 {
-        background-color: rgb(69 10 10);
-        color: rgb(229 231 235);
-    }
-    .dark .heatmap-4 {
-        background-color: rgb(91 15 15);
-        color: rgb(243 244 246);
-    }
-    .dark .heatmap-5 {
-        background-color: rgb(127 29 29);
-        color: rgb(249 250 251);
-    }
-    .dark .heatmap-6 {
-        background-color: rgb(153 27 27);
-        color: rgb(254 226 226);
-    }
-    .dark .heatmap-7 {
-        background-color: rgb(185 28 28);
-        color: rgb(254 242 242);
-    }
-    .dark .heatmap-8 {
-        background-color: rgb(220 38 38);
-        color: rgb(255 251 251);
+/* ── Rainbow gradient backgrounds (Q.W3 Lane E re-promote) ──────────────
+   `.rainbow-vivid` + `.rainbow-pastel` paint a left-to-right 7-stop spectrum
+   from the canonical `--rainbow-*` / `--rainbow-pastel-*` token families
+   (tokens.css §14). They were retired at `b0debec` (D.W2.D, 2026-04-30)
+   under a zero-consumer audit that did not include keyframes.js in its
+   sweep corpus — keyframes.js's `AnimationMenuBar.vue` round play button
+   composes `rainbow-vivid` (playing) / `rainbow-pastel` (idle) and silently
+   lost its gradient when the recipes left the library. The `--rainbow-*`
+   color tokens survived the retiral; only the class recipes were dropped.
+
+   Re-promoted as `@utility` recipes — the token half is canonical, so the
+   class form that paints it belongs alongside it. Not a backwards-compat
+   alias: it is a substrate REVERT, the revert IS the consumer rediscovery
+   (≥ 1 consumer exists post-revert, satisfying L invariant 8). Faithful
+   to the pre-`b0debec` recipe bodies. */
+@utility rainbow-vivid {
+    background: linear-gradient(
+        to right,
+        var(--rainbow-red),
+        var(--rainbow-orange),
+        var(--rainbow-yellow),
+        var(--rainbow-green),
+        var(--rainbow-blue),
+        var(--rainbow-indigo),
+        var(--rainbow-violet)
+    );
+}
+
+@utility rainbow-pastel {
+    background: linear-gradient(
+        to right,
+        var(--rainbow-pastel-red),
+        var(--rainbow-pastel-orange),
+        var(--rainbow-pastel-yellow),
+        var(--rainbow-pastel-green),
+        var(--rainbow-pastel-blue),
+        var(--rainbow-pastel-indigo),
+        var(--rainbow-pastel-violet)
+    );
+}
+
+/* ── Interactive-button four-state recipe (Q.W3 Lane E re-promote) ───────
+   `.btn-interactive` carries the canonical "Button-with-spring-hover"
+   four-state contract — transition + hover-scale (`--scale-hover`) +
+   active-press (`--scale-press`) + disabled-opacity (`--opacity-disabled`)
+   + focus-ring fade-in. Same shape as `.btn-audacious` (a composition-only
+   recipe a Button variant opts into). Retired at `b0debec` (D.W2.D)
+   alongside the rainbow recipes under the same incomplete audit corpus;
+   keyframes.js consumes it at 7 sites (CubeScene, EasingScene, demo/cube,
+   AnimationControlsGroup RIBBON_BUTTON_CLASS, PlaybackRibbon Reverse).
+
+   The Button primitive's own variants emit the four states except
+   `hover:scale-*` — `.btn-interactive` is the canonical opt-in that adds
+   the spring-hover lift. Faithful to the pre-`b0debec` recipe body. */
+@utility btn-interactive {
+    transition:
+        background-color var(--duration-fast) var(--ease-standard),
+        color var(--duration-fast) var(--ease-standard),
+        transform var(--duration-fast) var(--ease-standard),
+        opacity var(--duration-fast) var(--ease-standard);
+
+    &:hover {
+        transform: scale(var(--scale-hover));
     }
-    .dark .heatmap-9 {
-        background-color: rgb(239 68 68);
-        color: rgb(255 255 255);
+
+    &:active {
+        transform: scale(var(--scale-press));
     }
-    .dark .heatmap-10 {
-        background-color: rgb(248 113 113);
-        color: rgb(255 255 255);
+
+    &:disabled {
+        opacity: var(--opacity-disabled);
+        pointer-events: none;
     }
-}
 
-@keyframes shimmer {
-    0% { background-position: 250% 0; }
-    100% { background-position: -250% 0; }
+    &:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+        /* Fade in; base state has no box-shadow transition → instant
+           removal */
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            transform var(--duration-fast) var(--ease-standard),
+            opacity var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
 }
 
 /* ── Reduced motion: nuanced — preserve opacity, remove spatial motion ── */