le-kit 0.1.12 → 0.1.14

package/dist/le-kit/le-kit.css

@@ -1 +1,1010 @@
-:root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--le-spacing-0:0;--le-spacing-1:0.25rem;--le-spacing-2:0.5rem;--le-spacing-3:0.75rem;--le-spacing-4:1rem;--le-spacing-5:1.25rem;--le-spacing-6:1.5rem;--le-spacing-8:2rem;--le-spacing-10:2.5rem;--le-spacing-12:3rem;--le-spacing-16:4rem;--le-font-family-base:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--le-font-family-mono:'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;--le-font-size-xs:0.75rem;--le-font-size-sm:0.875rem;--le-font-size-md:1rem;--le-font-size-lg:1.125rem;--le-font-size-xl:1.25rem;--le-font-size-2xl:1.5rem;--le-font-size-3xl:1.875rem;--le-font-size-4xl:2.25rem;--le-font-weight-normal:400;--le-font-weight-medium:500;--le-font-weight-semibold:600;--le-font-weight-bold:700;--le-line-height-tight:1.25;--le-line-height-normal:1.5;--le-line-height-relaxed:1.75;--le-radius-none:0;--le-radius-xs:0.066rem;--le-radius-sm:0.125rem;--le-radius-md:0.25rem;--le-radius-lg:0.5rem;--le-radius-xl:0.75rem;--le-radius-2xl:1rem;--le-radius-full:9999px;--le-transition-fast:100ms;--le-transition-normal:200ms;--le-transition-slow:300ms;--le-transition-easing:cubic-bezier(0.4, 0, 0.2, 1);--le-z-dropdown:1000;--le-z-sticky:1020;--le-z-fixed:1030;--le-z-modal-backdrop:1040;--le-z-modal:1050;--le-z-popover:1060;--le-z-tooltip:1070}:root,[theme="default"]{--le-color-primary:#0088ff;--le-color-primary-light:#4da6ff;--le-color-primary-dark:#0066cc;--le-color-primary-contrast:#ffffff;--le-color-secondary:#6c757d;--le-color-secondary-light:#868e96;--le-color-secondary-dark:#545b62;--le-color-secondary-contrast:#ffffff;--le-color-success:#28a745;--le-color-success-light:#48c764;--le-color-success-dark:#1e7e34;--le-color-success-contrast:#ffffff;--le-color-warning:#ffc107;--le-color-warning-light:#ffcd39;--le-color-warning-dark:#d39e00;--le-color-warning-contrast:#212529;--le-color-danger:#dc3545;--le-color-danger-light:#e4606d;--le-color-danger-dark:#bd2130;--le-color-danger-contrast:#ffffff;--le-color-info:#17a2b8;--le-color-info-light:#3ab0c3;--le-color-info-dark:#117a8b;--le-color-info-contrast:#ffffff;--le-color-white:#ffffff;--le-color-black:#000000;--le-color-gray-50:#fafafa;--le-color-gray-100:#f5f5f5;--le-color-gray-200:#eeeeee;--le-color-gray-300:#e0e0e0;--le-color-gray-400:#bdbdbd;--le-color-gray-500:#9e9e9e;--le-color-gray-600:#757575;--le-color-gray-700:#616161;--le-color-gray-800:#424242;--le-color-gray-900:#212121;--le-color-background:#ffffff;--le-color-background-secondary:#f5f5f5;--le-color-background-tertiary:#eeeeee;--le-color-surface:#ffffff;--le-color-surface-elevated:#ffffff;--le-color-text-primary:#212121;--le-color-text-secondary:#757575;--le-color-text-disabled:#9e9e9e;--le-color-text-inverse:#ffffff;--le-color-border:#e0e0e0;--le-color-border-light:#eeeeee;--le-color-border-dark:#bdbdbd;--le-border-width:2px;--le-color-border-input:#c4d6e6;--le-color-focus:rgba(0, 136, 255, 0.5);--le-radius-none:0;--le-radius-sm:0.125rem;--le-radius-md:0.25rem;--le-radius-lg:0.5rem;--le-radius-xl:0.75rem;--le-radius-2xl:1rem;--le-radius-full:9999px;--le-shadow-none:none;--le-shadow-sm:0 1px 2px rgba(0, 0, 0, 0.05);--le-shadow-md:0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);--le-shadow-lg:0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);--le-shadow-xl:0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);--le-shadow-2xl:0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)}[theme="dark"]{--le-color-primary:#4da6ff;--le-color-primary-light:#80c1ff;--le-color-primary-dark:#0088ff;--le-color-primary-contrast:#000000;--le-color-secondary:#868e96;--le-color-secondary-light:#adb5bd;--le-color-secondary-dark:#6c757d;--le-color-secondary-contrast:#000000;--le-color-success:#48c764;--le-color-success-light:#6dd587;--le-color-success-dark:#28a745;--le-color-success-contrast:#000000;--le-color-warning:#ffcd39;--le-color-warning-light:#ffda6a;--le-color-warning-dark:#ffc107;--le-color-warning-contrast:#000000;--le-color-danger:#e4606d;--le-color-danger-light:#ea868f;--le-color-danger-dark:#dc3545;--le-color-danger-contrast:#000000;--le-color-info:#3ab0c3;--le-color-info-light:#6dc4d3;--le-color-info-dark:#17a2b8;--le-color-info-contrast:#000000;--le-color-white:#ffffff;--le-color-black:#000000;--le-color-gray-50:#212121;--le-color-gray-100:#424242;--le-color-gray-200:#616161;--le-color-gray-300:#757575;--le-color-gray-400:#9e9e9e;--le-color-gray-500:#bdbdbd;--le-color-gray-600:#e0e0e0;--le-color-gray-700:#eeeeee;--le-color-gray-800:#f5f5f5;--le-color-gray-900:#fafafa;--le-color-background:#121212;--le-color-background-secondary:#1e1e1e;--le-color-background-tertiary:#2d2d2d;--le-color-surface:#1e1e1e;--le-color-surface-elevated:#2d2d2d;--le-color-text-primary:#ffffff;--le-color-text-secondary:#b3b3b3;--le-color-text-disabled:#666666;--le-color-text-inverse:#121212;--le-color-border:#333333;--le-color-border-light:#2d2d2d;--le-color-border-dark:#444444;--le-border-width:2px;--le-color-border-input:#515c6b;--le-color-focus:rgba(77, 166, 255, 0.5);--le-radius-none:0;--le-radius-sm:0.125rem;--le-radius-md:0.25rem;--le-radius-lg:0.5rem;--le-radius-xl:0.75rem;--le-radius-2xl:1rem;--le-radius-full:9999px;--le-shadow-none:none;--le-shadow-sm:0 1px 2px rgba(0, 0, 0, 0.3);--le-shadow-md:0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);--le-shadow-lg:0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);--le-shadow-xl:0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);--le-shadow-2xl:0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3)}[theme="gradient"]{--le-color-primary:#8b5cf6;--le-color-primary-light:#a78bfa;--le-color-primary-dark:#7c3aed;--le-color-primary-contrast:#ffffff;--le-color-secondary:#ec4899;--le-color-secondary-light:#f472b6;--le-color-secondary-dark:#db2777;--le-color-secondary-contrast:#ffffff;--le-color-success:#10b981;--le-color-success-light:#34d399;--le-color-success-dark:#059669;--le-color-success-contrast:#ffffff;--le-color-warning:#f59e0b;--le-color-warning-light:#fbbf24;--le-color-warning-dark:#d97706;--le-color-warning-contrast:#000000;--le-color-danger:#ef4444;--le-color-danger-light:#f87171;--le-color-danger-dark:#dc2626;--le-color-danger-contrast:#ffffff;--le-color-info:#06b6d4;--le-color-info-light:#22d3ee;--le-color-info-dark:#0891b2;--le-color-info-contrast:#ffffff;--le-color-white:#ffffff;--le-color-black:#000000;--le-color-gray-50:#faf5ff;--le-color-gray-100:#f3e8ff;--le-color-gray-200:#e9d5ff;--le-color-gray-300:#d8b4fe;--le-color-gray-400:#c084fc;--le-color-gray-500:#a855f7;--le-color-gray-600:#9333ea;--le-color-gray-700:#7e22ce;--le-color-gray-800:#6b21a8;--le-color-gray-900:#581c87;--le-color-background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--le-color-background-secondary:rgba(255, 255, 255, 0.1);--le-color-background-tertiary:rgba(255, 255, 255, 0.05);--le-color-surface:rgba(255, 255, 255, 0.95);--le-color-surface-elevated:#ffffff;--le-color-text-primary:#1f2937;--le-color-text-secondary:#6b7280;--le-color-text-disabled:#9ca3af;--le-color-text-inverse:#ffffff;--le-color-border:rgba(139, 92, 246, 0.3);--le-color-border-light:rgba(139, 92, 246, 0.1);--le-color-border-dark:rgba(139, 92, 246, 0.5);--le-border-width:2px;--le-color-border-input:#eccddd;--le-color-focus:rgba(139, 92, 246, 0.5);--le-radius-none:0;--le-radius-sm:0.25rem;--le-radius-md:0.5rem;--le-radius-lg:1rem;--le-radius-xl:1.5rem;--le-radius-2xl:2rem;--le-radius-full:9999px;--le-shadow-none:none;--le-shadow-sm:0 1px 2px rgba(139, 92, 246, 0.1);--le-shadow-md:0 4px 6px rgba(139, 92, 246, 0.15), 0 2px 4px rgba(139, 92, 246, 0.1);--le-shadow-lg:0 10px 20px rgba(139, 92, 246, 0.2), 0 4px 8px rgba(139, 92, 246, 0.1);--le-shadow-xl:0 20px 40px rgba(139, 92, 246, 0.25), 0 8px 16px rgba(139, 92, 246, 0.15);--le-shadow-2xl:0 30px 60px rgba(139, 92, 246, 0.3), 0 15px 30px rgba(139, 92, 246, 0.2)}[theme="minimal"]{--le-color-primary:#111827;--le-color-primary-light:#374151;--le-color-primary-dark:#030712;--le-color-primary-contrast:#ffffff;--le-color-secondary:#6b7280;--le-color-secondary-light:#9ca3af;--le-color-secondary-dark:#4b5563;--le-color-secondary-contrast:#ffffff;--le-color-success:#059669;--le-color-success-light:#10b981;--le-color-success-dark:#047857;--le-color-success-contrast:#ffffff;--le-color-warning:#d97706;--le-color-warning-light:#f59e0b;--le-color-warning-dark:#b45309;--le-color-warning-contrast:#ffffff;--le-color-danger:#dc2626;--le-color-danger-light:#ef4444;--le-color-danger-dark:#b91c1c;--le-color-danger-contrast:#ffffff;--le-color-info:#0284c7;--le-color-info-light:#0ea5e9;--le-color-info-dark:#0369a1;--le-color-info-contrast:#ffffff;--le-color-white:#ffffff;--le-color-black:#000000;--le-color-gray-50:#f9fafb;--le-color-gray-100:#f3f4f6;--le-color-gray-200:#e5e7eb;--le-color-gray-300:#d1d5db;--le-color-gray-400:#9ca3af;--le-color-gray-500:#6b7280;--le-color-gray-600:#4b5563;--le-color-gray-700:#374151;--le-color-gray-800:#1f2937;--le-color-gray-900:#111827;--le-color-background:#ffffff;--le-color-background-secondary:#fafafa;--le-color-background-tertiary:#f5f5f5;--le-color-surface:#ffffff;--le-color-surface-elevated:#ffffff;--le-color-text-primary:#111827;--le-color-text-secondary:#6b7280;--le-color-text-disabled:#9ca3af;--le-color-text-inverse:#ffffff;--le-color-border:#e5e7eb;--le-color-border-light:#f3f4f6;--le-color-border-dark:#d1d5db;--le-border-width:1px;--le-color-border-input:#c8cfdd;--le-color-focus:rgba(17, 24, 39, 0.3);--le-radius-none:0;--le-radius-sm:0;--le-radius-md:2px;--le-radius-lg:4px;--le-radius-xl:6px;--le-radius-2xl:8px;--le-radius-full:9999px;--le-shadow-none:none;--le-shadow-sm:none;--le-shadow-md:0 1px 2px rgba(0, 0, 0, 0.05);--le-shadow-lg:0 1px 3px rgba(0, 0, 0, 0.08);--le-shadow-xl:0 2px 4px rgba(0, 0, 0, 0.1);--le-shadow-2xl:0 4px 8px rgba(0, 0, 0, 0.1)}[theme="warm"]{--le-color-primary:#ea580c;--le-color-primary-light:#fb923c;--le-color-primary-dark:#c2410c;--le-color-primary-contrast:#ffffff;--le-color-secondary:#b45309;--le-color-secondary-light:#d97706;--le-color-secondary-dark:#92400e;--le-color-secondary-contrast:#ffffff;--le-color-success:#16a34a;--le-color-success-light:#22c55e;--le-color-success-dark:#15803d;--le-color-success-contrast:#ffffff;--le-color-warning:#ca8a04;--le-color-warning-light:#eab308;--le-color-warning-dark:#a16207;--le-color-warning-contrast:#000000;--le-color-danger:#dc2626;--le-color-danger-light:#ef4444;--le-color-danger-dark:#b91c1c;--le-color-danger-contrast:#ffffff;--le-color-info:#0891b2;--le-color-info-light:#06b6d4;--le-color-info-dark:#0e7490;--le-color-info-contrast:#ffffff;--le-color-white:#ffffff;--le-color-black:#000000;--le-color-gray-50:#fffbeb;--le-color-gray-100:#fef3c7;--le-color-gray-200:#fde68a;--le-color-gray-300:#fcd34d;--le-color-gray-400:#fbbf24;--le-color-gray-500:#f59e0b;--le-color-gray-600:#d97706;--le-color-gray-700:#b45309;--le-color-gray-800:#92400e;--le-color-gray-900:#78350f;--le-color-background:#fffbeb;--le-color-background-secondary:#fef3c7;--le-color-background-tertiary:#fde68a;--le-color-surface:#ffffff;--le-color-surface-elevated:#ffffff;--le-color-text-primary:#78350f;--le-color-text-secondary:#92400e;--le-color-text-disabled:#d97706;--le-color-text-inverse:#ffffff;--le-color-border:#fcd34d;--le-color-border-light:#fde68a;--le-color-border-dark:#fbbf24;--le-border-width:2px;--le-color-border-input:#e7d4c4;--le-color-focus:rgba(234, 88, 12, 0.5);--le-radius-none:0;--le-radius-sm:0.125rem;--le-radius-md:0.375rem;--le-radius-lg:0.625rem;--le-radius-xl:0.875rem;--le-radius-2xl:1.125rem;--le-radius-full:9999px;--le-shadow-none:none;--le-shadow-sm:0 1px 2px rgba(234, 88, 12, 0.05);--le-shadow-md:0 4px 6px rgba(234, 88, 12, 0.1), 0 2px 4px rgba(234, 88, 12, 0.06);--le-shadow-lg:0 10px 15px rgba(234, 88, 12, 0.15), 0 4px 6px rgba(234, 88, 12, 0.08);--le-shadow-xl:0 20px 25px rgba(234, 88, 12, 0.15), 0 10px 10px rgba(234, 88, 12, 0.1);--le-shadow-2xl:0 25px 50px rgba(234, 88, 12, 0.2), 0 12px 24px rgba(234, 88, 12, 0.12)}:root{--le-space-xs:4px;--le-space-sm:8px;--le-space-md:16px;--le-space-lg:24px;--le-space-xl:32px;--le-space-2xl:48px;--le-space-3xl:64px;--le-font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--le-font-family-mono:'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;--le-font-size-xs:0.75rem;--le-font-size-sm:0.875rem;--le-font-size-md:1rem;--le-font-size-lg:1.125rem;--le-font-size-xl:1.25rem;--le-font-size-2xl:1.5rem;--le-font-size-3xl:2rem;--le-font-size-4xl:2.5rem;--le-font-weight-normal:400;--le-font-weight-medium:500;--le-font-weight-semibold:600;--le-font-weight-bold:700;--le-line-height-tight:1.25;--le-line-height-normal:1.5;--le-line-height-relaxed:1.75;--le-transition-fast:150ms ease;--le-transition-normal:250ms ease;--le-transition-slow:400ms ease;--le-transition-bounce:400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);--le-z-dropdown:1000;--le-z-sticky:1020;--le-z-fixed:1030;--le-z-modal-backdrop:1040;--le-z-modal:1050;--le-z-popover:1060;--le-z-tooltip:1070}:root,[theme="default"]{--le-color-primary:#3b82f6;--le-color-primary-hover:#2563eb;--le-color-primary-active:#1d4ed8;--le-color-primary-subtle:#eff6ff;--le-color-on-primary:#ffffff;--le-color-secondary:#64748b;--le-color-secondary-hover:#475569;--le-color-secondary-active:#334155;--le-color-secondary-subtle:#f1f5f9;--le-color-on-secondary:#ffffff;--le-color-success:#22c55e;--le-color-success-subtle:#f0fdf4;--le-color-on-success:#ffffff;--le-color-warning:#f59e0b;--le-color-warning-subtle:#fffbeb;--le-color-on-warning:#000000;--le-color-error:#ef4444;--le-color-error-subtle:#fef2f2;--le-color-on-error:#ffffff;--le-color-info:#06b6d4;--le-color-info-subtle:#ecfeff;--le-color-on-info:#ffffff;--le-color-background:#ffffff;--le-color-surface:#ffffff;--le-color-surface-raised:#ffffff;--le-color-surface-overlay:rgba(0, 0, 0, 0.5);--le-color-text:#1e293b;--le-color-text-secondary:#64748b;--le-color-text-muted:#94a3b8;--le-color-text-inverse:#ffffff;--le-color-border:#e2e8f0;--le-color-border-strong:#cbd5e1;--le-color-border-focus:var(--le-color-primary);--le-radius-none:0;--le-radius-sm:4px;--le-radius-md:7px;--le-radius-lg:12px;--le-radius-xl:16px;--le-radius-2xl:24px;--le-radius-full:9999px;--le-shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--le-shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);--le-shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);--le-shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);--le-shadow-focus:0 0 0 3px rgba(59, 130, 246, 0.3)}[theme="dark"]{--le-color-primary:#60a5fa;--le-color-primary-hover:#93c5fd;--le-color-primary-active:#3b82f6;--le-color-primary-subtle:#1e3a5f;--le-color-on-primary:#0f172a;--le-color-secondary:#94a3b8;--le-color-secondary-hover:#cbd5e1;--le-color-secondary-active:#64748b;--le-color-secondary-subtle:#1e293b;--le-color-on-secondary:#0f172a;--le-color-success:#4ade80;--le-color-success-subtle:#14532d;--le-color-on-success:#0f172a;--le-color-warning:#fbbf24;--le-color-warning-subtle:#422006;--le-color-on-warning:#0f172a;--le-color-error:#f87171;--le-color-error-subtle:#450a0a;--le-color-on-error:#0f172a;--le-color-info:#22d3ee;--le-color-info-subtle:#164e63;--le-color-on-info:#0f172a;--le-color-background:#0f172a;--le-color-surface:#1e293b;--le-color-surface-raised:#334155;--le-color-surface-overlay:rgba(0, 0, 0, 0.7);--le-color-text:#f1f5f9;--le-color-text-secondary:#94a3b8;--le-color-text-muted:#64748b;--le-color-text-inverse:#0f172a;--le-color-border:#334155;--le-color-border-strong:#475569;--le-color-border-focus:var(--le-color-primary);--le-shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.3);--le-shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);--le-shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);--le-shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);--le-shadow-focus:0 0 0 3px rgba(96, 165, 250, 0.4)}[theme="gradient"]{--le-color-primary:#8b5cf6;--le-color-primary-hover:#a78bfa;--le-color-primary-active:#7c3aed;--le-color-primary-subtle:#f5f3ff;--le-color-on-primary:#ffffff;--le-color-secondary:#ec4899;--le-color-secondary-hover:#f472b6;--le-color-secondary-active:#db2777;--le-color-secondary-subtle:#fdf2f8;--le-color-on-secondary:#ffffff;--le-color-success:#10b981;--le-color-success-subtle:#ecfdf5;--le-color-on-success:#ffffff;--le-color-warning:#f59e0b;--le-color-warning-subtle:#fffbeb;--le-color-on-warning:#000000;--le-color-error:#f43f5e;--le-color-error-subtle:#fff1f2;--le-color-on-error:#ffffff;--le-color-info:#06b6d4;--le-color-info-subtle:#ecfeff;--le-color-on-info:#ffffff;--le-color-background:linear-gradient(135deg, #faf5ff 0%, #fdf2f8 50%, #fff7ed 100%);--le-color-surface:rgba(255, 255, 255, 0.9);--le-color-surface-raised:#ffffff;--le-color-surface-overlay:rgba(139, 92, 246, 0.3);--le-color-text:#1f2937;--le-color-text-secondary:#6b7280;--le-color-text-muted:#9ca3af;--le-color-text-inverse:#ffffff;--le-color-border:rgba(139, 92, 246, 0.2);--le-color-border-strong:rgba(139, 92, 246, 0.4);--le-color-border-focus:var(--le-color-primary);--le-radius-sm:6px;--le-radius-md:12px;--le-radius-lg:16px;--le-radius-xl:20px;--le-radius-2xl:28px;--le-shadow-sm:0 1px 3px 0 rgba(139, 92, 246, 0.1);--le-shadow-md:0 4px 6px -1px rgba(139, 92, 246, 0.15), 0 2px 4px -2px rgba(236, 72, 153, 0.1);--le-shadow-lg:0 10px 15px -3px rgba(139, 92, 246, 0.2), 0 4px 6px -4px rgba(236, 72, 153, 0.15);--le-shadow-xl:0 20px 25px -5px rgba(139, 92, 246, 0.25), 0 8px 10px -6px rgba(236, 72, 153, 0.2);--le-shadow-focus:0 0 0 3px rgba(139, 92, 246, 0.4)}[theme="minimal"]{--le-color-primary:#374151;--le-color-primary-hover:#1f2937;--le-color-primary-active:#111827;--le-color-primary-subtle:#f3f4f6;--le-color-on-primary:#ffffff;--le-color-secondary:#9ca3af;--le-color-secondary-hover:#6b7280;--le-color-secondary-active:#4b5563;--le-color-secondary-subtle:#f9fafb;--le-color-on-secondary:#ffffff;--le-color-success:#059669;--le-color-success-subtle:#f0fdf4;--le-color-on-success:#ffffff;--le-color-warning:#d97706;--le-color-warning-subtle:#fffbeb;--le-color-on-warning:#ffffff;--le-color-error:#dc2626;--le-color-error-subtle:#fef2f2;--le-color-on-error:#ffffff;--le-color-info:#0891b2;--le-color-info-subtle:#ecfeff;--le-color-on-info:#ffffff;--le-color-background:#fafafa;--le-color-surface:#ffffff;--le-color-surface-raised:#ffffff;--le-color-surface-overlay:rgba(0, 0, 0, 0.4);--le-color-text:#111827;--le-color-text-secondary:#6b7280;--le-color-text-muted:#9ca3af;--le-color-text-inverse:#ffffff;--le-color-border:#e5e7eb;--le-color-border-strong:#d1d5db;--le-color-border-focus:var(--le-color-primary);--le-radius-none:0;--le-radius-sm:2px;--le-radius-md:4px;--le-radius-lg:6px;--le-radius-xl:8px;--le-radius-2xl:12px;--le-radius-full:9999px;--le-shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.03);--le-shadow-md:0 2px 4px -1px rgba(0, 0, 0, 0.06);--le-shadow-lg:0 4px 8px -2px rgba(0, 0, 0, 0.08);--le-shadow-xl:0 8px 16px -4px rgba(0, 0, 0, 0.1);--le-shadow-focus:0 0 0 2px rgba(55, 65, 81, 0.2)}[theme="warm"]{--le-color-primary:#ea580c;--le-color-primary-hover:#f97316;--le-color-primary-active:#c2410c;--le-color-primary-subtle:#fff7ed;--le-color-on-primary:#ffffff;--le-color-secondary:#78716c;--le-color-secondary-hover:#57534e;--le-color-secondary-active:#44403c;--le-color-secondary-subtle:#fafaf9;--le-color-on-secondary:#ffffff;--le-color-success:#65a30d;--le-color-success-subtle:#f7fee7;--le-color-on-success:#ffffff;--le-color-warning:#d97706;--le-color-warning-subtle:#fffbeb;--le-color-on-warning:#000000;--le-color-error:#dc2626;--le-color-error-subtle:#fef2f2;--le-color-on-error:#ffffff;--le-color-info:#0891b2;--le-color-info-subtle:#ecfeff;--le-color-on-info:#ffffff;--le-color-background:#fffbf5;--le-color-surface:#ffffff;--le-color-surface-raised:#ffffff;--le-color-surface-overlay:rgba(120, 53, 15, 0.4);--le-color-text:#292524;--le-color-text-secondary:#78716c;--le-color-text-muted:#a8a29e;--le-color-text-inverse:#ffffff;--le-color-border:#e7e5e4;--le-color-border-strong:#d6d3d1;--le-color-border-focus:var(--le-color-primary);--le-radius-sm:4px;--le-radius-md:8px;--le-radius-lg:12px;--le-radius-xl:16px;--le-radius-2xl:24px;--le-shadow-sm:0 1px 2px 0 rgba(120, 53, 15, 0.05);--le-shadow-md:0 4px 6px -1px rgba(120, 53, 15, 0.1), 0 2px 4px -2px rgba(120, 53, 15, 0.08);--le-shadow-lg:0 10px 15px -3px rgba(120, 53, 15, 0.12), 0 4px 6px -4px rgba(120, 53, 15, 0.1);--le-shadow-xl:0 20px 25px -5px rgba(120, 53, 15, 0.15), 0 8px 10px -6px rgba(120, 53, 15, 0.12);--le-shadow-focus:0 0 0 3px rgba(234, 88, 12, 0.3)}
+/**
+ * Le-Kit All Themes
+ * 
+ * Contains base tokens and all available themes.
+ * For production, consider importing only the themes you need:
+ * 
+ * @import 'le-kit/themes/base.css';
+ * @import 'le-kit/themes/default.css';
+ * @import 'le-kit/themes/dark.css';
+ */
+
+/**
+ * Le-Kit Base Design Tokens
+ * 
+ * Structural tokens that rarely change between themes:
+ * - Spacing scale
+ * - Typography (font families, sizes, weights, line heights)
+ * - Transitions
+ * - Z-index layers
+ * 
+ * Import this file along with a theme file (default.css, dark.css, etc.)
+ */
+
+:root {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* ============================================
+   * SPACING SCALE
+   * ============================================ */
+  --le-spacing-0: 0;
+  --le-spacing-1: 0.25rem;    /* 4px */
+  --le-spacing-2: 0.5rem;     /* 8px */
+  --le-spacing-3: 0.75rem;    /* 12px */
+  --le-spacing-4: 1rem;       /* 16px */
+  --le-spacing-5: 1.25rem;    /* 20px */
+  --le-spacing-6: 1.5rem;     /* 24px */
+  --le-spacing-8: 2rem;       /* 32px */
+  --le-spacing-10: 2.5rem;    /* 40px */
+  --le-spacing-12: 3rem;      /* 48px */
+  --le-spacing-16: 4rem;      /* 64px */
+
+  /* ============================================
+   * TYPOGRAPHY
+   * ============================================ */
+  --le-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --le-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+  
+  /* Font sizes */
+  --le-font-size-xs: 0.75rem;     /* 12px */
+  --le-font-size-sm: 0.875rem;    /* 14px */
+  --le-font-size-md: 1rem;        /* 16px */
+  --le-font-size-lg: 1.125rem;    /* 18px */
+  --le-font-size-xl: 1.25rem;     /* 20px */
+  --le-font-size-2xl: 1.5rem;     /* 24px */
+  --le-font-size-3xl: 1.875rem;   /* 30px */
+  --le-font-size-4xl: 2.25rem;    /* 36px */
+  
+  /* Font weights */
+  --le-font-weight-normal: 400;
+  --le-font-weight-medium: 500;
+  --le-font-weight-semibold: 600;
+  --le-font-weight-bold: 700;
+  
+  /* Line heights */
+  --le-line-height-tight: 1.25;
+  --le-line-height-normal: 1.5;
+  --le-line-height-relaxed: 1.75;
+
+  /* ============================================
+   * RADIUSES
+   * ============================================ */
+  --le-radius-none: 0;
+  --le-radius-xs: 0.066rem;   /* 1px */
+  --le-radius-sm: 0.125rem;   /* 2px */
+  --le-radius-md: 0.25rem;    /* 4px */
+  --le-radius-lg: 0.5rem;     /* 8px */
+  --le-radius-xl: 0.75rem;    /* 12px */
+  --le-radius-2xl: 1rem;      /* 16px */
+  --le-radius-full: 9999px;
+
+  /* ============================================
+   * TRANSITIONS
+   * ============================================ */
+  --le-transition-fast: 100ms;
+  --le-transition-normal: 200ms;
+  --le-transition-slow: 300ms;
+  --le-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* ============================================
+   * Z-INDEX LAYERS
+   * ============================================ */
+  --le-z-dropdown: 1000;
+  --le-z-sticky: 1020;
+  --le-z-fixed: 1030;
+  --le-z-modal-backdrop: 1040;
+  --le-z-modal: 1050;
+  --le-z-popover: 1060;
+  --le-z-tooltip: 1070;
+}
+
+/**
+ * Le-Kit Default Theme
+ * 
+ * Clean, professional light theme with blue primary color.
+ * 
+ * Usage:
+ * 1. As default: import alongside base.css
+ * 2. For switching: set theme="default" on any element
+ * 
+ * To create a custom theme:
+ * 1. Copy this file
+ * 2. Change selector to :root or [theme="your-theme"]
+ * 3. Modify the variables you need
+ */
+
+:root,
+[theme="default"] {
+  /* Primary brand color */
+  --le-color-primary: #0088ff;
+  --le-color-primary-light: #4da6ff;
+  --le-color-primary-dark: #0066cc;
+  --le-color-primary-contrast: #ffffff;
+  
+  /* Secondary accent color */
+  --le-color-secondary: #6c757d;
+  --le-color-secondary-light: #868e96;
+  --le-color-secondary-dark: #545b62;
+  --le-color-secondary-contrast: #ffffff;
+  
+  /* Semantic colors */
+  --le-color-success: #28a745;
+  --le-color-success-light: #48c764;
+  --le-color-success-dark: #1e7e34;
+  --le-color-success-contrast: #ffffff;
+  
+  --le-color-warning: #ffc107;
+  --le-color-warning-light: #ffcd39;
+  --le-color-warning-dark: #d39e00;
+  --le-color-warning-contrast: #212529;
+  
+  --le-color-danger: #dc3545;
+  --le-color-danger-light: #e4606d;
+  --le-color-danger-dark: #bd2130;
+  --le-color-danger-contrast: #ffffff;
+  
+  --le-color-info: #17a2b8;
+  --le-color-info-light: #3ab0c3;
+  --le-color-info-dark: #117a8b;
+  --le-color-info-contrast: #ffffff;
+  
+  /* Neutral colors */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #fafafa;
+  --le-color-gray-100: #f5f5f5;
+  --le-color-gray-200: #eeeeee;
+  --le-color-gray-300: #e0e0e0;
+  --le-color-gray-400: #bdbdbd;
+  --le-color-gray-500: #9e9e9e;
+  --le-color-gray-600: #757575;
+  --le-color-gray-700: #616161;
+  --le-color-gray-800: #424242;
+  --le-color-gray-900: #212121;
+  
+  /* Background colors */
+  --le-color-background: #ffffff;
+  --le-color-background-secondary: #f5f5f5;
+  --le-color-background-tertiary: #eeeeee;
+  
+  /* Surface colors (cards, modals, etc.) */
+  --le-color-surface: #ffffff;
+  --le-color-surface-elevated: #ffffff;
+  
+  /* Text colors */
+  --le-color-text-primary: #212121;
+  --le-color-text-secondary: #757575;
+  --le-color-text-disabled: #9e9e9e;
+  --le-color-text-inverse: #ffffff;
+  
+  /* Border colors */
+  --le-color-border: #e0e0e0;
+  --le-color-border-light: #eeeeee;
+  --le-color-border-dark: #bdbdbd;
+
+  /** Input borders */
+  --le-border-width: 2px;
+  --le-color-border-input: #c4d6e6;
+  
+  /* Focus ring */
+  --le-color-focus: rgba(0, 136, 255, 0.5);
+  
+  /* Border radius */
+  --le-radius-none: 0;
+  --le-radius-sm: 0.125rem;   /* 2px */
+  --le-radius-md: 0.25rem;    /* 4px */
+  --le-radius-lg: 0.5rem;     /* 8px */
+  --le-radius-xl: 0.75rem;    /* 12px */
+  --le-radius-2xl: 1rem;      /* 16px */
+  --le-radius-full: 9999px;
+  
+  /* Shadows */
+  --le-shadow-none: none;
+  --le-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --le-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  --le-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+  --le-shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+  --le-shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
+}
+
+/**
+ * Le-Kit Dark Theme
+ * 
+ * Dark mode with light text on dark backgrounds.
+ * 
+ * Usage: set theme="dark" on any element, or import as your default.
+ */
+
+[theme="dark"] {
+  /* Primary brand color - lighter for dark backgrounds */
+  --le-color-primary: #4da6ff;
+  --le-color-primary-light: #80c1ff;
+  --le-color-primary-dark: #0088ff;
+  --le-color-primary-contrast: #000000;
+  
+  /* Secondary accent color */
+  --le-color-secondary: #868e96;
+  --le-color-secondary-light: #adb5bd;
+  --le-color-secondary-dark: #6c757d;
+  --le-color-secondary-contrast: #000000;
+  
+  /* Semantic colors - adjusted for dark mode */
+  --le-color-success: #48c764;
+  --le-color-success-light: #6dd587;
+  --le-color-success-dark: #28a745;
+  --le-color-success-contrast: #000000;
+  
+  --le-color-warning: #ffcd39;
+  --le-color-warning-light: #ffda6a;
+  --le-color-warning-dark: #ffc107;
+  --le-color-warning-contrast: #000000;
+  
+  --le-color-danger: #e4606d;
+  --le-color-danger-light: #ea868f;
+  --le-color-danger-dark: #dc3545;
+  --le-color-danger-contrast: #000000;
+  
+  --le-color-info: #3ab0c3;
+  --le-color-info-light: #6dc4d3;
+  --le-color-info-dark: #17a2b8;
+  --le-color-info-contrast: #000000;
+  
+  /* Neutral colors - inverted */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #212121;
+  --le-color-gray-100: #424242;
+  --le-color-gray-200: #616161;
+  --le-color-gray-300: #757575;
+  --le-color-gray-400: #9e9e9e;
+  --le-color-gray-500: #bdbdbd;
+  --le-color-gray-600: #e0e0e0;
+  --le-color-gray-700: #eeeeee;
+  --le-color-gray-800: #f5f5f5;
+  --le-color-gray-900: #fafafa;
+  
+  /* Background colors */
+  --le-color-background: #121212;
+  --le-color-background-secondary: #1e1e1e;
+  --le-color-background-tertiary: #2d2d2d;
+  
+  /* Surface colors */
+  --le-color-surface: #1e1e1e;
+  --le-color-surface-elevated: #2d2d2d;
+  
+  /* Text colors */
+  --le-color-text-primary: #ffffff;
+  --le-color-text-secondary: #b3b3b3;
+  --le-color-text-disabled: #666666;
+  --le-color-text-inverse: #121212;
+  
+  /* Border colors */
+  --le-color-border: #333333;
+  --le-color-border-light: #2d2d2d;
+  --le-color-border-dark: #444444;
+
+  /** Input borders */
+  --le-border-width: 2px;
+  --le-color-border-input: #515c6b;
+
+  /* Focus ring */
+  --le-color-focus: rgba(77, 166, 255, 0.5);
+  
+  /* Border radius - same as default */
+  --le-radius-none: 0;
+  --le-radius-sm: 0.125rem;
+  --le-radius-md: 0.25rem;
+  --le-radius-lg: 0.5rem;
+  --le-radius-xl: 0.75rem;
+  --le-radius-2xl: 1rem;
+  --le-radius-full: 9999px;
+  
+  /* Shadows - darker for dark mode */
+  --le-shadow-none: none;
+  --le-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --le-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+  --le-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
+  --le-shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
+  --le-shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.3);
+}
+
+/**
+ * Le-Kit Gradient Theme
+ * 
+ * Modern gradient style with purple accents and rounded corners.
+ * 
+ * Usage: set theme="gradient" on any element, or import as your default.
+ */
+
+[theme="gradient"] {
+  /* Primary brand color - purple */
+  --le-color-primary: #8b5cf6;
+  --le-color-primary-light: #a78bfa;
+  --le-color-primary-dark: #7c3aed;
+  --le-color-primary-contrast: #ffffff;
+  
+  /* Secondary accent color - pink */
+  --le-color-secondary: #ec4899;
+  --le-color-secondary-light: #f472b6;
+  --le-color-secondary-dark: #db2777;
+  --le-color-secondary-contrast: #ffffff;
+  
+  /* Semantic colors */
+  --le-color-success: #10b981;
+  --le-color-success-light: #34d399;
+  --le-color-success-dark: #059669;
+  --le-color-success-contrast: #ffffff;
+  
+  --le-color-warning: #f59e0b;
+  --le-color-warning-light: #fbbf24;
+  --le-color-warning-dark: #d97706;
+  --le-color-warning-contrast: #000000;
+  
+  --le-color-danger: #ef4444;
+  --le-color-danger-light: #f87171;
+  --le-color-danger-dark: #dc2626;
+  --le-color-danger-contrast: #ffffff;
+  
+  --le-color-info: #06b6d4;
+  --le-color-info-light: #22d3ee;
+  --le-color-info-dark: #0891b2;
+  --le-color-info-contrast: #ffffff;
+  
+  /* Neutral colors */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #faf5ff;
+  --le-color-gray-100: #f3e8ff;
+  --le-color-gray-200: #e9d5ff;
+  --le-color-gray-300: #d8b4fe;
+  --le-color-gray-400: #c084fc;
+  --le-color-gray-500: #a855f7;
+  --le-color-gray-600: #9333ea;
+  --le-color-gray-700: #7e22ce;
+  --le-color-gray-800: #6b21a8;
+  --le-color-gray-900: #581c87;
+  
+  /* Background colors */
+  --le-color-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --le-color-background-secondary: rgba(255, 255, 255, 0.1);
+  --le-color-background-tertiary: rgba(255, 255, 255, 0.05);
+  
+  /* Surface colors */
+  --le-color-surface: rgba(255, 255, 255, 0.95);
+  --le-color-surface-elevated: #ffffff;
+  
+  /* Text colors */
+  --le-color-text-primary: #1f2937;
+  --le-color-text-secondary: #6b7280;
+  --le-color-text-disabled: #9ca3af;
+  --le-color-text-inverse: #ffffff;
+  
+  /* Border colors */
+  --le-color-border: rgba(139, 92, 246, 0.3);
+  --le-color-border-light: rgba(139, 92, 246, 0.1);
+  --le-color-border-dark: rgba(139, 92, 246, 0.5);
+
+  /** Input borders */
+  --le-border-width: 2px;
+  --le-color-border-input: #eccddd;
+  
+  /* Focus ring */
+  --le-color-focus: rgba(139, 92, 246, 0.5);
+  
+  /* Border radius - more rounded */
+  --le-radius-none: 0;
+  --le-radius-sm: 0.25rem;
+  --le-radius-md: 0.5rem;
+  --le-radius-lg: 1rem;
+  --le-radius-xl: 1.5rem;
+  --le-radius-2xl: 2rem;
+  --le-radius-full: 9999px;
+  
+  /* Shadows - purple tinted */
+  --le-shadow-none: none;
+  --le-shadow-sm: 0 1px 2px rgba(139, 92, 246, 0.1);
+  --le-shadow-md: 0 4px 6px rgba(139, 92, 246, 0.15), 0 2px 4px rgba(139, 92, 246, 0.1);
+  --le-shadow-lg: 0 10px 20px rgba(139, 92, 246, 0.2), 0 4px 8px rgba(139, 92, 246, 0.1);
+  --le-shadow-xl: 0 20px 40px rgba(139, 92, 246, 0.25), 0 8px 16px rgba(139, 92, 246, 0.15);
+  --le-shadow-2xl: 0 30px 60px rgba(139, 92, 246, 0.3), 0 15px 30px rgba(139, 92, 246, 0.2);
+}
+
+/**
+ * Le-Kit Minimal Theme
+ * 
+ * Clean, subtle design with sharp edges and minimal shadows.
+ * 
+ * Usage: set theme="minimal" on any element, or import as your default.
+ */
+
+[theme="minimal"] {
+  /* Primary brand color - dark gray */
+  --le-color-primary: #111827;
+  --le-color-primary-light: #374151;
+  --le-color-primary-dark: #030712;
+  --le-color-primary-contrast: #ffffff;
+  
+  /* Secondary accent color */
+  --le-color-secondary: #6b7280;
+  --le-color-secondary-light: #9ca3af;
+  --le-color-secondary-dark: #4b5563;
+  --le-color-secondary-contrast: #ffffff;
+  
+  /* Semantic colors - muted */
+  --le-color-success: #059669;
+  --le-color-success-light: #10b981;
+  --le-color-success-dark: #047857;
+  --le-color-success-contrast: #ffffff;
+  
+  --le-color-warning: #d97706;
+  --le-color-warning-light: #f59e0b;
+  --le-color-warning-dark: #b45309;
+  --le-color-warning-contrast: #ffffff;
+  
+  --le-color-danger: #dc2626;
+  --le-color-danger-light: #ef4444;
+  --le-color-danger-dark: #b91c1c;
+  --le-color-danger-contrast: #ffffff;
+  
+  --le-color-info: #0284c7;
+  --le-color-info-light: #0ea5e9;
+  --le-color-info-dark: #0369a1;
+  --le-color-info-contrast: #ffffff;
+  
+  /* Neutral colors */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #f9fafb;
+  --le-color-gray-100: #f3f4f6;
+  --le-color-gray-200: #e5e7eb;
+  --le-color-gray-300: #d1d5db;
+  --le-color-gray-400: #9ca3af;
+  --le-color-gray-500: #6b7280;
+  --le-color-gray-600: #4b5563;
+  --le-color-gray-700: #374151;
+  --le-color-gray-800: #1f2937;
+  --le-color-gray-900: #111827;
+  
+  /* Background colors */
+  --le-color-background: #ffffff;
+  --le-color-background-secondary: #fafafa;
+  --le-color-background-tertiary: #f5f5f5;
+  
+  /* Surface colors */
+  --le-color-surface: #ffffff;
+  --le-color-surface-elevated: #ffffff;
+  
+  /* Text colors */
+  --le-color-text-primary: #111827;
+  --le-color-text-secondary: #6b7280;
+  --le-color-text-disabled: #9ca3af;
+  --le-color-text-inverse: #ffffff;
+  
+  /* Border colors */
+  --le-color-border: #e5e7eb;
+  --le-color-border-light: #f3f4f6;
+  --le-color-border-dark: #d1d5db;
+
+  /** Input borders */
+  --le-border-width: 1px;
+  --le-color-border-input: #c8cfdd;
+
+  /* Focus ring */
+  --le-color-focus: rgba(17, 24, 39, 0.3);
+  
+  /* Border radius - sharp/minimal */
+  --le-radius-none: 0;
+  --le-radius-sm: 0;
+  --le-radius-md: 2px;
+  --le-radius-lg: 4px;
+  --le-radius-xl: 6px;
+  --le-radius-2xl: 8px;
+  --le-radius-full: 9999px;
+  
+  /* Shadows - very subtle */
+  --le-shadow-none: none;
+  --le-shadow-sm: none;
+  --le-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --le-shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --le-shadow-xl: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --le-shadow-2xl: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/**
+ * Le-Kit Warm Theme
+ * 
+ * Cozy, warm colors with orange/amber tones.
+ * 
+ * Usage: set theme="warm" on any element, or import as your default.
+ */
+
+[theme="warm"] {
+  /* Primary brand color - orange */
+  --le-color-primary: #ea580c;
+  --le-color-primary-light: #fb923c;
+  --le-color-primary-dark: #c2410c;
+  --le-color-primary-contrast: #ffffff;
+  
+  /* Secondary accent color - amber */
+  --le-color-secondary: #b45309;
+  --le-color-secondary-light: #d97706;
+  --le-color-secondary-dark: #92400e;
+  --le-color-secondary-contrast: #ffffff;
+  
+  /* Semantic colors */
+  --le-color-success: #16a34a;
+  --le-color-success-light: #22c55e;
+  --le-color-success-dark: #15803d;
+  --le-color-success-contrast: #ffffff;
+  
+  --le-color-warning: #ca8a04;
+  --le-color-warning-light: #eab308;
+  --le-color-warning-dark: #a16207;
+  --le-color-warning-contrast: #000000;
+  
+  --le-color-danger: #dc2626;
+  --le-color-danger-light: #ef4444;
+  --le-color-danger-dark: #b91c1c;
+  --le-color-danger-contrast: #ffffff;
+  
+  --le-color-info: #0891b2;
+  --le-color-info-light: #06b6d4;
+  --le-color-info-dark: #0e7490;
+  --le-color-info-contrast: #ffffff;
+  
+  /* Neutral colors - warm tinted */
+  --le-color-white: #ffffff;
+  --le-color-black: #000000;
+  --le-color-gray-50: #fffbeb;
+  --le-color-gray-100: #fef3c7;
+  --le-color-gray-200: #fde68a;
+  --le-color-gray-300: #fcd34d;
+  --le-color-gray-400: #fbbf24;
+  --le-color-gray-500: #f59e0b;
+  --le-color-gray-600: #d97706;
+  --le-color-gray-700: #b45309;
+  --le-color-gray-800: #92400e;
+  --le-color-gray-900: #78350f;
+  
+  /* Background colors */
+  --le-color-background: #fffbeb;
+  --le-color-background-secondary: #fef3c7;
+  --le-color-background-tertiary: #fde68a;
+  
+  /* Surface colors */
+  --le-color-surface: #ffffff;
+  --le-color-surface-elevated: #ffffff;
+  
+  /* Text colors */
+  --le-color-text-primary: #78350f;
+  --le-color-text-secondary: #92400e;
+  --le-color-text-disabled: #d97706;
+  --le-color-text-inverse: #ffffff;
+  
+  /* Border colors */
+  --le-color-border: #fcd34d;
+  --le-color-border-light: #fde68a;
+  --le-color-border-dark: #fbbf24;
+
+  /** Input borders */
+  --le-border-width: 2px;
+  --le-color-border-input: #e7d4c4;
+
+  /* Focus ring */
+  --le-color-focus: rgba(234, 88, 12, 0.5);
+  
+  /* Border radius - slightly rounded */
+  --le-radius-none: 0;
+  --le-radius-sm: 0.125rem;
+  --le-radius-md: 0.375rem;
+  --le-radius-lg: 0.625rem;
+  --le-radius-xl: 0.875rem;
+  --le-radius-2xl: 1.125rem;
+  --le-radius-full: 9999px;
+  
+  /* Shadows - warm tinted */
+  --le-shadow-none: none;
+  --le-shadow-sm: 0 1px 2px rgba(234, 88, 12, 0.05);
+  --le-shadow-md: 0 4px 6px rgba(234, 88, 12, 0.1), 0 2px 4px rgba(234, 88, 12, 0.06);
+  --le-shadow-lg: 0 10px 15px rgba(234, 88, 12, 0.15), 0 4px 6px rgba(234, 88, 12, 0.08);
+  --le-shadow-xl: 0 20px 25px rgba(234, 88, 12, 0.15), 0 10px 10px rgba(234, 88, 12, 0.1);
+  --le-shadow-2xl: 0 25px 50px rgba(234, 88, 12, 0.2), 0 12px 24px rgba(234, 88, 12, 0.12);
+}
+
+
+/* ============================================
+   BASE TOKENS
+   Structural design tokens that apply to all themes
+   ============================================ */
+
+:root {
+  /* Spacing Scale */
+  --le-space-xs: 4px;
+  --le-space-sm: 8px;
+  --le-space-md: 16px;
+  --le-space-lg: 24px;
+  --le-space-xl: 32px;
+  --le-space-2xl: 48px;
+  --le-space-3xl: 64px;
+
+  /* Typography Scale */
+  --le-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --le-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+  
+  --le-font-size-xs: 0.75rem;
+  --le-font-size-sm: 0.875rem;
+  --le-font-size-md: 1rem;
+  --le-font-size-lg: 1.125rem;
+  --le-font-size-xl: 1.25rem;
+  --le-font-size-2xl: 1.5rem;
+  --le-font-size-3xl: 2rem;
+  --le-font-size-4xl: 2.5rem;
+
+  --le-font-weight-normal: 400;
+  --le-font-weight-medium: 500;
+  --le-font-weight-semibold: 600;
+  --le-font-weight-bold: 700;
+
+  --le-line-height-tight: 1.25;
+  --le-line-height-normal: 1.5;
+  --le-line-height-relaxed: 1.75;
+
+  /* Transition Tokens */
+  --le-transition-fast: 150ms ease;
+  --le-transition-normal: 250ms ease;
+  --le-transition-slow: 400ms ease;
+  --le-transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+  /* Z-Index Scale */
+  --le-z-dropdown: 1000;
+  --le-z-sticky: 1020;
+  --le-z-fixed: 1030;
+  --le-z-modal-backdrop: 1040;
+  --le-z-modal: 1050;
+  --le-z-popover: 1060;
+  --le-z-tooltip: 1070;
+}
+
+/* ============================================
+   DEFAULT THEME
+   Clean, professional light theme
+   ============================================ */
+
+:root,
+[theme="default"] {
+  /* Primary Colors */
+  --le-color-primary: #3b82f6;
+  --le-color-primary-hover: #2563eb;
+  --le-color-primary-active: #1d4ed8;
+  --le-color-primary-subtle: #eff6ff;
+  --le-color-on-primary: #ffffff;
+
+  /* Secondary Colors */
+  --le-color-secondary: #64748b;
+  --le-color-secondary-hover: #475569;
+  --le-color-secondary-active: #334155;
+  --le-color-secondary-subtle: #f1f5f9;
+  --le-color-on-secondary: #ffffff;
+
+  /* Semantic Colors */
+  --le-color-success: #22c55e;
+  --le-color-success-subtle: #f0fdf4;
+  --le-color-on-success: #ffffff;
+
+  --le-color-warning: #f59e0b;
+  --le-color-warning-subtle: #fffbeb;
+  --le-color-on-warning: #000000;
+
+  --le-color-error: #ef4444;
+  --le-color-error-subtle: #fef2f2;
+  --le-color-on-error: #ffffff;
+
+  --le-color-info: #06b6d4;
+  --le-color-info-subtle: #ecfeff;
+  --le-color-on-info: #ffffff;
+
+  /* Surface Colors */
+  --le-color-background: #ffffff;
+  --le-color-surface: #ffffff;
+  --le-color-surface-raised: #ffffff;
+  --le-color-surface-overlay: rgba(0, 0, 0, 0.5);
+
+  /* Text Colors */
+  --le-color-text: #1e293b;
+  --le-color-text-secondary: #64748b;
+  --le-color-text-muted: #94a3b8;
+  --le-color-text-inverse: #ffffff;
+
+  /* Border Colors */
+  --le-color-border: #e2e8f0;
+  --le-color-border-strong: #cbd5e1;
+  --le-color-border-focus: var(--le-color-primary);
+
+  /* Border Radius */
+  --le-radius-none: 0;
+  --le-radius-sm: 4px;
+  --le-radius-md: 7px;
+  --le-radius-lg: 12px;
+  --le-radius-xl: 16px;
+  --le-radius-2xl: 24px;
+  --le-radius-full: 9999px;
+
+  /* Shadows */
+  --le-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --le-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --le-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --le-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  --le-shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}
+
+/* ============================================
+   DARK THEME
+   Modern dark mode with blue accents
+   ============================================ */
+
+[theme="dark"] {
+  /* Primary Colors */
+  --le-color-primary: #60a5fa;
+  --le-color-primary-hover: #93c5fd;
+  --le-color-primary-active: #3b82f6;
+  --le-color-primary-subtle: #1e3a5f;
+  --le-color-on-primary: #0f172a;
+
+  /* Secondary Colors */
+  --le-color-secondary: #94a3b8;
+  --le-color-secondary-hover: #cbd5e1;
+  --le-color-secondary-active: #64748b;
+  --le-color-secondary-subtle: #1e293b;
+  --le-color-on-secondary: #0f172a;
+
+  /* Semantic Colors */
+  --le-color-success: #4ade80;
+  --le-color-success-subtle: #14532d;
+  --le-color-on-success: #0f172a;
+
+  --le-color-warning: #fbbf24;
+  --le-color-warning-subtle: #422006;
+  --le-color-on-warning: #0f172a;
+
+  --le-color-error: #f87171;
+  --le-color-error-subtle: #450a0a;
+  --le-color-on-error: #0f172a;
+
+  --le-color-info: #22d3ee;
+  --le-color-info-subtle: #164e63;
+  --le-color-on-info: #0f172a;
+
+  /* Surface Colors */
+  --le-color-background: #0f172a;
+  --le-color-surface: #1e293b;
+  --le-color-surface-raised: #334155;
+  --le-color-surface-overlay: rgba(0, 0, 0, 0.7);
+
+  /* Text Colors */
+  --le-color-text: #f1f5f9;
+  --le-color-text-secondary: #94a3b8;
+  --le-color-text-muted: #64748b;
+  --le-color-text-inverse: #0f172a;
+
+  /* Border Colors */
+  --le-color-border: #334155;
+  --le-color-border-strong: #475569;
+  --le-color-border-focus: var(--le-color-primary);
+
+  /* Shadows (adjusted for dark mode) */
+  --le-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --le-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --le-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+  --le-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
+  --le-shadow-focus: 0 0 0 3px rgba(96, 165, 250, 0.4);
+}
+
+/* ============================================
+   GRADIENT THEME
+   Vibrant gradients with purple/pink accents
+   ============================================ */
+
+[theme="gradient"] {
+  /* Primary Colors - Purple gradient feel */
+  --le-color-primary: #8b5cf6;
+  --le-color-primary-hover: #a78bfa;
+  --le-color-primary-active: #7c3aed;
+  --le-color-primary-subtle: #f5f3ff;
+  --le-color-on-primary: #ffffff;
+
+  /* Secondary Colors - Pink accent */
+  --le-color-secondary: #ec4899;
+  --le-color-secondary-hover: #f472b6;
+  --le-color-secondary-active: #db2777;
+  --le-color-secondary-subtle: #fdf2f8;
+  --le-color-on-secondary: #ffffff;
+
+  /* Semantic Colors */
+  --le-color-success: #10b981;
+  --le-color-success-subtle: #ecfdf5;
+  --le-color-on-success: #ffffff;
+
+  --le-color-warning: #f59e0b;
+  --le-color-warning-subtle: #fffbeb;
+  --le-color-on-warning: #000000;
+
+  --le-color-error: #f43f5e;
+  --le-color-error-subtle: #fff1f2;
+  --le-color-on-error: #ffffff;
+
+  --le-color-info: #06b6d4;
+  --le-color-info-subtle: #ecfeff;
+  --le-color-on-info: #ffffff;
+
+  /* Surface Colors */
+  --le-color-background: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 50%, #fff7ed 100%);
+  --le-color-surface: rgba(255, 255, 255, 0.9);
+  --le-color-surface-raised: #ffffff;
+  --le-color-surface-overlay: rgba(139, 92, 246, 0.3);
+
+  /* Text Colors */
+  --le-color-text: #1f2937;
+  --le-color-text-secondary: #6b7280;
+  --le-color-text-muted: #9ca3af;
+  --le-color-text-inverse: #ffffff;
+
+  /* Border Colors */
+  --le-color-border: rgba(139, 92, 246, 0.2);
+  --le-color-border-strong: rgba(139, 92, 246, 0.4);
+  --le-color-border-focus: var(--le-color-primary);
+
+  /* Border Radius - More rounded for playful feel */
+  --le-radius-sm: 6px;
+  --le-radius-md: 12px;
+  --le-radius-lg: 16px;
+  --le-radius-xl: 20px;
+  --le-radius-2xl: 28px;
+
+  /* Shadows - Colored shadows */
+  --le-shadow-sm: 0 1px 3px 0 rgba(139, 92, 246, 0.1);
+  --le-shadow-md: 0 4px 6px -1px rgba(139, 92, 246, 0.15), 0 2px 4px -2px rgba(236, 72, 153, 0.1);
+  --le-shadow-lg: 0 10px 15px -3px rgba(139, 92, 246, 0.2), 0 4px 6px -4px rgba(236, 72, 153, 0.15);
+  --le-shadow-xl: 0 20px 25px -5px rgba(139, 92, 246, 0.25), 0 8px 10px -6px rgba(236, 72, 153, 0.2);
+  --le-shadow-focus: 0 0 0 3px rgba(139, 92, 246, 0.4);
+}
+
+/* ============================================
+   MINIMAL THEME
+   Clean, minimal design with subtle grays
+   ============================================ */
+
+[theme="minimal"] {
+  /* Primary Colors - Subtle dark gray */
+  --le-color-primary: #374151;
+  --le-color-primary-hover: #1f2937;
+  --le-color-primary-active: #111827;
+  --le-color-primary-subtle: #f3f4f6;
+  --le-color-on-primary: #ffffff;
+
+  /* Secondary Colors - Light gray */
+  --le-color-secondary: #9ca3af;
+  --le-color-secondary-hover: #6b7280;
+  --le-color-secondary-active: #4b5563;
+  --le-color-secondary-subtle: #f9fafb;
+  --le-color-on-secondary: #ffffff;
+
+  /* Semantic Colors - Muted versions */
+  --le-color-success: #059669;
+  --le-color-success-subtle: #f0fdf4;
+  --le-color-on-success: #ffffff;
+
+  --le-color-warning: #d97706;
+  --le-color-warning-subtle: #fffbeb;
+  --le-color-on-warning: #ffffff;
+
+  --le-color-error: #dc2626;
+  --le-color-error-subtle: #fef2f2;
+  --le-color-on-error: #ffffff;
+
+  --le-color-info: #0891b2;
+  --le-color-info-subtle: #ecfeff;
+  --le-color-on-info: #ffffff;
+
+  /* Surface Colors */
+  --le-color-background: #fafafa;
+  --le-color-surface: #ffffff;
+  --le-color-surface-raised: #ffffff;
+  --le-color-surface-overlay: rgba(0, 0, 0, 0.4);
+
+  /* Text Colors */
+  --le-color-text: #111827;
+  --le-color-text-secondary: #6b7280;
+  --le-color-text-muted: #9ca3af;
+  --le-color-text-inverse: #ffffff;
+
+  /* Border Colors - Very subtle */
+  --le-color-border: #e5e7eb;
+  --le-color-border-strong: #d1d5db;
+  --le-color-border-focus: var(--le-color-primary);
+
+  /* Border Radius - Sharp, minimal */
+  --le-radius-none: 0;
+  --le-radius-sm: 2px;
+  --le-radius-md: 4px;
+  --le-radius-lg: 6px;
+  --le-radius-xl: 8px;
+  --le-radius-2xl: 12px;
+  --le-radius-full: 9999px;
+
+  /* Shadows - Minimal, subtle */
+  --le-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
+  --le-shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --le-shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.08);
+  --le-shadow-xl: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
+  --le-shadow-focus: 0 0 0 2px rgba(55, 65, 81, 0.2);
+}
+
+/* ============================================
+   WARM THEME
+   Warm earthy tones with orange/amber accents
+   ============================================ */
+
+[theme="warm"] {
+  /* Primary Colors - Warm orange */
+  --le-color-primary: #ea580c;
+  --le-color-primary-hover: #f97316;
+  --le-color-primary-active: #c2410c;
+  --le-color-primary-subtle: #fff7ed;
+  --le-color-on-primary: #ffffff;
+
+  /* Secondary Colors - Warm brown */
+  --le-color-secondary: #78716c;
+  --le-color-secondary-hover: #57534e;
+  --le-color-secondary-active: #44403c;
+  --le-color-secondary-subtle: #fafaf9;
+  --le-color-on-secondary: #ffffff;
+
+  /* Semantic Colors */
+  --le-color-success: #65a30d;
+  --le-color-success-subtle: #f7fee7;
+  --le-color-on-success: #ffffff;
+
+  --le-color-warning: #d97706;
+  --le-color-warning-subtle: #fffbeb;
+  --le-color-on-warning: #000000;
+
+  --le-color-error: #dc2626;
+  --le-color-error-subtle: #fef2f2;
+  --le-color-on-error: #ffffff;
+
+  --le-color-info: #0891b2;
+  --le-color-info-subtle: #ecfeff;
+  --le-color-on-info: #ffffff;
+
+  /* Surface Colors - Warm tinted */
+  --le-color-background: #fffbf5;
+  --le-color-surface: #ffffff;
+  --le-color-surface-raised: #ffffff;
+  --le-color-surface-overlay: rgba(120, 53, 15, 0.4);
+
+  /* Text Colors - Warm grays */
+  --le-color-text: #292524;
+  --le-color-text-secondary: #78716c;
+  --le-color-text-muted: #a8a29e;
+  --le-color-text-inverse: #ffffff;
+
+  /* Border Colors - Warm tinted */
+  --le-color-border: #e7e5e4;
+  --le-color-border-strong: #d6d3d1;
+  --le-color-border-focus: var(--le-color-primary);
+
+  /* Border Radius - Soft, friendly */
+  --le-radius-sm: 4px;
+  --le-radius-md: 8px;
+  --le-radius-lg: 12px;
+  --le-radius-xl: 16px;
+  --le-radius-2xl: 24px;
+
+  /* Shadows - Warm tinted */
+  --le-shadow-sm: 0 1px 2px 0 rgba(120, 53, 15, 0.05);
+  --le-shadow-md: 0 4px 6px -1px rgba(120, 53, 15, 0.1), 0 2px 4px -2px rgba(120, 53, 15, 0.08);
+  --le-shadow-lg: 0 10px 15px -3px rgba(120, 53, 15, 0.12), 0 4px 6px -4px rgba(120, 53, 15, 0.1);
+  --le-shadow-xl: 0 20px 25px -5px rgba(120, 53, 15, 0.15), 0 8px 10px -6px rgba(120, 53, 15, 0.12);
+  --le-shadow-focus: 0 0 0 3px rgba(234, 88, 12, 0.3);
+}