@almadar/ui 5.123.0 → 5.124.0

package/themes/arctic.css

@@ -1,235 +0,0 @@
-/**
- * Arctic Theme — "Ice Crystal"
- *
- * Cool ice blue with a clean, precise, crisp aesthetic inspired by frozen
- * landscapes and crystalline formations. Sky blues and cyans evoke glacial
- * clarity, with sharp clean shadows and precise border radii. Tighter
- * letter-spacing and snappy transitions reinforce the theme's precision
- * and clarity.
- */
-
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
-[data-theme="arctic-light"] {
-    /* Shadows - Cool blue-tinted, crisp and clean */
-    --shadow-main: 0 1px 2px rgba(2, 132, 199, 0.08), 0 1px 1px rgba(2, 132, 199, 0.05);
-    --shadow-sm: 0 1px 1px rgba(2, 132, 199, 0.05);
-    --shadow-lg:
-        0 8px 20px -4px rgba(2, 132, 199, 0.1), 0 4px 8px -4px rgba(2, 132, 199, 0.06);
-    --shadow-inner: inset 0 1px 2px rgba(2, 132, 199, 0.05);
-    --shadow-none: none;
-    --shadow-hover: 0 8px 30px -8px rgba(2, 132, 199, 0.16);
-    --shadow-active: 0 1px 1px rgba(2, 132, 199, 0.05);
-
-    /* Border radius - Precise, clean */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 14px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Ice blue, cool and clean */
-    --color-primary: #0369a1;
-    --color-primary-hover: #075985;
-    --color-primary-foreground: #ffffff;
-
-    --color-secondary: #e0f2fe;
-    --color-secondary-hover: #bae6fd;
-    --color-secondary-foreground: #0c4a6e;
-
-    --color-accent: #67e8f9;
-    --color-accent-foreground: #164e63;
-
-    --color-muted: #e0f2fe;
-    --color-muted-foreground: #64748b;
-
-    --color-background: #f0f9ff;
-    --color-foreground: #0c4a6e;
-    --color-card: #ffffff;
-    --color-card-foreground: #0c4a6e;
-    --color-surface: #e0f2fe;
-    --color-border: rgba(2, 132, 199, 0.2);
-    --color-input: rgba(2, 132, 199, 0.22);
-    --color-ring: #0284c7;
-
-    /* Semantic colors */
-    --color-error: #dc2626;
-    --color-error-foreground: #ffffff;
-    --color-success: #16a34a;
-    --color-success-foreground: #ffffff;
-    --color-warning: #ca8a04;
-    --color-warning-foreground: #000000;
-    --color-info: #2563eb;
-    --color-info-foreground: #ffffff;
-
-    /* Icon styling */
-    --icon-stroke-width: 1.75;
-    --icon-color: #0284c7;
-
-    /* Transitions - Crisp, snappy */
-    --transition-fast: 120ms;
-    --transition-normal: 220ms;
-    --transition-slow: 350ms;
-    --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 */
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #0284c7;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
-    --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 (aliases existing --transition-timing for backward compat) */
-    --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);
-}
-
-/* ==========================================================================
- * DARK MODE
- * ========================================================================== */
-[data-theme="arctic-dark"] {
-    /* Shadows - Cool ice-blue glow on deep dark */
-    --shadow-main: 0 1px 2px rgba(103, 232, 249, 0.08), 0 1px 1px rgba(0, 0, 0, 0.2);
-    --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.2);
-    --shadow-lg:
-        0 8px 20px -4px rgba(0, 0, 0, 0.35), 0 4px 8px -4px rgba(103, 232, 249, 0.06);
-    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.25);
-    --shadow-none: none;
-    --shadow-hover: 0 8px 30px -8px rgba(103, 232, 249, 0.14);
-    --shadow-active: 0 1px 1px rgba(0, 0, 0, 0.2);
-
-    /* Border radius - Precise, clean */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 14px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Bright cyan on deep ice blue */
-    --color-primary: #7dd3fc;
-    --color-primary-hover: #bae6fd;
-    --color-primary-foreground: #081520;
-
-    --color-secondary: #0c2236;
-    --color-secondary-hover: #10304d;
-    --color-secondary-foreground: #e0f2fe;
-
-    --color-accent: #67e8f9;
-    --color-accent-foreground: #164e63;
-
-    --color-muted: #0c2236;
-    --color-muted-foreground: #7dd3fc;
-
-    --color-background: #081520;
-    --color-foreground: #e0f2fe;
-    --color-card: #0c2236;
-    --color-card-foreground: #e0f2fe;
-    --color-surface: #10304d;
-    --color-border: rgba(103, 232, 249, 0.2);
-    --color-input: rgba(103, 232, 249, 0.25);
-    --color-ring: #7dd3fc;
-
-    /* Semantic colors - Brighter for dark mode */
-    --color-error: #f87171;
-    --color-error-foreground: #000000;
-    --color-success: #4ade80;
-    --color-success-foreground: #000000;
-    --color-warning: #fbbf24;
-    --color-warning-foreground: #000000;
-    --color-info: #60a5fa;
-    --color-info-foreground: #000000;
-
-    /* Icon styling */
-    --icon-stroke-width: 1.75;
-    --icon-color: #67e8f9;
-
-    /* Transitions - Crisp, snappy */
-    --transition-fast: 120ms;
-    --transition-normal: 220ms;
-    --transition-slow: 350ms;
-    --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 */
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #67e8f9;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
-    --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 (aliases existing --transition-timing for backward compat) */
-    --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);
-}

