@almadar/ui 5.123.0 → 5.125.0

package/themes/ocean.css

@@ -1,238 +0,0 @@
-/**
- * Ocean Theme - "Deep Sea Calm"
- *
- * Inspired by the tranquil depths of the ocean. Features soft layered
- * shadows with blue tints, smooth wave-like border radii, and a serene
- * palette ranging from deep navy to bright cyan. Slow, fluid transitions
- * create a calm, immersive experience like light filtering through water.
- */
-
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
-[data-theme="ocean-light"] {
-    /* Shadows - Soft layered with blue tint */
-    --shadow-main:
-        0 4px 12px rgba(0, 119, 182, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
-    --shadow-sm: 0 2px 6px rgba(0, 119, 182, 0.08);
-    --shadow-lg:
-        0 8px 28px rgba(0, 119, 182, 0.14), 0 4px 10px rgba(0, 0, 0, 0.05);
-    --shadow-inner: inset 0 1px 3px rgba(0, 119, 182, 0.06);
-    --shadow-none: none;
-    --shadow-hover:
-        0 12px 36px rgba(0, 119, 182, 0.18), 0 4px 12px rgba(0, 180, 216, 0.1);
-    --shadow-active: 0 2px 6px rgba(0, 119, 182, 0.12);
-
-    /* Border radius - Smooth like waves */
-    --radius-none: 0px;
-    --radius-sm: 8px;
-    --radius-md: 12px;
-    --radius-lg: 16px;
-    --radius-xl: 18px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Ocean blue on light background */
-    --color-primary: #0077b6;
-    --color-primary-hover: #005f8a;
-    --color-primary-foreground: #ffffff;
-
-    --color-secondary: #edf6f9;
-    --color-secondary-hover: #d6eef5;
-    --color-secondary-foreground: #023e5a;
-
-    --color-accent: #00b4d8;
-    --color-accent-foreground: #ffffff;
-
-    --color-muted: #edf6f9;
-    --color-muted-foreground: #5a7d8e;
-
-    --color-background: #f7fbfd;
-    --color-foreground: #0a2540;
-    --color-card: #ffffff;
-    --color-card-foreground: #0a2540;
-    --color-surface: #edf6f9;
-    --color-border: rgba(0, 119, 182, 0.2);
-    --color-input: rgba(0, 119, 182, 0.15);
-    --color-ring: #0077b6;
-
-    /* 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: #0077b6;
-
-    /* Transitions - Slow and smooth like currents */
-    --transition-fast: 200ms;
-    --transition-normal: 350ms;
-    --transition-slow: 500ms;
-    --transition-timing: cubic-bezier(0.25, 0.1, 0.25, 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: #0077b6;
-
-    /* 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="ocean-dark"] {
-    /* Shadows - Blue-tinted colored glow */
-    --shadow-main:
-        0 4px 14px rgba(72, 202, 228, 0.12), 0 1px 3px rgba(0, 0, 0, 0.15);
-    --shadow-sm: 0 2px 6px rgba(72, 202, 228, 0.08);
-    --shadow-lg:
-        0 8px 30px rgba(72, 202, 228, 0.2), 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 40px rgba(72, 202, 228, 0.3), 0 4px 12px rgba(0, 180, 216, 0.15);
-    --shadow-active: 0 2px 8px rgba(72, 202, 228, 0.18);
-
-    /* Border radius - Smooth like waves */
-    --radius-none: 0px;
-    --radius-sm: 8px;
-    --radius-md: 12px;
-    --radius-lg: 16px;
-    --radius-xl: 18px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Bright cyan on deep navy */
-    --color-primary: #48cae4;
-    --color-primary-hover: #76d8eb;
-    --color-primary-foreground: #062031;
-
-    --color-secondary: #112840;
-    --color-secondary-hover: #1a3654;
-    --color-secondary-foreground: #cae9f5;
-
-    --color-accent: #00b4d8;
-    --color-accent-foreground: #062031;
-
-    --color-muted: #112840;
-    --color-muted-foreground: #8ab4c8;
-
-    --color-background: #0a1628;
-    --color-foreground: #e8f0f5;
-    --color-card: #0f2035;
-    --color-card-foreground: #e8f0f5;
-    --color-surface: #112840;
-    --color-border: rgba(72, 202, 228, 0.22);
-    --color-input: rgba(72, 202, 228, 0.25);
-    --color-ring: #48cae4;
-
-    /* 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: #48cae4;
-
-    /* Transitions - Slow and smooth like currents */
-    --transition-fast: 200ms;
-    --transition-normal: 350ms;
-    --transition-slow: 500ms;
-    --transition-timing: cubic-bezier(0.25, 0.1, 0.25, 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: #48cae4;
-
-    /* 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/rose.css

@@ -1,233 +0,0 @@
-/**
- * Rose Theme — "Elegant Bloom"
- *
- * Pink and rose palette with warm, elegant, and sophisticated aesthetics.
- * Gentle curves, graceful transitions, and rose-tinted shadows create
- * a refined atmosphere perfect for lifestyle, beauty, and luxury UIs.
- */
-
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
-[data-theme="rose-light"] {
-    /* Shadows - Rose-tinted, warm */
-    --shadow-main: 0 1px 3px rgba(225, 29, 72, 0.08), 0 1px 2px rgba(225, 29, 72, 0.05);
-    --shadow-sm: 0 1px 2px rgba(225, 29, 72, 0.05);
-    --shadow-lg:
-        0 10px 25px -5px rgba(225, 29, 72, 0.12), 0 8px 10px -6px rgba(225, 29, 72, 0.08);
-    --shadow-inner: inset 0 1px 2px rgba(225, 29, 72, 0.06);
-    --shadow-none: none;
-    --shadow-hover: 0 10px 40px -10px rgba(225, 29, 72, 0.2);
-    --shadow-active: 0 1px 2px rgba(225, 29, 72, 0.05);
-
-    /* Border radius - Gentle curves */
-    --radius-none: 0px;
-    --radius-sm: 8px;
-    --radius-md: 12px;
-    --radius-lg: 16px;
-    --radius-xl: 22px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Rose palette, warm and elegant */
-    --color-primary: #e11d48;
-    --color-primary-hover: #be123c;
-    --color-primary-foreground: #ffffff;
-
-    --color-secondary: #fff1f2;
-    --color-secondary-hover: #ffe4e6;
-    --color-secondary-foreground: #9f1239;
-
-    --color-accent: #fb7185;
-    --color-accent-foreground: #4c0519;
-
-    --color-muted: #ffe4e6;
-    --color-muted-foreground: #6b7280;
-
-    --color-background: #fff1f2;
-    --color-foreground: #4c0519;
-    --color-card: #ffffff;
-    --color-card-foreground: #4c0519;
-    --color-surface: #ffe4e6;
-    --color-border: rgba(225, 29, 72, 0.15);
-    --color-input: rgba(225, 29, 72, 0.12);
-    --color-ring: #e11d48;
-
-    /* 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 - Rose tint */
-    --icon-stroke-width: 1.5;
-    --icon-color: #e11d48;
-
-    /* Transitions - Graceful, smooth */
-    --transition-fast: 200ms;
-    --transition-normal: 350ms;
-    --transition-slow: 500ms;
-    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms - Subtle, elegant */
-    --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: #e11d48;
-
-    /* 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="rose-dark"] {
-    /* Shadows - Deep rose-tinted */
-    --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(225, 29, 72, 0.12);
-    --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(225, 29, 72, 0.15);
-    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.3);
-    --shadow-none: none;
-    --shadow-hover: 0 10px 40px -10px rgba(251, 113, 133, 0.3);
-    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.25);
-
-    /* Border radius - Gentle curves */
-    --radius-none: 0px;
-    --radius-sm: 8px;
-    --radius-md: 12px;
-    --radius-lg: 16px;
-    --radius-xl: 22px;
-    --radius-full: 9999px;
-
-    /* Border width */
-    --border-width: 1px;
-    --border-width-thin: 1px;
-    --border-width-thick: 2px;
-
-    /* Colors - Deep rose dark mode */
-    --color-primary: #fb7185;
-    --color-primary-hover: #fda4af;
-    --color-primary-foreground: #4c0519;
-
-    --color-secondary: #2a0a1a;
-    --color-secondary-hover: #3d1025;
-    --color-secondary-foreground: #fecdd3;
-
-    --color-accent: #fb7185;
-    --color-accent-foreground: #4c0519;
-
-    --color-muted: #2a0a1a;
-    --color-muted-foreground: #fda4af;
-
-    --color-background: #1a0510;
-    --color-foreground: #ffe4e6;
-    --color-card: #2a0a1a;
-    --color-card-foreground: #ffe4e6;
-    --color-surface: #3d1025;
-    --color-border: rgba(251, 113, 133, 0.2);
-    --color-input: rgba(251, 113, 133, 0.15);
-    --color-ring: #fb7185;
-
-    /* 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 rose for dark */
-    --icon-stroke-width: 1.5;
-    --icon-color: #fb7185;
-
-    /* Transitions - Graceful, smooth */
-    --transition-fast: 200ms;
-    --transition-normal: 350ms;
-    --transition-slow: 500ms;
-    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-
-    /* Hover/Active transforms - Subtle, elegant */
-    --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: #fb7185;
-
-    /* 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/sand.css

@@ -1,234 +0,0 @@
-/**
- * Sand Theme — "Desert Minimal"
- *
- * Warm beige and amber earth tones that evoke sun-baked desert landscapes.
- * A calm, natural aesthetic with soft golden shadows, rounded organic radii,
- * and gentle transitions. The palette draws from sandstone, amber, and
- * sun-bleached clay — grounded, warm, and inviting.
- */
-
-/* ==========================================================================
- * LIGHT MODE
- * ========================================================================== */
-[data-theme="sand-light"] {
-    /* Shadows - Warm earth-toned, amber-tinted */
-    --shadow-main: 0 1px 3px rgba(146, 64, 14, 0.08), 0 1px 2px rgba(146, 64, 14, 0.05);
-    --shadow-sm: 0 1px 2px rgba(146, 64, 14, 0.05);
-    --shadow-lg:
-        0 10px 25px -5px rgba(146, 64, 14, 0.1), 0 8px 10px -6px rgba(146, 64, 14, 0.06);
-    --shadow-inner: inset 0 1px 2px rgba(146, 64, 14, 0.05);
-    --shadow-none: none;
-    --shadow-hover: 0 10px 40px -10px rgba(146, 64, 14, 0.14);
-    --shadow-active: 0 1px 2px rgba(146, 64, 14, 0.05);
-
-    /* Border radius - Natural, soft */
-    --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 - Warm amber earth tones */
-    --color-primary: #92400e;
-    --color-primary-hover: #78350f;
-    --color-primary-foreground: #ffffff;
-
-    --color-secondary: #fef9c3;
-    --color-secondary-hover: #fef3c7;
-    --color-secondary-foreground: #451a03;
-
-    --color-accent: #d97706;
-    --color-accent-foreground: #ffffff;
-
-    --color-muted: #fef9c3;
-    --color-muted-foreground: #78716c;
-
-    --color-background: #fefdfb;
-    --color-foreground: #451a03;
-    --color-card: #ffffff;
-    --color-card-foreground: #451a03;
-    --color-surface: #fef3c7;
-    --color-border: rgba(146, 64, 14, 0.2);
-    --color-input: rgba(146, 64, 14, 0.22);
-    --color-ring: #92400e;
-
-    /* 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: #92400e;
-
-    /* Transitions - Gentle, natural */
-    --transition-fast: 150ms;
-    --transition-normal: 300ms;
-    --transition-slow: 450ms;
-    --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: #92400e;
-
-    /* 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="sand-dark"] {
-    /* Shadows - Deep warm amber glow */
-    --shadow-main: 0 1px 3px rgba(217, 119, 6, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
-    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
-    --shadow-lg:
-        0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(217, 119, 6, 0.08);
-    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.25);
-    --shadow-none: none;
-    --shadow-hover: 0 10px 40px -10px rgba(217, 119, 6, 0.15);
-    --shadow-active: 0 1px 2px rgba(0, 0, 0, 0.2);
-
-    /* Border radius - Natural, soft */
-    --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 - Warm amber on deep brown */
-    --color-primary: #fbbf24;
-    --color-primary-hover: #fcd34d;
-    --color-primary-foreground: #18120a;
-
-    --color-secondary: #241c10;
-    --color-secondary-hover: #302416;
-    --color-secondary-foreground: #fef3c7;
-
-    --color-accent: #d97706;
-    --color-accent-foreground: #ffffff;
-
-    --color-muted: #241c10;
-    --color-muted-foreground: #fbbf24;
-
-    --color-background: #18120a;
-    --color-foreground: #fef3c7;
-    --color-card: #241c10;
-    --color-card-foreground: #fef3c7;
-    --color-surface: #302416;
-    --color-border: rgba(217, 119, 6, 0.2);
-    --color-input: rgba(217, 119, 6, 0.25);
-    --color-ring: #fbbf24;
-
-    /* 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: #d97706;
-
-    /* Transitions - Gentle, natural */
-    --transition-fast: 150ms;
-    --transition-normal: 300ms;
-    --transition-slow: 450ms;
-    --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: #d97706;
-
-    /* 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);
-}