juxscript 1.1.245 → 1.1.247

package/lib/styles/foundation.css

@@ -1,542 +0,0 @@
-/* ══════════════════════════════════════════════════════════════════
-   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)
-   * ✅ MORE GENEROUS - Premium feel
-   * ═════════════════════════════════════════════════════════════════ */
-  --jux-space-xs: 0.375rem;    /* 6px */
-  --jux-space-sm: 0.75rem;     /* 12px */
-  --jux-space-md: 1rem;        /* 16px - ✅ Increased */
-  --jux-space-lg: 1.5rem;      /* 24px - ✅ Increased */
-  --jux-space-xl: 2.5rem;      /* 40px - ✅ Increased */
-  --jux-space-2xl: 3.5rem;     /* 56px - ✅ Increased */
-  --jux-space-3xl: 5rem;       /* 80px - ✅ Increased */
-  
-  /* ═════════════════════════════════════════════════════════════════
-   * 🔤 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;
-  --jux-text-sm: 0.875rem;
-  --jux-text-base: 1rem;
-  --jux-text-lg: 1.125rem;
-  --jux-text-xl: 1.25rem;
-  --jux-text-2xl: 1.5rem;
-  --jux-text-3xl: 1.875rem;
-  --jux-text-4xl: 2.25rem;
-  --jux-text-5xl: 3rem;
-  
-  /* 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
-   ✅ MOVED TO html SCOPE - Re-computes on [data-swag] change
-   ══════════════════════════════════════════════════════════════════ */
-
-html {
-  /* 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: var(--jux-surface-from);
-  border: var(--jux-stroke) solid var(--jux-border-color);
-  
-  /* Shape */
-  border-radius: var(--jux-radius);
-  
-  /* Size - ✅ MORE GENEROUS PADDING */
-  padding: 0.75rem 1.5rem; /* ✅ 12px 24px - much better */
-  font-size: var(--jux-font-size);
-  font-weight: var(--jux-weight-semibold); /* ✅ Bolder */
-  font-family: var(--jux-font-family);
-  letter-spacing: 0.025em; /* ✅ Subtle spacing for premium feel */
-  
-  /* Layout */
-  display: inline-flex;
-  align-items: center;
-  gap: var(--jux-space-sm);
-  
-  /* ✅ PREMIUM SHADOWS */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 
-              0 1px 2px rgba(0, 0, 0, 0.06);
-  
-  /* Interaction */
-  cursor: pointer;
-  user-select: none;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* ✅ Smoother easing */
-  line-height: 1;
-  text-decoration: none;
-}
-
-/* States use burn calculations */
-.jux-button:hover:not(:disabled) {
-  background: var(--jux-brand-color-hover);
-  transform: translateY(-1px); /* ✅ Subtle lift */
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
-              0 2px 4px rgba(0, 0, 0, 0.06);
-}
-
-.jux-button:active:not(:disabled) {
-  background: var(--jux-brand-color-active);
-  transform: translateY(0); /* ✅ Press down */
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-}
-
-.jux-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jux-brand-bg) 30%, transparent 70%),
-              0 1px 3px rgba(0, 0, 0, 0.08);
-}
-
-.jux-button:disabled {
-  opacity: var(--jux-burn-strong);
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
-}
-
-/* ══════════════════════════════════════════════════════════════════
-   BUTTON VARIANTS
-   ══════════════════════════════════════════════════════════════════ */
-
-.jux-button-primary {
-  /* Default - uses --jux-brand-bg from above */
-}
-
-.jux-button-secondary {
-  background: var(--jux-brand-accent-bg);
-}
-
-.jux-button-secondary:hover:not(:disabled) {
-  background: var(--jux-brand-accent-color-hover);
-}
-
-.jux-button-secondary:active:not(:disabled) {
-  background: var(--jux-brand-accent-color-active);
-}
-
-.jux-button-danger {
-  background: var(--jux-danger-bg);
-}
-
-.jux-button-danger:hover:not(:disabled) {
-  background: color-mix(in srgb, 
-    var(--jux-danger-from) calc(100% - var(--jux-burn-hover) * 100%), 
-    var(--jux-danger-to) calc(var(--jux-burn-hover) * 100%)
-  );
-}
-
-.jux-button-success {
-  background: var(--jux-success-bg);
-}
-
-.jux-button-success:hover:not(:disabled) {
-  background: color-mix(in srgb, 
-    var(--jux-success-from) calc(100% - var(--jux-burn-hover) * 100%), 
-    var(--jux-success-to) calc(var(--jux-burn-hover) * 100%)
-  );
-}
-
-.jux-button-warning {
-  background: var(--jux-warning-bg);
-}
-
-.jux-button-warning:hover:not(:disabled) {
-  background: color-mix(in srgb, 
-    var(--jux-warning-from) calc(100% - var(--jux-burn-hover) * 100%), 
-    var(--jux-warning-to) calc(var(--jux-burn-hover) * 100%)
-  );
-}
-
-.jux-button-info {
-  background: var(--jux-info-bg);
-}
-
-.jux-button-info:hover:not(:disabled) {
-  background: color-mix(in srgb, 
-    var(--jux-info-from) calc(100% - var(--jux-burn-hover) * 100%), 
-    var(--jux-info-to) calc(var(--jux-burn-hover) * 100%)
-  );
-}
-
-.jux-button-ghost {
-  background: transparent;
-  color: var(--jux-brand-color);
-  border-color: var(--jux-brand-color);
-}
-
-.jux-button-ghost:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--jux-brand-color) 10%, transparent 90%);
-}
-
-.jux-button-link {
-  background: transparent;
-  color: var(--jux-brand-color);
-  border: none;
-  text-decoration: underline;
-}
-
-.jux-button-link:hover:not(:disabled) {
-  background: transparent;
-  opacity: 0.8;
-}
-
-/* ══════════════════════════════════════════════════════════════════
-   BUTTON SIZES
-   ══════════════════════════════════════════════════════════════════ */
-
-.jux-button-small {
-  padding: 0.5rem 1rem; /* ✅ 8px 16px */
-  font-size: calc(var(--jux-text-base) * var(--jux-size-sm));
-}
-
-.jux-button-medium {
-  /* Default size from .jux-button */
-}
-
-.jux-button-large {
-  padding: 1rem 2rem; /* ✅ 16px 32px */
-  font-size: calc(var(--jux-text-base) * var(--jux-size-lg));
-}
-
-/* ══════════════════════════════════════════════════════════════════
-   HEADING STYLES
-   ══════════════════════════════════════════════════════════════════ */
-
-.jux-heading {
-  margin: 0;
-  font-family: var(--jux-font-family);
-  font-weight: var(--jux-weight-bold);
-  line-height: var(--jux-leading-tight);
-  color: var(--jux-text-color);
-  letter-spacing: -0.025em; /* ✅ Tighter for headings */
-}
-
-.jux-heading-1 {
-  font-size: var(--jux-text-4xl);
-  font-weight: var(--jux-weight-black);
-  letter-spacing: -0.04em; /* ✅ Even tighter for h1 */
-}
-
-.jux-heading-2 {
-  font-size: var(--jux-text-3xl);
-  font-weight: var(--jux-weight-bold);
-}
-
-.jux-heading-3 {
-  font-size: var(--jux-text-2xl);
-  font-weight: var(--jux-weight-bold);
-}
-
-.jux-heading-4 {
-  font-size: var(--jux-text-xl);
-  font-weight: var(--jux-weight-semibold);
-}
-
-.jux-heading-5 {
-  font-size: var(--jux-text-lg);
-  font-weight: var(--jux-weight-semibold);
-}
-
-.jux-heading-6 {
-  font-size: var(--jux-text-base);
-  font-weight: var(--jux-weight-semibold);
-}
-
-/* ══════════════════════════════════════════════════════════════════
-   PARAGRAPH STYLES
-   ══════════════════════════════════════════════════════════════════ */
-
-.jux-paragraph {
-  margin: 0;
-  font-family: var(--jux-font-family);
-  font-size: var(--jux-text-base);
-  font-weight: var(--jux-weight-normal);
-  line-height: var(--jux-leading-relaxed); /* ✅ More breathing room */
-  color: var(--jux-text-color);
-  max-width: 65ch; /* ✅ Better readability */
-}