package/themes/copper.css

@@ -1,235 +0,0 @@
-/**
- * Copper Theme — "Warm Industrial"
- *
- * Metallic copper and bronze tones with a functional, solid personality.
- * Inspired by industrial metalwork, riveted surfaces, and forged components.
- * Thicker borders, heavier font weights, and fast mechanical transitions
- * create a utilitarian aesthetic that prioritizes clarity and durability
- * over decoration.
- */
-
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
-[data-theme="copper-light"] {
-    /* Shadows - Warm metallic, bronze-tinted */
-    --shadow-main: 0 1px 3px rgba(180, 83, 9, 0.1), 0 1px 2px rgba(180, 83, 9, 0.06);
-    --shadow-sm: 0 1px 2px rgba(180, 83, 9, 0.06);
-    --shadow-lg:
-        0 10px 25px -5px rgba(180, 83, 9, 0.12), 0 8px 10px -6px rgba(180, 83, 9, 0.08);
-    --shadow-inner: inset 0 1px 2px rgba(180, 83, 9, 0.06);
-    --shadow-none: none;
-    --shadow-hover: 0 10px 40px -10px rgba(180, 83, 9, 0.18);
-    --shadow-active: 0 1px 2px rgba(180, 83, 9, 0.06);
-
-    /* Border radius - Functional, not too rounded */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 8px;
-    --radius-xl: 10px;
-    --radius-full: 9999px;
-
-    /* Border width - Thick, industrial */
-    --border-width: 2px;
-    --border-width-thin: 1px;
-    --border-width-thick: 3px;
-
-    /* Colors - Metallic copper and warm neutrals */
-    --color-primary: #b45309;
-    --color-primary-hover: #92400e;
-    --color-primary-foreground: #ffffff;
-
-    --color-secondary: #f5f0ea;
-    --color-secondary-hover: #ebe4da;
-    --color-secondary-foreground: #292524;
-
-    --color-accent: #78350f;
-    --color-accent-foreground: #fef3c7;
-
-    --color-muted: #f5f0ea;
-    --color-muted-foreground: #78716c;
-
-    --color-background: #faf8f5;
-    --color-foreground: #292524;
-    --color-card: #ffffff;
-    --color-card-foreground: #292524;
-    --color-surface: #f5f0ea;
-    --color-border: rgba(180, 83, 9, 0.25);
-    --color-input: rgba(180, 83, 9, 0.25);
-    --color-ring: #b45309;
-
-    /* Semantic colors */
-    --color-error: #dc2626;
-    --color-error-foreground: #ffffff;
-    --color-success: #16a34a;
-    --color-success-foreground: #ffffff;
-    --color-warning: #ca8a04;
-    --color-warning-foreground: #000000;
-    --color-info: #2563eb;
-    --color-info-foreground: #ffffff;
-
-    /* Icon styling */
-    --icon-stroke-width: 2;
-    --icon-color: #b45309;
-
-    /* Transitions - Mechanical, fast */
-    --transition-fast: 100ms;
-    --transition-normal: 200ms;
-    --transition-slow: 300ms;
-    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms - Subtle, functional */
-    --hover-scale: 1.0;
-    --hover-translate-y: -1px;
-    --hover-translate-x: 0;
-    --active-scale: 0.98;
-    --active-translate-y: 1px;
-
-    /* Focus ring */
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #b45309;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
-    --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 (aliases existing --transition-timing for backward compat) */
-    --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);
-}
-
-/* ==========================================================================
- * DARK MODE
- * ========================================================================== */
-[data-theme="copper-dark"] {
-    /* Shadows - Deep bronze glow on dark */
-    --shadow-main: 0 1px 3px rgba(217, 119, 6, 0.1), 0 1px 2px rgba(0, 0, 0, 0.22);
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
-    --shadow-lg:
-        0 10px 25px -5px rgba(0, 0, 0, 0.38), 0 8px 10px -6px rgba(217, 119, 6, 0.1);
-    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.28);
-    --shadow-none: none;
-    --shadow-hover: 0 10px 40px -10px rgba(217, 119, 6, 0.16);
-    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.22);
-
-    /* Border radius - Functional, not too rounded */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 8px;
-    --radius-xl: 10px;
-    --radius-full: 9999px;
-
-    /* Border width - Thick, industrial */
-    --border-width: 2px;
-    --border-width-thin: 1px;
-    --border-width-thick: 3px;
-
-    /* Colors - Bright copper on dark bronze */
-    --color-primary: #d97706;
-    --color-primary-hover: #f59e0b;
-    --color-primary-foreground: #1a1410;
-
-    --color-secondary: #262018;
-    --color-secondary-hover: #302820;
-    --color-secondary-foreground: #e7e0d6;
-
-    --color-accent: #78350f;
-    --color-accent-foreground: #fef3c7;
-
-    --color-muted: #262018;
-    --color-muted-foreground: #d6d3d1;
-
-    --color-background: #1a1410;
-    --color-foreground: #e7e0d6;
-    --color-card: #262018;
-    --color-card-foreground: #e7e0d6;
-    --color-surface: #302820;
-    --color-border: rgba(180, 83, 9, 0.3);
-    --color-input: rgba(180, 83, 9, 0.3);
-    --color-ring: #d97706;
-
-    /* Semantic colors - Brighter for dark mode */
-    --color-error: #f87171;
-    --color-error-foreground: #000000;
-    --color-success: #4ade80;
-    --color-success-foreground: #000000;
-    --color-warning: #fbbf24;
-    --color-warning-foreground: #000000;
-    --color-info: #60a5fa;
-    --color-info-foreground: #000000;
-
-    /* Icon styling */
-    --icon-stroke-width: 2;
-    --icon-color: #d97706;
-
-    /* Transitions - Mechanical, fast */
-    --transition-fast: 100ms;
-    --transition-normal: 200ms;
-    --transition-slow: 300ms;
-    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms - Subtle, functional */
-    --hover-scale: 1.0;
-    --hover-translate-y: -1px;
-    --hover-translate-x: 0;
-    --active-scale: 0.98;
-    --active-translate-y: 1px;
-
-    /* Focus ring */
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #d97706;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
-    --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 (aliases existing --transition-timing for backward compat) */
-    --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);
-}

