@almadar/ui 5.121.3 → 5.122.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.121.3",
+  "version": "5.122.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -117,7 +117,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.29.0",
+    "@almadar/core": "^10.30.0",
     "@almadar/evaluator": "^2.30.0",
     "@almadar/logger": "^1.9.0",
     "@almadar/runtime": "^6.33.0",

package/tailwind-preset.cjs

@@ -84,6 +84,13 @@ module.exports = {
   'ring-2',
   'ring-primary',
   
+  // Motion utilities (applied conditionally on open/close state)
+  'animate-modal-in',
+  'animate-modal-out',
+  'animate-overlay-in',
+  'animate-overlay-out',
+  'animate-slide-up',
+  
   // Auto-added by audit-tailwind-safelist.ts (2026-03-28)
   'active:scale-[var(--active-scale)]',
   'animate-[combat-flash_0.2s_ease-in-out_2]',
@@ -363,6 +370,153 @@ module.exports = {
         emphasized: 'var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1))',
         spring: 'var(--easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1))',
       },
+      keyframes: {
+        'modal-in': {
+          '0%': {
+            opacity: 'var(--motion-modal-enter-from-opacity, 0)',
+            transform: 'var(--motion-modal-enter-from-transform, scale(0.96) translateY(8px))',
+          },
+          '100%': {
+            opacity: 'var(--motion-modal-enter-to-opacity, 1)',
+            transform: 'var(--motion-modal-enter-to-transform, translateZ(0))',
+          },
+        },
+        'modal-out': {
+          '0%': {
+            opacity: 'var(--motion-modal-exit-from-opacity, 1)',
+            transform: 'var(--motion-modal-exit-from-transform, translateZ(0))',
+          },
+          '100%': {
+            opacity: 'var(--motion-modal-exit-to-opacity, 0)',
+            transform: 'var(--motion-modal-exit-to-transform, scale(0.96) translateY(8px))',
+          },
+        },
+        'overlay-in': {
+          '0%': { opacity: 'var(--motion-overlay-enter-from-opacity, var(--motion-overlay-from-opacity, 0))' },
+          '100%': { opacity: '1' },
+        },
+        'overlay-out': {
+          '0%': { opacity: '1' },
+          '100%': { opacity: 'var(--motion-overlay-exit-to-opacity, var(--motion-overlay-from-opacity, 0))' },
+        },
+        'slide-up': {
+          '0%': {
+            opacity: 'var(--motion-slide-up-from-opacity, 0)',
+            transform: 'var(--motion-slide-up-from-transform, translateY(16px))',
+          },
+          '100%': {
+            opacity: '1',
+            transform: 'translateZ(0)',
+          },
+        },
+        'drawer-in': {
+          '0%': {
+            opacity: 'var(--motion-drawer-enter-from-opacity, 0)',
+            transform: 'var(--motion-drawer-enter-from-transform, translateX(100%))',
+          },
+          '100%': {
+            opacity: 'var(--motion-drawer-enter-to-opacity, 1)',
+            transform: 'var(--motion-drawer-enter-to-transform, translateZ(0))',
+          },
+        },
+        'drawer-out': {
+          '0%': {
+            opacity: 'var(--motion-drawer-exit-from-opacity, 1)',
+            transform: 'var(--motion-drawer-exit-from-transform, translateZ(0))',
+          },
+          '100%': {
+            opacity: 'var(--motion-drawer-exit-to-opacity, 0)',
+            transform: 'var(--motion-drawer-exit-to-transform, translateX(100%))',
+          },
+        },
+        'popover-in': {
+          '0%': {
+            opacity: 'var(--motion-popover-enter-from-opacity, 0)',
+            transform: 'var(--motion-popover-enter-from-transform, scale(0.95))',
+          },
+          '100%': {
+            opacity: 'var(--motion-popover-enter-to-opacity, 1)',
+            transform: 'var(--motion-popover-enter-to-transform, scale(1))',
+          },
+        },
+        'popover-out': {
+          '0%': {
+            opacity: 'var(--motion-popover-exit-from-opacity, 1)',
+            transform: 'var(--motion-popover-exit-from-transform, scale(1))',
+          },
+          '100%': {
+            opacity: 'var(--motion-popover-exit-to-opacity, 0)',
+            transform: 'var(--motion-popover-exit-to-transform, scale(0.95))',
+          },
+        },
+        'toast-in': {
+          '0%': {
+            opacity: 'var(--motion-toast-enter-from-opacity, 0)',
+            transform: 'var(--motion-toast-enter-from-transform, translateY(16px))',
+          },
+          '100%': {
+            opacity: 'var(--motion-toast-enter-to-opacity, 1)',
+            transform: 'var(--motion-toast-enter-to-transform, translateZ(0))',
+          },
+        },
+        'toast-out': {
+          '0%': {
+            opacity: 'var(--motion-toast-exit-from-opacity, 1)',
+            transform: 'var(--motion-toast-exit-from-transform, translateZ(0))',
+          },
+          '100%': {
+            opacity: 'var(--motion-toast-exit-to-opacity, 0)',
+            transform: 'var(--motion-toast-exit-to-transform, translateY(16px))',
+          },
+        },
+        'fade-in': {
+          '0%': { opacity: 'var(--motion-fade-enter-from-opacity, 0)' },
+          '100%': { opacity: 'var(--motion-fade-enter-to-opacity, 1)' },
+        },
+        'fade-out': {
+          '0%': { opacity: 'var(--motion-fade-exit-from-opacity, 1)' },
+          '100%': { opacity: 'var(--motion-fade-exit-to-opacity, 0)' },
+        },
+        'page-in': {
+          '0%': {
+            opacity: 'var(--motion-page-enter-from-opacity, 0)',
+            transform: 'var(--motion-page-enter-from-transform, translateY(8px))',
+          },
+          '100%': {
+            opacity: 'var(--motion-page-enter-to-opacity, 1)',
+            transform: 'var(--motion-page-enter-to-transform, translateZ(0))',
+          },
+        },
+        'page-out': {
+          '0%': {
+            opacity: 'var(--motion-page-exit-from-opacity, 1)',
+            transform: 'var(--motion-page-exit-from-transform, translateZ(0))',
+          },
+          '100%': {
+            opacity: 'var(--motion-page-exit-to-opacity, 0)',
+            transform: 'var(--motion-page-exit-to-transform, translateY(-8px))',
+          },
+        },
+      },
+      animation: {
+        // Motion-token-driven durations/easings (fall back to legacy
+        // --transition-* so themes that haven't migrated keep working).
+        'modal-in': 'modal-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'modal-out': 'modal-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'overlay-in': 'overlay-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'overlay-out': 'overlay-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'slide-up': 'slide-up var(--duration-slow, var(--transition-slow, 400ms)) var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1))',
+        'drawer-in': 'drawer-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1))',
+        'drawer-out': 'drawer-out var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1))',
+        'popover-in': 'popover-in var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'popover-out': 'popover-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'toast-in': 'toast-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1))',
+        'toast-out': 'toast-out var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'fade-in': 'fade-in var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'fade-out': 'fade-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'page-in': 'page-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+        'page-out': 'page-out var(--duration-fast, var(--transition-fast, 150ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
+      },
       // Density-axis spacing scale. Tailwind's default `p-3` / `gap-4` resolve
       // here so existing classes keep working — but now read from tokens.
       // Defaults match Tailwind's default (12px / 16px / 24px for 3 / 4 / 6),
@@ -453,4 +607,25 @@ module.exports = {
       },
     },
   },
