juxscript 1.1.140 → 1.1.142

package/dom-structure-map.json

@@ -1,6 +1,6 @@
 {
   "totalComponents": 69,
-  "generatedAt": "2026-02-13T18:07:31.535Z",
+  "generatedAt": "2026-02-13T19:58:10.948Z",
   "components": [
     {
       "file": "alert.js",

package/lib/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQxD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChG,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IACpD,OAAO,CAAC,cAAc,CAAkC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa;IAmB/C,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAO1B;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM5B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAI3C,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAO/C;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAgBzB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA4DnE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAElE"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQxD,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAChG,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,MAAO,SAAQ,aAAa,CAAC,WAAW,CAAC;IACpD,OAAO,CAAC,cAAc,CAAkC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa;IAmB/C,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAO1B;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAM5B,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAI3C,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK/B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAO/C;;OAEG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIzB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAgBzB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC;;OAEG;IACH,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAW7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAqFnE;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,CAElE"}

package/lib/components/button.js

@@ -120,16 +120,50 @@ export class Button extends BaseComponent {
     }
     render(targetId) {
         const container = this._setupContainer(targetId);
-        const { label, content, variant, size, disabled, icon, iconPosition, loading, style, class: className } = this.state;
+        const { content, icon, iconPosition, variant, size, style, class: className } = this.state;
         const button = document.createElement('button');
-        this._buttonElement = button;
-        button.className = `jux-button jux-button-${variant} jux-button-${size}`;
+        // ✅ ONLY set base class (no variant/size classes)
+        button.className = 'jux-button';
         button.id = this._id;
-        button.disabled = disabled || loading;
+        // ✅ Add user classes
         if (className)
             button.className += ` ${className}`;
-        if (style)
-            button.setAttribute('style', style);
+        // ✅ Apply variant via CSS variables (inline style)
+        let inlineStyle = style || '';
+        // Map variant to CSS variable overrides
+        if (variant === 'success') {
+            inlineStyle += `--jux-accent-bg: var(--jux-success-bg); --jux-accent-to: var(--jux-success-to);`;
+        }
+        else if (variant === 'danger') {
+            inlineStyle += `--jux-accent-bg: var(--jux-danger-bg); --jux-accent-to: var(--jux-danger-to);`;
+        }
+        else if (variant === 'warning') {
+            inlineStyle += `--jux-accent-bg: var(--jux-warning-bg); --jux-accent-to: var(--jux-warning-to);`;
+        }
+        else if (variant === 'info') {
+            inlineStyle += `--jux-accent-bg: var(--jux-info-bg); --jux-accent-to: var(--jux-info-to);`;
+        }
+        else if (variant === 'secondary') {
+            inlineStyle += `--jux-accent-bg: var(--jux-brand-accent-bg); --jux-accent-to: var(--jux-brand-accent-to);`;
+        }
+        else if (variant === 'ghost') {
+            inlineStyle += `background: transparent; border-color: transparent; color: var(--jux-brand-color);`;
+        }
+        else if (variant === 'outline') {
+            inlineStyle += `background: transparent; color: var(--jux-brand-color); border-color: var(--jux-brand-color);`;
+        }
+        // 'primary' uses default --jux-brand-bg from foundation.css
+        // Map size to CSS variable overrides
+        if (size === 'small') {
+            inlineStyle += `--jux-pad: calc(0.375rem * var(--jux-size-xs)) calc(0.75rem * var(--jux-size-xs)); font-size: calc(var(--jux-base-font) * var(--jux-size-xs));`;
+        }
+        else if (size === 'large') {
+            inlineStyle += `--jux-pad: calc(0.5rem * var(--jux-size-lg)) calc(1rem * var(--jux-size-lg)); font-size: calc(var(--jux-base-font) * var(--jux-size-lg));`;
+        }
+        // 'medium' uses default --jux-base-pad from foundation.css
+        if (inlineStyle) {
+            button.setAttribute('style', inlineStyle);
+        }
         if (icon && iconPosition === 'left') {
             const iconEl = document.createElement('span');
             iconEl.className = 'jux-button-icon';
@@ -141,12 +175,12 @@ export class Button extends BaseComponent {
         if (content) {
             textEl.innerHTML = content;
         }
-        else if (label) {
-            textEl.textContent = loading ? 'Loading...' : label;
+        else if (this.state.label) {
+            textEl.textContent = this.state.loading ? 'Loading...' : this.state.label;
         }
         else {
             // Fallback to auto-generated label from ID
-            textEl.textContent = loading ? 'Loading...' : formatIdAsLabel(this._id);
+            textEl.textContent = this.state.loading ? 'Loading...' : formatIdAsLabel(this._id);
         }
         button.appendChild(textEl);
         if (icon && iconPosition === 'right') {
@@ -156,18 +190,12 @@ export class Button extends BaseComponent {
             button.appendChild(iconEl);
         }
         button.addEventListener('click', (e) => {
-            if (!disabled && !loading) {
+            if (!this.state.disabled && !this.state.loading) {
                 this._triggerCallback('click', e);
             }
         });
         this._wireStandardEvents(button);
-        this._wireAllSyncs();
         container.appendChild(button);
-        requestAnimationFrame(() => {
-            if (window.lucide) {
-                window.lucide.createIcons();
-            }
-        });
         return this;
     }
 }

package/lib/components/button.ts

@@ -172,16 +172,50 @@ export class Button extends BaseComponent<ButtonState> {
 
   render(targetId?: string | HTMLElement | BaseComponent<any>): this {
     const container = this._setupContainer(targetId);
-    const { label, content, variant, size, disabled, icon, iconPosition, loading, style, class: className } = this.state;
+
+    const { content, icon, iconPosition, variant, size, style, class: className } = this.state;
 
     const button = document.createElement('button');
-    this._buttonElement = button;
-    button.className = `jux-button jux-button-${variant} jux-button-${size}`;
+
+    // ✅ ONLY set base class (no variant/size classes)
+    button.className = 'jux-button';
     button.id = this._id;
-    button.disabled = disabled || loading;
 
+    // ✅ Add user classes
     if (className) button.className += ` ${className}`;
-    if (style) button.setAttribute('style', style);
+
+    // ✅ Apply variant via CSS variables (inline style)
+    let inlineStyle = style || '';
+
+    // Map variant to CSS variable overrides
+    if (variant === 'success') {
+      inlineStyle += `--jux-accent-bg: var(--jux-success-bg); --jux-accent-to: var(--jux-success-to);`;
+    } else if (variant === 'danger') {
+      inlineStyle += `--jux-accent-bg: var(--jux-danger-bg); --jux-accent-to: var(--jux-danger-to);`;
+    } else if (variant === 'warning') {
+      inlineStyle += `--jux-accent-bg: var(--jux-warning-bg); --jux-accent-to: var(--jux-warning-to);`;
+    } else if (variant === 'info') {
+      inlineStyle += `--jux-accent-bg: var(--jux-info-bg); --jux-accent-to: var(--jux-info-to);`;
+    } else if (variant === 'secondary') {
+      inlineStyle += `--jux-accent-bg: var(--jux-brand-accent-bg); --jux-accent-to: var(--jux-brand-accent-to);`;
+    } else if (variant === 'ghost') {
+      inlineStyle += `background: transparent; border-color: transparent; color: var(--jux-brand-color);`;
+    } else if (variant === 'outline') {
+      inlineStyle += `background: transparent; color: var(--jux-brand-color); border-color: var(--jux-brand-color);`;
+    }
+    // 'primary' uses default --jux-brand-bg from foundation.css
+
+    // Map size to CSS variable overrides
+    if (size === 'small') {
+      inlineStyle += `--jux-pad: calc(0.375rem * var(--jux-size-xs)) calc(0.75rem * var(--jux-size-xs)); font-size: calc(var(--jux-base-font) * var(--jux-size-xs));`;
+    } else if (size === 'large') {
+      inlineStyle += `--jux-pad: calc(0.5rem * var(--jux-size-lg)) calc(1rem * var(--jux-size-lg)); font-size: calc(var(--jux-base-font) * var(--jux-size-lg));`;
+    }
+    // 'medium' uses default --jux-base-pad from foundation.css
+
+    if (inlineStyle) {
+      button.setAttribute('style', inlineStyle);
+    }
 
     if (icon && iconPosition === 'left') {
       const iconEl = document.createElement('span');
@@ -195,11 +229,11 @@ export class Button extends BaseComponent<ButtonState> {
     // ✅ Priority: content (HTML) > label (text) > loading state
     if (content) {
       textEl.innerHTML = content;
-    } else if (label) {
-      textEl.textContent = loading ? 'Loading...' : label;
+    } else if (this.state.label) {
+      textEl.textContent = this.state.loading ? 'Loading...' : this.state.label;
     } else {
       // Fallback to auto-generated label from ID
-      textEl.textContent = loading ? 'Loading...' : formatIdAsLabel(this._id);
+      textEl.textContent = this.state.loading ? 'Loading...' : formatIdAsLabel(this._id);
     }
 
     button.appendChild(textEl);
@@ -212,22 +246,13 @@ export class Button extends BaseComponent<ButtonState> {
     }
 
     button.addEventListener('click', (e) => {
-      if (!disabled && !loading) {
+      if (!this.state.disabled && !this.state.loading) {
         this._triggerCallback('click', e);
       }
     });
 
     this._wireStandardEvents(button);
-    this._wireAllSyncs();
-
     container.appendChild(button);
-
-    requestAnimationFrame(() => {
-      if ((window as any).lucide) {
-        (window as any).lucide.createIcons();
-      }
-    });
-
     return this;
   }
 }

package/lib/styles/foundation.css

@@ -0,0 +1,416 @@
+/* ══════════════════════════════════════════════════════════════════
+   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
+   Generative Color System with Burn Calculations + Complete Foundation
+   
+   ⚙️  USER CONFIGURATION (Lines 13-80) - Override these to theme your app
+   🔧 SYSTEM CONFIGURATION (Lines 81+) - Auto-generated, don't touch
+   ══════════════════════════════════════════════════════════════════ */
+
+:root {
+  /* ═════════════════════════════════════════════════════════════════
+   * 🎨 BRAND COLORS - Your Primary Customization Point
+   * Change these to match your brand identity
+   * ═════════════════════════════════════════════════════════════════ */
+  
+  /* Brand Primary (buttons, links, primary actions) */
+  --jux-brand-from: #18181b;
+  --jux-brand-to: #000000;
+  
+  /* Brand Accent (highlights, secondary actions, badges) */
+  --jux-brand-accent-from: #3b82f6;
+  --jux-brand-accent-to: #1e40af;
+  
+  /* Surfaces (backgrounds, cards, panels) */
+  --jux-surface-from: #ffffff;
+  --jux-surface-to: #09090b;
+  
+  /* Text (headings, paragraphs, labels) */
+  --jux-text-from: #09090b;
+  --jux-text-to: #ffffff;
+  
+  /* Borders (input outlines, dividers) */
+  --jux-border-from: #e4e4e7;
+  --jux-border-to: #71717a;
+  
+  /* ═════════════════════════════════════════════════════════════════
+   * 🔥 BURN FACTORS - Interaction Intensities
+   * ═════════════════════════════════════════════════════════════════ */
+  --jux-burn-subtle: 0.03;
+  --jux-burn-hover: 0.06;
+  --jux-burn-active: 0.12;
+  --jux-burn-muted: 0.25;
+  --jux-burn-strong: 0.50;
+  
+  /* ═════════════════════════════════════════════════════════════════
+   * 📏 SPACING SCALE (Base units for padding, gap, margins)
+   * ═════════════════════════════════════════════════════════════════ */
+  --jux-space-xs: 0.25rem;     /* 4px */
+  --jux-space-sm: 0.5rem;      /* 8px */
+  --jux-space-md: 1rem;        /* 16px */
+  --jux-space-lg: 1.5rem;      /* 24px */
+  --jux-space-xl: 2rem;        /* 32px */
+  --jux-space-2xl: 3rem;       /* 48px */
+  --jux-space-3xl: 4rem;       /* 64px */
+  
+  /* ═════════════════════════════════════════════════════════════════
+   * 🔤 TYPOGRAPHY SCALE
+   * ═════════════════════════════════════════════════════════════════ */
+  
+  /* Font Families */
+  --jux-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --jux-font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+  --jux-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  
+  /* Font Sizes */
+  --jux-text-xs: 0.75rem;      /* 12px */
+  --jux-text-sm: 0.875rem;     /* 14px */
+  --jux-text-base: 1rem;       /* 16px */
+  --jux-text-lg: 1.125rem;     /* 18px */
+  --jux-text-xl: 1.25rem;      /* 20px */
+  --jux-text-2xl: 1.5rem;      /* 24px */
+  --jux-text-3xl: 1.875rem;    /* 30px */
+  --jux-text-4xl: 2.25rem;     /* 36px */
+  --jux-text-5xl: 3rem;        /* 48px */
+  
+  /* Font Weights */
+  --jux-weight-thin: 100;
+  --jux-weight-light: 300;
+  --jux-weight-normal: 400;
+  --jux-weight-medium: 500;
+  --jux-weight-semibold: 600;
+  --jux-weight-bold: 700;
+  --jux-weight-black: 900;
+  
+  /* Line Heights */
+  --jux-leading-tight: 1.25;
+  --jux-leading-snug: 1.375;
+  --jux-leading-normal: 1.5;
+  --jux-leading-relaxed: 1.625;
+  --jux-leading-loose: 2;
+  
+  /* ═════════════════════════════════════════════════════════════════
+   * 📐 SHAPE & SIZE SCALE
+   * ═════════════════════════════════════════════════════════════════ */
+  
+  /* Border Radius */
+  --jux-radius-sharp: 0;
+  --jux-radius-sm: 0.25rem;
+  --jux-radius-md: 0.375rem;
+  --jux-radius-lg: 0.5rem;
+  --jux-radius-xl: 0.75rem;
+  --jux-radius-2xl: 1rem;
+  --jux-radius-full: 9999px;
+  
+  /* Border Width */
+  --jux-stroke-thin: 1px;
+  --jux-stroke-base: 2px;
+  --jux-stroke-thick: 4px;
+  
+  /* Size Multipliers */
+  --jux-size-xs: 0.75;
+  --jux-size-sm: 0.875;
+  --jux-size-md: 1;
+  --jux-size-lg: 1.25;
+  --jux-size-xl: 1.5;
+  
+  /* ═════════════════════════════════════════════════════════════════
+   * 🤖 SYSTEM CONFIGURATION - AUTO-GENERATED
+   * These are computed from your brand colors above
+   * DO NOT MODIFY - Override brand colors instead
+   * ═════════════════════════════════════════════════════════════════ */
+  
+  /* Generated Brand Colors */
+  --jux-brand-color: var(--jux-brand-from);
+  --jux-brand-bg: var(--jux-brand-from);
+  --jux-brand-color-hover: color-mix(in srgb, 
+    var(--jux-brand-from) calc(100% - var(--jux-burn-hover) * 100%), 
+    var(--jux-brand-to) calc(var(--jux-burn-hover) * 100%)
+  );
+  --jux-brand-color-active: color-mix(in srgb, 
+    var(--jux-brand-from) calc(100% - var(--jux-burn-active) * 100%), 
+    var(--jux-brand-to) calc(var(--jux-burn-active) * 100%)
+  );
+  
+  /* Generated Brand Accent Colors */
+  --jux-brand-accent-color: var(--jux-brand-accent-from);
+  --jux-brand-accent-bg: var(--jux-brand-accent-from);
+  --jux-brand-accent-color-hover: color-mix(in srgb, 
+    var(--jux-brand-accent-from) calc(100% - var(--jux-burn-hover) * 100%), 
+    var(--jux-brand-accent-to) calc(var(--jux-burn-hover) * 100%)
+  );
+  --jux-brand-accent-color-active: color-mix(in srgb, 
+    var(--jux-brand-accent-from) calc(100% - var(--jux-burn-active) * 100%), 
+    var(--jux-brand-accent-to) calc(var(--jux-burn-active) * 100%)
+  );
+  
+  /* Generated Surface Colors */
+  --jux-surface-bg: var(--jux-surface-from);
+  --jux-surface-bg-alt: color-mix(in srgb, 
+    var(--jux-surface-from) calc(100% - var(--jux-burn-subtle) * 100%), 
+    var(--jux-surface-to) calc(var(--jux-burn-subtle) * 100%)
+  );
+  --jux-surface-bg-hover: color-mix(in srgb, 
+    var(--jux-surface-from) calc(100% - var(--jux-burn-hover) * 100%), 
+    var(--jux-surface-to) calc(var(--jux-burn-hover) * 100%)
+  );
+  --jux-surface-bg-active: color-mix(in srgb, 
+    var(--jux-surface-from) calc(100% - var(--jux-burn-active) * 100%), 
+    var(--jux-surface-to) calc(var(--jux-burn-active) * 100%)
+  );
+  
+  /* Generated Text Colors */
+  --jux-text-color: var(--jux-text-from);
+  --jux-text-color-secondary: color-mix(in srgb, 
+    var(--jux-text-from) calc(100% - var(--jux-burn-muted) * 100%), 
+    var(--jux-text-to) calc(var(--jux-burn-muted) * 100%)
+  );
+  --jux-text-color-tertiary: color-mix(in srgb, 
+    var(--jux-text-from) calc(100% - var(--jux-burn-strong) * 100%), 
+    var(--jux-text-to) calc(var(--jux-burn-strong) * 100%)
+  );
+  
+  /* Generated Border Colors */
+  --jux-border-color: var(--jux-border-from);
+  --jux-border-color-strong: color-mix(in srgb, 
+    var(--jux-border-from) calc(100% - var(--jux-burn-hover) * 100%), 
+    var(--jux-border-to) calc(var(--jux-burn-hover) * 100%)
+  );
+  
+  /* Semantic Colors (Optional - Use for app-level alerts/feedback) */
+  --jux-success-from: #10b981;
+  --jux-success-to: #065f46;
+  --jux-success-color: var(--jux-success-from);
+  --jux-success-bg: var(--jux-success-from);
+  --jux-success-bg-light: color-mix(in srgb, var(--jux-success-from) 20%, #ffffff 80%);
+  --jux-success-bg-dark: var(--jux-success-to);
+  
+  --jux-warning-from: #f59e0b;
+  --jux-warning-to: #92400e;
+  --jux-warning-color: var(--jux-warning-from);
+  --jux-warning-bg: var(--jux-warning-from);
+  --jux-warning-bg-light: color-mix(in srgb, var(--jux-warning-from) 20%, #ffffff 80%);
+  --jux-warning-bg-dark: var(--jux-warning-to);
+  
+  --jux-danger-from: #ef4444;
+  --jux-danger-to: #991b1b;
+  --jux-danger-color: var(--jux-danger-from);
+  --jux-danger-bg: var(--jux-danger-from);
+  --jux-danger-bg-light: color-mix(in srgb, var(--jux-danger-from) 20%, #ffffff 80%);
+  --jux-danger-bg-dark: var(--jux-danger-to);
+  
+  --jux-info-from: #3b82f6;
+  --jux-info-to: #1e40af;
+  --jux-info-color: var(--jux-info-from);
+  --jux-info-bg: var(--jux-info-from);
+  --jux-info-bg-light: color-mix(in srgb, var(--jux-info-from) 20%, #ffffff 80%);
+  --jux-info-bg-dark: var(--jux-info-to);
+  
+  /* Spatial Axis Engine (Ghost Logic Fallbacks) */
+  --jux-gap: var(--jux-gap-override, var(--jux-gap-token, 0px));
+  --jux-pad: var(--jux-pad-override, var(--jux-pad-token, 0px));
+  --jux-align: flex-start;
+  
+  /* Default Radius & Stroke */
+  --jux-radius: var(--jux-radius-override, var(--jux-radius-md));
+  --jux-stroke: var(--jux-stroke-base);
+  
+  /* Default Typography */
+  --jux-font-family: var(--jux-font-sans);
+  --jux-font-weight: var(--jux-weight-normal);
+  --jux-font-size: var(--jux-text-base);
+  --jux-line-height: var(--jux-leading-normal);
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   GEOMETRIC DESCRIPTOR CLASSES (Mobile First)
+   ══════════════════════════════════════════════════════════════════ */
+
+/* ─────────────────────────────────────────────────────────────────
+ * PADDING DESCRIPTORS
+ * ───────────────────────────────────────────────────────────────── */
+.pad-none   { --jux-pad-token: 0; }
+.pad-xs     { --jux-pad-token: var(--jux-space-xs); }
+.pad-sm     { --jux-pad-token: var(--jux-space-sm); }
+.pad-md     { --jux-pad-token: var(--jux-space-md); }
+.pad-lg     { --jux-pad-token: var(--jux-space-lg); }
+.pad-xl     { --jux-pad-token: var(--jux-space-xl); }
+.pad-2xl    { --jux-pad-token: var(--jux-space-2xl); }
+.pad-3xl    { --jux-pad-token: var(--jux-space-3xl); }
+
+/* ─────────────────────────────────────────────────────────────────
+ * GAP DESCRIPTORS
+ * ───────────────────────────────────────────────────────────────── */
+.gap-none   { --jux-gap-token: 0; }
+.gap-xs     { --jux-gap-token: var(--jux-space-xs); }
+.gap-sm     { --jux-gap-token: var(--jux-space-sm); }
+.gap-md     { --jux-gap-token: var(--jux-space-md); }
+.gap-lg     { --jux-gap-token: var(--jux-space-lg); }
+.gap-xl     { --jux-gap-token: var(--jux-space-xl); }
+.gap-2xl    { --jux-gap-token: var(--jux-space-2xl); }
+.gap-3xl    { --jux-gap-token: var(--jux-space-3xl); }
+
+/* ─────────────────────────────────────────────────────────────────
+ * RADIUS DESCRIPTORS
+ * ───────────────────────────────────────────────────────────────── */
+.radius-sharp { --jux-radius-override: var(--jux-radius-sharp); }
+.radius-sm    { --jux-radius-override: var(--jux-radius-sm); }
+.radius-md    { --jux-radius-override: var(--jux-radius-md); }
+.radius-lg    { --jux-radius-override: var(--jux-radius-lg); }
+.radius-xl    { --jux-radius-override: var(--jux-radius-xl); }
+.radius-2xl   { --jux-radius-override: var(--jux-radius-2xl); }
+.radius-full  { --jux-radius-override: var(--jux-radius-full); }
+
+/* ─────────────────────────────────────────────────────────────────
+ * FONT WEIGHT DESCRIPTORS
+ * ───────────────────────────────────────────────────────────────── */
+.weight-thin      { font-weight: var(--jux-weight-thin); }
+.weight-light     { font-weight: var(--jux-weight-light); }
+.weight-normal    { font-weight: var(--jux-weight-normal); }
+.weight-medium    { font-weight: var(--jux-weight-medium); }
+.weight-semibold  { font-weight: var(--jux-weight-semibold); }
+.weight-bold      { font-weight: var(--jux-weight-bold); }
+.weight-black     { font-weight: var(--jux-weight-black); }
+
+/* ─────────────────────────────────────────────────────────────────
+ * FONT SIZE DESCRIPTORS
+ * ───────────────────────────────────────────────────────────────── */
+.text-xs   { font-size: var(--jux-text-xs); }
+.text-sm   { font-size: var(--jux-text-sm); }
+.text-base { font-size: var(--jux-text-base); }
+.text-lg   { font-size: var(--jux-text-lg); }
+.text-xl   { font-size: var(--jux-text-xl); }
+.text-2xl  { font-size: var(--jux-text-2xl); }
+.text-3xl  { font-size: var(--jux-text-3xl); }
+.text-4xl  { font-size: var(--jux-text-4xl); }
+.text-5xl  { font-size: var(--jux-text-5xl); }
+
+/* ─────────────────────────────────────────────────────────────────
+ * FONT FAMILY DESCRIPTORS
+ * ───────────────────────────────────────────────────────────────── */
+.font-sans  { font-family: var(--jux-font-sans); }
+.font-serif { font-family: var(--jux-font-serif); }
+.font-mono  { font-family: var(--jux-font-mono); }
+
+/* ──────────────────────────────────────────────────────────────────
+ * DESKTOP SCALE-UP (@media: 1024px+)
+ * ────────────────────────────────────────────────────────────────── */
+@media (min-width: 1024px) {
+  .pad-xs  { --jux-pad-token: calc(var(--jux-space-xs) * 1.25); }
+  .pad-sm  { --jux-pad-token: calc(var(--jux-space-sm) * 1.25); }
+  .pad-md  { --jux-pad-token: calc(var(--jux-space-md) * 1.25); }
+  .pad-lg  { --jux-pad-token: calc(var(--jux-space-lg) * 1.25); }
+  .pad-xl  { --jux-pad-token: calc(var(--jux-space-xl) * 1.25); }
+  .pad-2xl { --jux-pad-token: calc(var(--jux-space-2xl) * 1.25); }
+  .pad-3xl { --jux-pad-token: calc(var(--jux-space-3xl) * 1.25); }
+  
+  .gap-xs  { --jux-gap-token: calc(var(--jux-space-xs) * 1.25); }
+  .gap-sm  { --jux-gap-token: calc(var(--jux-space-sm) * 1.25); }
+  .gap-md  { --jux-gap-token: calc(var(--jux-space-md) * 1.25); }
+  .gap-lg  { --jux-gap-token: calc(var(--jux-space-lg) * 1.25); }
+  .gap-xl  { --jux-gap-token: calc(var(--jux-space-xl) * 1.25); }
+  .gap-2xl { --jux-gap-token: calc(var(--jux-space-2xl) * 1.25); }
+  .gap-3xl { --jux-gap-token: calc(var(--jux-space-3xl) * 1.25); }
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   BUTTON (Ultra-Minimal - Pure Token Usage)
+   ══════════════════════════════════════════════════════════════════ */
+
+.jux-button {
+  /* Colors */
+  background: var(--jux-brand-bg);
+  color: #fff;
+  border: var(--jux-stroke) solid var(--jux-border-color);
+  
+  /* Shape */
+  border-radius: var(--jux-radius);
+  
+  /* Size */
+  padding: var(--jux-pad, var(--jux-space-md));
+  font-size: var(--jux-font-size);
+  font-weight: var(--jux-weight-medium);
+  font-family: var(--jux-font-family);
+  
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--jux-space-sm);
+  
+  /* Interaction */
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.15s ease;
+  line-height: 1;
+  text-decoration: none;
+}
+
+/* States use burn calculations */
+.jux-button:hover:not(:disabled) {
+  background: var(--jux-brand-color-hover);
+}
+
+.jux-button:active:not(:disabled) {
+  background: var(--jux-brand-color-active);
+}
+
+.jux-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jux-brand-bg) 30%, transparent 70%);
+}
+
+.jux-button:disabled {
+  opacity: var(--jux-burn-strong);
+  cursor: not-allowed;
+}
+
+/* ══════════════════════════════════════════════════════════════════
+   BUTTON VARIANT CLASSES (Optional)
+   ══════════════════════════════════════════════════════════════════ */
+
+.jux-button-success {
+  --jux-accent-bg: var(--jux-success-bg);
+  --jux-accent-to: var(--jux-success-to);
+}
+
+.jux-button-danger {
+  --jux-accent-bg: var(--jux-danger-bg);
+  --jux-accent-to: var(--jux-danger-to);
+}
+
+.jux-button-warning {
+  --jux-accent-bg: var(--jux-warning-bg);
+  --jux-accent-to: var(--jux-warning-to);
+}
+
+.jux-button-info {
+  --jux-accent-bg: var(--jux-info-bg);
+  --jux-accent-to: var(--jux-info-to);
+}
+
+.jux-button-secondary {
+  --jux-accent-bg: var(--jux-brand-accent-bg);
+  --jux-accent-to: var(--jux-brand-accent-to);
+}
+
+.jux-button-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--jux-brand-color);
+}
+
+.jux-button-outline {
+  background: transparent;
+  color: var(--jux-brand-color);
+  border-color: var(--jux-brand-color);
+}
+
+/* Size classes */
+.jux-button-small {
+  --jux-pad: calc(0.375rem * var(--jux-size-xs)) calc(0.75rem * var(--jux-size-xs));
+  font-size: calc(var(--jux-base-font) * var(--jux-size-xs));
+}
+
+.jux-button-large {
+  --jux-pad: calc(0.5rem * var(--jux-size-lg)) calc(1rem * var(--jux-size-lg));
+  font-size: calc(var(--jux-base-font) * var(--jux-size-lg));
+}