package/themes/ember.css

@@ -1,238 +0,0 @@
-/**
- * Ember Theme — "Fire & Energy"
- *
- * A bold, energetic palette driven by deep reds and warm ambers.
- * Designed for applications that need to convey power, urgency, and
- * intensity. Features dramatic shadows with red glow in dark mode,
- * heavier font weights for impactful typography, and punchy fast
- * transitions that make every interaction feel decisive and forceful.
- */
-
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
-[data-theme="ember-light"] {
-    /* Shadows - Warm, dramatic */
-    --shadow-main: 0 2px 6px rgba(220, 38, 38, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
-    --shadow-sm: 0 1px 3px rgba(220, 38, 38, 0.06);
-    --shadow-lg:
-        0 8px 24px -4px rgba(220, 38, 38, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
-    --shadow-inner: inset 0 1px 3px rgba(220, 38, 38, 0.06);
-    --shadow-none: none;
-    --shadow-hover:
-        0 8px 28px -4px rgba(220, 38, 38, 0.16), 0 4px 12px rgba(245, 158, 11, 0.08);
-    --shadow-active: 0 1px 3px rgba(220, 38, 38, 0.08);
-
-    /* Border radius - Controlled, not too rounded */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 12px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Warm reds and ambers */
-    --color-primary: #dc2626;
-    --color-primary-hover: #b91c1c;
-    --color-primary-foreground: #ffffff;
-
-    --color-secondary: #fef2f2;
-    --color-secondary-hover: #fee2e2;
-    --color-secondary-foreground: #7f1d1d;
-
-    --color-accent: #f59e0b;
-    --color-accent-foreground: #451a03;
-
-    --color-muted: #fef2f2;
-    --color-muted-foreground: #78716c;
-
-    --color-background: #fef2f2;
-    --color-foreground: #450a0a;
-    --color-card: #ffffff;
-    --color-card-foreground: #450a0a;
-    --color-surface: #fee2e2;
-    --color-border: rgba(220, 38, 38, 0.2);
-    --color-input: rgba(220, 38, 38, 0.25);
-    --color-ring: #dc2626;
-
-    /* Semantic colors */
-    --color-error: #be123c;
-    --color-error-foreground: #ffffff;
-    --color-success: #16a34a;
-    --color-success-foreground: #ffffff;
-    --color-warning: #d97706;
-    --color-warning-foreground: #000000;
-    --color-info: #2563eb;
-    --color-info-foreground: #ffffff;
-
-    /* Icon styling */
-    --icon-stroke-width: 2.25;
-    --icon-color: #dc2626;
-
-    /* Transitions - Fast, punchy */
-    --transition-fast: 80ms;
-    --transition-normal: 150ms;
-    --transition-slow: 250ms;
-    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms - Energetic */
-    --hover-scale: 1.02;
-    --hover-translate-y: -2px;
-    --hover-translate-x: 0;
-    --active-scale: 0.96;
-    --active-translate-y: 1px;
-
-    /* Focus ring */
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #dc2626;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
-    --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 (aliases existing --transition-timing for backward compat) */
-    --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);
-}
-
-/* ==========================================================================
- * DARK MODE
- * ========================================================================== */
-[data-theme="ember-dark"] {
-    /* Shadows - Dramatic red glow */
-    --shadow-main:
-        0 2px 8px rgba(220, 38, 38, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
-    --shadow-sm: 0 1px 4px rgba(220, 38, 38, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
-    --shadow-lg:
-        0 8px 28px rgba(220, 38, 38, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4);
-    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.3);
-    --shadow-none: none;
-    --shadow-hover:
-        0 8px 32px rgba(220, 38, 38, 0.25), 0 4px 16px rgba(245, 158, 11, 0.1);
-    --shadow-active: 0 2px 6px rgba(220, 38, 38, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
-
-    /* Border radius - Controlled, not too rounded */
-    --radius-none: 0px;
-    --radius-sm: 4px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 12px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Deep red-black */
-    --color-primary: #f87171;
-    --color-primary-hover: #fca5a5;
-    --color-primary-foreground: #1a0505;
-
-    --color-secondary: #2a0a0a;
-    --color-secondary-hover: #3d1111;
-    --color-secondary-foreground: #fee2e2;
-
-    --color-accent: #f59e0b;
-    --color-accent-foreground: #451a03;
-
-    --color-muted: #2a0a0a;
-    --color-muted-foreground: #fca5a5;
-
-    --color-background: #1a0505;
-    --color-foreground: #fee2e2;
-    --color-card: #2a0a0a;
-    --color-card-foreground: #fee2e2;
-    --color-surface: #3d1111;
-    --color-border: rgba(245, 158, 11, 0.2);
-    --color-input: rgba(245, 158, 11, 0.25);
-    --color-ring: #f87171;
-
-    /* Semantic colors - Brighter for dark mode */
-    --color-error: #fb7185;
-    --color-error-foreground: #000000;
-    --color-success: #4ade80;
-    --color-success-foreground: #000000;
-    --color-warning: #fbbf24;
-    --color-warning-foreground: #000000;
-    --color-info: #60a5fa;
-    --color-info-foreground: #000000;
-
-    /* Icon styling */
-    --icon-stroke-width: 2.25;
-    --icon-color: #f87171;
-
-    /* Transitions - Fast, punchy */
-    --transition-fast: 80ms;
-    --transition-normal: 150ms;
-    --transition-slow: 250ms;
-    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms - Energetic */
-    --hover-scale: 1.02;
-    --hover-translate-y: -2px;
-    --hover-translate-x: 0;
-    --active-scale: 0.96;
-    --active-translate-y: 1px;
-
-    /* Focus ring */
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #f87171;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* Motion axis — duration palette (aliases existing --transition-* for backward compat) */
-    --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 (aliases existing --transition-timing for backward compat) */
-    --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);
-}