@almadar/ui 5.123.0 → 5.124.0

package/themes/forest.css

@@ -1,238 +0,0 @@
-/**
- * Forest Theme - "Woodland Serenity"
- *
- * Inspired by the calm of a sunlit forest. Features warm organic shadows
- * with brown tints, natural green tones from deep emerald to soft sage,
- * and gentle organic curves that evoke leaves and bark. Natural-paced
- * transitions create a grounded, earthy, tranquil experience.
- */
-
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
-[data-theme="forest-light"] {
-    /* Shadows - Warm organic, brown-tinted */
-    --shadow-main:
-        0 3px 10px rgba(45, 106, 79, 0.1), 0 1px 3px rgba(62, 39, 15, 0.06);
-    --shadow-sm: 0 2px 4px rgba(62, 39, 15, 0.07);
-    --shadow-lg:
-        0 8px 24px rgba(45, 106, 79, 0.12), 0 4px 8px rgba(62, 39, 15, 0.06);
-    --shadow-inner: inset 0 1px 2px rgba(62, 39, 15, 0.06);
-    --shadow-none: none;
-    --shadow-hover:
-        0 10px 32px rgba(45, 106, 79, 0.16), 0 4px 10px rgba(62, 39, 15, 0.08);
-    --shadow-active: 0 2px 6px rgba(45, 106, 79, 0.1);
-
-    /* Border radius - Organic curves */
-    --radius-none: 0px;
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-    --radius-xl: 16px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Forest green on warm light background */
-    --color-primary: #2d6a4f;
-    --color-primary-hover: #1b4332;
-    --color-primary-foreground: #ffffff;
-
-    --color-secondary: #f0f5f1;
-    --color-secondary-hover: #dfe8e0;
-    --color-secondary-foreground: #1b4332;
-
-    --color-accent: #95d5b2;
-    --color-accent-foreground: #1b4332;
-
-    --color-muted: #f0f5f1;
-    --color-muted-foreground: #5f7a68;
-
-    --color-background: #f8faf8;
-    --color-foreground: #1a2e22;
-    --color-card: #ffffff;
-    --color-card-foreground: #1a2e22;
-    --color-surface: #f0f5f1;
-    --color-border: rgba(45, 106, 79, 0.2);
-    --color-input: rgba(45, 106, 79, 0.15);
-    --color-ring: #2d6a4f;
-
-    /* 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: #0ea5e9;
-    --color-info-foreground: #ffffff;
-
-    /* Icon styling */
-    --icon-stroke-width: 1.75;
-    --icon-color: #2d6a4f;
-
-    /* Transitions - Natural pace */
-    --transition-fast: 150ms;
-    --transition-normal: 300ms;
-    --transition-slow: 500ms;
-    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms */
-    --hover-scale: 1.02;
-    --hover-translate-y: -2px;
-    --hover-translate-x: 0;
-    --active-scale: 0.98;
-    --active-translate-y: 0;
-
-    /* Focus ring */
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #2d6a4f;
-
-    /* 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="forest-dark"] {
-    /* Shadows - Warm earthy glow from primary */
-    --shadow-main:
-        0 3px 12px rgba(82, 183, 136, 0.1), 0 1px 3px rgba(0, 0, 0, 0.15);
-    --shadow-sm: 0 2px 5px rgba(82, 183, 136, 0.07);
-    --shadow-lg:
-        0 8px 28px rgba(82, 183, 136, 0.18), 0 4px 10px rgba(0, 0, 0, 0.12);
-    --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.15);
-    --shadow-none: none;
-    --shadow-hover:
-        0 12px 36px rgba(82, 183, 136, 0.25), 0 4px 12px rgba(149, 213, 178, 0.12);
-    --shadow-active: 0 2px 6px rgba(82, 183, 136, 0.15);
-
-    /* Border radius - Organic curves */
-    --radius-none: 0px;
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-    --radius-xl: 16px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Bright sage on deep forest */
-    --color-primary: #52b788;
-    --color-primary-hover: #74c69d;
-    --color-primary-foreground: #081c11;
-
-    --color-secondary: #142a1c;
-    --color-secondary-hover: #1e3a28;
-    --color-secondary-foreground: #d4e8db;
-
-    --color-accent: #95d5b2;
-    --color-accent-foreground: #081c11;
-
-    --color-muted: #142a1c;
-    --color-muted-foreground: #88ad96;
-
-    --color-background: #0c1a12;
-    --color-foreground: #e6f0ea;
-    --color-card: #12251a;
-    --color-card-foreground: #e6f0ea;
-    --color-surface: #142a1c;
-    --color-border: rgba(82, 183, 136, 0.2);
-    --color-input: rgba(82, 183, 136, 0.22);
-    --color-ring: #52b788;
-
-    /* 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: #38bdf8;
-    --color-info-foreground: #000000;
-
-    /* Icon styling */
-    --icon-stroke-width: 1.75;
-    --icon-color: #52b788;
-
-    /* Transitions - Natural pace */
-    --transition-fast: 150ms;
-    --transition-normal: 300ms;
-    --transition-slow: 500ms;
-    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms */
-    --hover-scale: 1.02;
-    --hover-translate-y: -2px;
-    --hover-translate-x: 0;
-    --active-scale: 0.98;
-    --active-translate-y: 0;
-
-    /* Focus ring */
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #52b788;
-
-    /* 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/lavender.css

@@ -1,233 +0,0 @@
-/**
- * Lavender Theme — "Creative Studio"
- *
- * Violet/purple palette with soft, creative, and playful aesthetics.
- * Pillowy rounded corners, bouncy transitions, and purple-tinted shadows
- * make this theme ideal for creative tools, design apps, and playful UIs.
- */
-
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
-[data-theme="lavender-light"] {
-    /* Shadows - Purple-tinted, soft */
-    --shadow-main: 0 1px 3px rgba(124, 58, 237, 0.1), 0 1px 2px rgba(124, 58, 237, 0.06);
-    --shadow-sm: 0 1px 2px rgba(124, 58, 237, 0.06);
-    --shadow-lg:
-        0 10px 25px -5px rgba(124, 58, 237, 0.15), 0 8px 10px -6px rgba(124, 58, 237, 0.1);
-    --shadow-inner: inset 0 1px 2px rgba(124, 58, 237, 0.08);
-    --shadow-none: none;
-    --shadow-hover: 0 10px 40px -10px rgba(124, 58, 237, 0.25);
-    --shadow-active: 0 1px 2px rgba(124, 58, 237, 0.06);
-
-    /* Border radius - Pillowy, very rounded */
-    --radius-none: 0px;
-    --radius-sm: 12px;
-    --radius-md: 16px;
-    --radius-lg: 24px;
-    --radius-xl: 32px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Violet palette, soft and creative */
-    --color-primary: #7c3aed;
-    --color-primary-hover: #6d28d9;
-    --color-primary-foreground: #ffffff;
-
-    --color-secondary: #f5f3ff;
-    --color-secondary-hover: #ede9fe;
-    --color-secondary-foreground: #5b21b6;
-
-    --color-accent: #a78bfa;
-    --color-accent-foreground: #2e1065;
-
-    --color-muted: #ede9fe;
-    --color-muted-foreground: #6b7280;
-
-    --color-background: #faf5ff;
-    --color-foreground: #2e1065;
-    --color-card: #ffffff;
-    --color-card-foreground: #2e1065;
-    --color-surface: #f3e8ff;
-    --color-border: rgba(124, 58, 237, 0.2);
-    --color-input: rgba(124, 58, 237, 0.15);
-    --color-ring: #7c3aed;
-
-    /* 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 - Violet tint */
-    --icon-stroke-width: 1.5;
-    --icon-color: #7c3aed;
-
-    /* Transitions - Bouncy, playful */
-    --transition-fast: 180ms;
-    --transition-normal: 300ms;
-    --transition-slow: 450ms;
-    --transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
-
-    /* Hover/Active transforms - Playful lift */
-    --hover-scale: 1.02;
-    --hover-translate-y: -2px;
-    --hover-translate-x: 0;
-    --active-scale: 0.98;
-    --active-translate-y: 0;
-
-    /* Focus ring */
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #7c3aed;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* 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);
-}
-
-/* ==========================================================================
- * DARK MODE
- * ========================================================================== */
-[data-theme="lavender-dark"] {
-    /* Shadows - Deep purple-tinted */
-    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(124, 58, 237, 0.15);
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
-    --shadow-lg:
-        0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(124, 58, 237, 0.2);
-    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-none: none;
-    --shadow-hover: 0 10px 40px -10px rgba(124, 58, 237, 0.35);
-    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.25);
-
-    /* Border radius - Pillowy, very rounded */
-    --radius-none: 0px;
-    --radius-sm: 12px;
-    --radius-md: 16px;
-    --radius-lg: 24px;
-    --radius-xl: 32px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Deep purple dark mode */
-    --color-primary: #7c3aed;
-    --color-primary-hover: #6d28d9;
-    --color-primary-foreground: #ffffff;
-
-    --color-secondary: #1a0d30;
-    --color-secondary-hover: #251445;
-    --color-secondary-foreground: #e9d5ff;
-
-    --color-accent: #a78bfa;
-    --color-accent-foreground: #2e1065;
-
-    --color-muted: #1a0d30;
-    --color-muted-foreground: #c4b5fd;
-
-    --color-background: #0f0720;
-    --color-foreground: #f3e8ff;
-    --color-card: #1a0d30;
-    --color-card-foreground: #f3e8ff;
-    --color-surface: #251445;
-    --color-border: rgba(167, 139, 250, 0.2);
-    --color-input: rgba(167, 139, 250, 0.15);
-    --color-ring: #a78bfa;
-
-    /* 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 - Lighter violet for dark */
-    --icon-stroke-width: 1.5;
-    --icon-color: #a78bfa;
-
-    /* Transitions - Bouncy, playful */
-    --transition-fast: 180ms;
-    --transition-normal: 300ms;
-    --transition-slow: 450ms;
-    --transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
-
-    /* Hover/Active transforms - Playful lift */
-    --hover-scale: 1.02;
-    --hover-translate-y: -2px;
-    --hover-translate-x: 0;
-    --active-scale: 0.98;
-    --active-translate-y: 0;
-
-    /* Focus ring */
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-color: #a78bfa;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* 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);
-}