+  plugins: [
+    // Chrome-skin utilities: sprite-driven panel/button chrome, opt-in per theme.
+    // No-op (`none`) unless the active theme defines the backing --game-* vars —
+    // zero visual change for every theme that doesn't set them.
+    require('tailwindcss/plugin')(({ addUtilities }) => {
+      addUtilities({
+        '.chrome-panel': {
+          'border-image-source': 'var(--game-panel-border-image, none)',
+          'border-image-slice': 'var(--game-panel-border-image-slice, 30 fill)',
+          'border-image-width': 'var(--game-panel-border-image-width, 30px)',
+          'border-image-repeat': 'stretch',
+        },
+        '.chrome-button': {
+          'background-image': 'var(--game-button-bg-image, none)',
+          'background-size': 'var(--game-button-bg-size, 100% 100%)',
+          'background-repeat': 'no-repeat',
+          'background-position': 'center',
+        },
+      });
+    }),
+  ],
 };

package/themes/_base.css

@@ -121,4 +121,115 @@
     --card-padding-lg: 40px;
     --dialog-padding: 40px;
     --section-gap: 64px;
+
+    /* ----------------------------------------------------------------
+     * Motion — duration & easing axis
+     * ----------------------------------------------------------------
+     * Base values for the motion axis. Per-theme blocks override these to
+     * restyle timing without touching keyframes. The legacy --transition-*
+     * aliases are kept as fallbacks for themes that haven't migrated.
+     * ---------------------------------------------------------------- */
+    --duration-instant: 0ms;
+    --duration-fast: var(--transition-fast, 150ms);
+    --duration-normal: var(--transition-normal, 250ms);
+    --duration-slow: var(--transition-slow, 400ms);
+    --duration-dramatic: 600ms;
+    --easing-linear: linear;
+    --easing-standard: var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1));
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    /* Master on/off. Set `off` to collapse EVERY motion to instant without
+     * relying on prefers-reduced-motion (programmatic opt-out for themes). */
+    --motion-enable: on;
+
+    /* ----------------------------------------------------------------
+     * Motion — keyframe endpoints
+     * ----------------------------------------------------------------
+     * The "shape" of every built-in transition. Duration/easing come from
+     * --duration-* / --easing-*. Override any of these in a theme block to
+     * restyle the motion — e.g. a minimal theme sets
+     * --motion-modal-enter-from-transform: none for a pure fade. Each surface
+     * has enter + exit endpoints so <Presence> can animate both directions.
+     * ---------------------------------------------------------------- */
+    --motion-overlay-from-opacity: 0;
+    --motion-overlay-enter-from-opacity: var(--motion-overlay-from-opacity);
+    --motion-overlay-exit-to-opacity: var(--motion-overlay-from-opacity);
+
+    --motion-modal-enter-from-opacity: 0;
+    --motion-modal-enter-from-transform: scale(0.96) translateY(8px);
+    --motion-modal-enter-to-opacity: 1;
+    --motion-modal-enter-to-transform: translateZ(0);
+    --motion-modal-exit-from-opacity: 1;
+    --motion-modal-exit-from-transform: translateZ(0);
+    --motion-modal-exit-to-opacity: 0;
+    --motion-modal-exit-to-transform: scale(0.96) translateY(8px);
+
+    --motion-slide-up-from-opacity: 0;
+    --motion-slide-up-from-transform: translateY(16px);
+
+    /* Drawer / SidePanel — horizontal slide. transform sign is flipped per
+     * side by the component via a CSS var override (--motion-drawer-sign). */
+    --motion-drawer-sign: 1;
+    --motion-drawer-enter-from-opacity: 0;
+    --motion-drawer-enter-from-transform: translateX(calc(100% * var(--motion-drawer-sign)));
+    --motion-drawer-enter-to-opacity: 1;
+    --motion-drawer-enter-to-transform: translateZ(0);
+    --motion-drawer-exit-from-opacity: 1;
+    --motion-drawer-exit-from-transform: translateZ(0);
+    --motion-drawer-exit-to-opacity: 0;
+    --motion-drawer-exit-to-transform: translateX(calc(100% * var(--motion-drawer-sign)));
+
+    /* Popover — small scale + fade from the trigger origin. */
+    --motion-popover-enter-from-opacity: 0;
+    --motion-popover-enter-from-transform: scale(0.95);
+    --motion-popover-enter-to-opacity: 1;
+    --motion-popover-enter-to-transform: scale(1);
+    --motion-popover-exit-from-opacity: 1;
+    --motion-popover-exit-from-transform: scale(1);
+    --motion-popover-exit-to-opacity: 0;
+    --motion-popover-exit-to-transform: scale(0.95);
+
+    /* Toast — slide up + fade (bottom-origin notification). */
+    --motion-toast-enter-from-opacity: 0;
+    --motion-toast-enter-from-transform: translateY(16px);
+    --motion-toast-enter-to-opacity: 1;
+    --motion-toast-enter-to-transform: translateZ(0);
+    --motion-toast-exit-from-opacity: 1;
+    --motion-toast-exit-from-transform: translateZ(0);
+    --motion-toast-exit-to-opacity: 0;
+    --motion-toast-exit-to-transform: translateY(16px);
+
+    /* Generic fade — default for arbitrary component enter/leave (<Presence>). */
+    --motion-fade-enter-from-opacity: 0;
+    --motion-fade-enter-to-opacity: 1;
+    --motion-fade-exit-from-opacity: 1;
+    --motion-fade-exit-to-opacity: 0;
+
+    /* Page / route transition — the routed subtree animates on navigation. */
+    --motion-page-enter-from-opacity: 0;
+    --motion-page-enter-from-transform: translateY(8px);
+    --motion-page-enter-to-opacity: 1;
+    --motion-page-enter-to-transform: translateZ(0);
+    --motion-page-exit-from-opacity: 1;
+    --motion-page-exit-from-transform: translateZ(0);
+    --motion-page-exit-to-opacity: 0;
+    --motion-page-exit-to-transform: translateY(-8px);
+}
+
+/* ----------------------------------------------------------------
+ * Reduced motion — the canonical accessibility kill-switch.
+ * Collapses EVERY animation/transition to ~instant regardless of which
+ * surface or theme is active. Themes/apps must NOT re-raise durations
+ * under this media query. (Supersedes per-app overrides like kflow.css.)
+ * ---------------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --motion-enable: off;
+    }
+    *, *::before, *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
 }

package/themes/_contract.md

@@ -158,6 +158,31 @@ Easing palette (existing `--transition-timing` aliases to `--easing-standard`):
 | `--easing-emphasized` | `cubic-bezier(0.2, 0, 0, 1)` |
 | `--easing-spring` | `cubic-bezier(0.34, 1.56, 0.64, 1)` |
 
+**Master toggle:** `--motion-enable` (`on` \| `off`, default `on`). Set `off` to collapse every
+motion to instant — the programmatic opt-out (independent of `prefers-reduced-motion`, which the
+base layer also honours globally).
+
+### Motion axis — keyframe endpoints (surface shapes)
+
+Every animated surface has enter + exit endpoints so `<Presence>` (the one enter/leave primitive)
+can animate both directions. Override these in a theme block to restyle the *shape*; duration &
+easing still come from the palettes above.
+
+| Surface | Endpoints (enter/exit) | Default shape |
+|---|---|---|
+| overlay | `--motion-overlay-enter-from-opacity`, `--motion-overlay-exit-to-opacity` | fade |
+| modal | `--motion-modal-{enter,exit}-{from,to}-{opacity,transform}` | scale .96 + translateY(8px) + fade |
+| slide-up | `--motion-slide-up-from-{opacity,transform}` | translateY(16px) + fade |
+| drawer | `--motion-drawer-{enter,exit}-{from,to}-{opacity,transform}` + `--motion-drawer-sign` (1 / -1) | horizontal slide by side |
+| popover | `--motion-popover-{enter,exit}-{from,to}-{opacity,transform}` | scale .95 + fade |
+| toast | `--motion-toast-{enter,exit}-{from,to}-{opacity,transform}` | translateY(16px) + fade |
+| fade | `--motion-fade-{enter,exit}-{from,to}-opacity` | opacity only |
+| page | `--motion-page-{enter,exit}-{from,to}-{opacity,transform}` | translateY(±8px) + fade |
+
+These back the preset utilities `animate-<surface>-in` / `animate-<surface>-out`. A reduced-motion
+user (`@media (prefers-reduced-motion: reduce)`, declared once in `_base.css`) gets every surface
+instantly regardless of theme.
+
 ### Iconography axis
 
 | Variable | Default | Notes |

package/themes/game-adventure.css

@@ -0,0 +1,230 @@
+/**
+ * Game Adventure Theme — "Tavern Parchment"
+ *
+ * Kenney's fantasy-adventure UI pack (warm brown-framed parchment panels,
+ * hanging banners) as a real theme, same contract as every other theme.
+ * Dark tavern-brown background so the parchment panel chrome reads as a
+ * lit scroll/signboard.
+ *
+ * Chrome sprites: --game-panel-border-image is a CSS 9-slice (border-image)
+ * sourced from kenney-ui-pack-adventure's `panel_brownimg` sprite, consumed
+ * by the `.chrome-panel` utility (tailwind-preset.cjs) that Card/GameShell/
+ * GameHud/GameMenu already apply unconditionally. This pack's only button
+ * sprites are small icon-sized (close/confirm), not full-width chrome, so
+ * --game-button-bg-image is left undeclared — Button renders with flat
+ * theme-colored chrome instead (the `.chrome-button` utility's `none`
+ * fallback already handles this cleanly, same as game-sci-fi).
+ */
+[data-theme="game-adventure-dark"] {
+    /* Shadows — warm tavern glow */
+    --shadow-main: 0 4px 14px rgba(224, 165, 44, 0.12), 0 1px 3px rgba(0, 0, 0, 0.4);
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 8px 30px rgba(224, 165, 44, 0.18), 0 4px 10px rgba(0, 0, 0, 0.35);
+    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.4);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(224, 165, 44, 0.22), 0 4px 12px rgba(0, 0, 0, 0.3);
+    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.35);
+
+    /* Border radius — carved wood/parchment, only lightly rounded */
+    --radius-none: 0px;
+    --radius-sm: 3px;
+    --radius-md: 5px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+
+    /* Border width */
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+
+    /* ======================================================================
+     * CORE COLORS
+     * ====================================================================== */
+
+    /* Primary — leather brown-orange */
+    --color-primary: #b5793a;
+    --color-primary-hover: #c98d4c;
+    --color-primary-foreground: #241608;
+
+    /* Secondary — dark wood */
+    --color-secondary: #3a2712;
+    --color-secondary-hover: #4a3319;
+    --color-secondary-foreground: #f3e3c4;
+
+    /* Accent — gold trim */
+    --color-accent: #e0a52c;
+    --color-accent-foreground: #241608;
+
+    /* Muted */
+    --color-muted: #4a3018;
+    --color-muted-foreground: #b3966e;
+
+    /* Surfaces */
+    --color-background: #241608;
+    --color-foreground: #f3e3c4;
+    --color-card: #fff1d2;
+    --color-card-foreground: #4a2f14;
+    --color-surface: #2e1d0d;
+
+    /* Borders & Inputs */
+    --color-border: #7a5228;
+    --color-input: #3a2712;
+    --color-ring: #e0a52c;
+
+    /* Semantic colors */
+    --color-error: #d9534f;
+    --color-error-foreground: #1a0808;
+    --color-success: #7ba05b;
+    --color-success-foreground: #0d1a08;
+    --color-warning: #e0a52c;
+    --color-warning-foreground: #241608;
+    --color-info: #b5793a;
+    --color-info-foreground: #241608;
+
+    /* ======================================================================
+     * CHROME — sprite-driven panel skin (kenney-ui-pack-adventure/panel_brownimg)
+     * ====================================================================== */
+    --game-panel-border-image: url('https://almadar-kflow-assets.web.app/shared/ui-game-shell/kenney-ui-pack-adventure/ui/panel_brownimg.png');
+    --game-panel-border-image-slice: 17 fill;
+    --game-panel-border-image-width: 14px;
+
+    /* ======================================================================
+     * TYPOGRAPHY
+     * ====================================================================== */
+    --font-family:
+        "Kenney Blocks", ui-sans-serif, system-ui, sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: 0.02em;
+    --line-height: 1.5;
+
+    /* Icon styling — gold tint */
+    --icon-stroke-width: 1.75;
+    --icon-color: #e0a52c;
+
+    /* Transitions */
+    --transition-fast: 100ms;
+    --transition-normal: 200ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Hover/Active transforms */
+    --hover-scale: 1.01;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+
+    /* Focus ring — gold */
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #e0a52c;
+
+    /* Layer 1 — backfill (see themes/_contract.md) */
+    /* Density axis — spacing scale */
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-11: 44px;
+    --space-12: 48px;
+    /* Density axis — per-element heights */
+    --button-height-sm: 28px;
+    --button-height-md: 36px;
+    --button-height-lg: 44px;
+    --input-height-sm: 28px;
+    --input-height-md: 36px;
+    --input-height-lg: 44px;
+    --row-height-compact: 32px;
+    --row-height-normal: 40px;
+    --row-height-spacious: 48px;
+    /* Density axis — per-element padding */
+    --card-padding-sm: 12px;
+    --card-padding-md: 16px;
+    --card-padding-lg: 24px;
+    --dialog-padding: 24px;
+    --section-gap: 32px;
+    /* Type axis — family triplet */
+    --font-family-display: var(--font-family);
+    --font-family-body: var(--font-family);
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    /* Type axis — size scale */
+    --text-xs: 12px;
+    --leading-xs: 16px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 16px;
+    --leading-base: 24px;
+    --text-lg: 18px;
+    --leading-lg: 28px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 24px;
+    --leading-2xl: 32px;
+    --text-3xl: 30px;
+    --leading-3xl: 36px;
+    --text-4xl: 36px;
+    --leading-4xl: 40px;
+    --text-display-1: 48px;
+    --leading-display-1: 52px;
+    --text-display-2: 60px;
+    --leading-display-2: 64px;
+    /* Type axis — intent mapping */
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --intent-heading-minor-leading: var(--leading-lg);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-sm);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-sm);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    /* Motion axis — duration palette */
+    --duration-instant: 0ms;
+    --duration-fast: var(--transition-fast);
+    --duration-normal: var(--transition-normal);
+    --duration-slow: var(--transition-slow);
+    --duration-dramatic: 600ms;
+    /* Motion axis — easing palette */
+    --easing-linear: linear;
+    --easing-standard: var(--transition-timing);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    /* Iconography axis */
+    --icon-family: lucide;
+    --icon-default-size: 16px;
+    /* Elevation axis — per-layer mapping */
+    --elevation-card: var(--shadow-sm);
+    --elevation-popover: var(--shadow-main);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    /* Geometry axis — radius rhythm with intent */
+    --radius-container: var(--radius-md);
+    --radius-interactive: var(--radius-md);
+    --radius-pill: var(--radius-full);
+    /* Geometry axis — border-width rhythm */
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+}