package/themes/midnight.css

@@ -1,234 +0,0 @@
-/**
- * Midnight Theme — "Noir Elegance"
- *
- * Indigo/navy palette with sophisticated and luxurious aesthetics.
- * Refined corners, slow luxurious transitions, and deep indigo-tinted
- * shadows create an atmosphere of understated elegance, perfect for
- * dashboards, analytics, and professional enterprise UIs.
- */
-
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
-[data-theme="midnight-light"] {
-    /* Shadows - Indigo-tinted, deep */
-    --shadow-main: 0 1px 3px rgba(99, 102, 241, 0.1), 0 1px 2px rgba(99, 102, 241, 0.06);
-    --shadow-sm: 0 1px 2px rgba(99, 102, 241, 0.06);
-    --shadow-lg:
-        0 10px 25px -5px rgba(99, 102, 241, 0.15), 0 8px 10px -6px rgba(99, 102, 241, 0.1);
-    --shadow-inner: inset 0 1px 2px rgba(99, 102, 241, 0.08);
-    --shadow-none: none;
-    --shadow-hover: 0 10px 40px -10px rgba(99, 102, 241, 0.22);
-    --shadow-active: 0 1px 2px rgba(99, 102, 241, 0.06);
-
-    /* Border radius - Refined */
-    --radius-none: 0px;
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-    --radius-xl: 18px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Indigo palette, sophisticated */
-    --color-primary: #4f46e5;
-    --color-primary-hover: #4338ca;
-    --color-primary-foreground: #ffffff;
-
-    --color-secondary: #eef2ff;
-    --color-secondary-hover: #e0e7ff;
-    --color-secondary-foreground: #3730a3;
-
-    --color-accent: #818cf8;
-    --color-accent-foreground: #1e1b4b;
-
-    --color-muted: #e0e7ff;
-    --color-muted-foreground: #6b7280;
-
-    --color-background: #eef2ff;
-    --color-foreground: #1e1b4b;
-    --color-card: #ffffff;
-    --color-card-foreground: #1e1b4b;
-    --color-surface: #e0e7ff;
-    --color-border: rgba(99, 102, 241, 0.2);
-    --color-input: rgba(99, 102, 241, 0.15);
-    --color-ring: #6366f1;
-
-    /* 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 - Indigo tint */
-    --icon-stroke-width: 1.5;
-    --icon-color: #6366f1;
-
-    /* Transitions - Slow, luxurious */
-    --transition-fast: 200ms;
-    --transition-normal: 400ms;
-    --transition-slow: 600ms;
-    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms - Dignified, minimal */
-    --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: #6366f1;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* 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);
-}
-
-/* ==========================================================================
- * DARK MODE
- * ========================================================================== */
-[data-theme="midnight-dark"] {
-    /* Shadows - Deep indigo-tinted */
-    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(99, 102, 241, 0.1);
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-lg:
-        0 10px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(99, 102, 241, 0.15);
-    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.35);
-    --shadow-none: none;
-    --shadow-hover: 0 10px 40px -10px rgba(129, 140, 248, 0.3);
-    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.3);
-
-    /* Border radius - Refined */
-    --radius-none: 0px;
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-    --radius-xl: 18px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Near-black indigo dark mode */
-    --color-primary: #818cf8;
-    --color-primary-hover: #a5b4fc;
-    --color-primary-foreground: #1e1b4b;
-
-    --color-secondary: #12122a;
-    --color-secondary-hover: #1e1e3d;
-    --color-secondary-foreground: #c7d2fe;
-
-    --color-accent: #818cf8;
-    --color-accent-foreground: #1e1b4b;
-
-    --color-muted: #1e1e3d;
-    --color-muted-foreground: #a5b4fc;
-
-    --color-background: #0a0a1a;
-    --color-foreground: #e0e7ff;
-    --color-card: #12122a;
-    --color-card-foreground: #e0e7ff;
-    --color-surface: #1e1e3d;
-    --color-border: rgba(129, 140, 248, 0.2);
-    --color-input: rgba(129, 140, 248, 0.15);
-    --color-ring: #818cf8;
-
-    /* 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 - Lighter indigo for dark */
-    --icon-stroke-width: 1.5;
-    --icon-color: #818cf8;
-
-    /* Transitions - Slow, luxurious */
-    --transition-fast: 200ms;
-    --transition-normal: 400ms;
-    --transition-slow: 600ms;
-    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms - Dignified, minimal */
-    --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: #818cf8;
-
-    /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
-    /* 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);
-}