m9sh 0.2.1 → 0.2.2

data/app/assets/stylesheets/tailwind.css

@@ -0,0 +1,1180 @@
+/*
+ * Tailwind CSS v4 Source File
+ *
+ * This is the source file for Tailwind CSS v4.
+ * It gets compiled to application.css using the Tailwind CLI.
+ *
+ * Build commands:
+ *   npm run build:css  - Build once
+ *   npm run watch:css  - Watch for changes
+ */
+
+@import "tailwindcss";
+
+/* Define theme colors using Tailwind v4 @theme directive */
+@theme {
+    /* NEUTRAL THEME (Default) - Light mode colors */
+    --color-background: oklch(0.96 0 0);
+    --color-foreground: oklch(0.23 0.01 255);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.23 0.01 255);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.23 0.01 255);
+    --color-primary: oklch(0.27 0.01 255);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.96 0.01 255);
+    --color-secondary-foreground: oklch(0.27 0.01 255);
+    --color-muted: oklch(0.96 0.01 255);
+    --color-muted-foreground: oklch(0.55 0.01 255);
+    --color-accent: oklch(0.96 0.01 255);
+    --color-accent-foreground: oklch(0.27 0.01 255);
+    --color-destructive: oklch(0.65 0.25 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.27 0.01 255);
+    --color-sidebar-background: oklch(0.96 0.01 255 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.01 255);
+    --color-sidebar-primary: oklch(0.27 0.01 255);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.90 0.01 255 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.27 0.01 255);
+    --color-sidebar-border: oklch(0.90 0.01 255 / 0.3);
+    --color-sidebar-ring: oklch(0.27 0.01 255);
+
+    /* Border radius */
+    --radius-sm: 0.125rem;
+    --radius-md: calc(0.5rem - 2px);
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+
+    /* Font family */
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+/* Dark mode theme overrides - NEUTRAL THEME */
+.dark {
+    --color-background: oklch(0.18 0.04 255);
+    --color-foreground: oklch(0.93 0.02 240);
+    --color-card: oklch(0.15 0.04 255);
+    --color-card-foreground: oklch(0.93 0.02 240);
+    --color-popover: oklch(0.15 0.04 255);
+    --color-popover-foreground: oklch(0.93 0.02 240);
+    --color-primary: oklch(0.93 0.02 240);
+    --color-primary-foreground: oklch(0.20 0.03 255);
+    --color-secondary: oklch(0.27 0.02 250);
+    --color-secondary-foreground: oklch(0.93 0.02 240);
+    --color-muted: oklch(0.27 0.02 250);
+    --color-muted-foreground: oklch(0.70 0.01 245);
+    --color-accent: oklch(0.27 0.02 250);
+    --color-accent-foreground: oklch(0.93 0.02 240);
+    --color-destructive: oklch(0.45 0.15 25);
+    --color-destructive-foreground: oklch(0.93 0.02 240);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.83 0.02 245);
+    --color-sidebar-background: oklch(0.17 0.01 255 / 0);
+    --color-sidebar-foreground: oklch(0.96 0.01 255);
+    --color-sidebar-primary: oklch(0.60 0.15 250);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.25 0.02 255 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.96 0.01 255);
+    --color-sidebar-border: oklch(0.25 0.02 255 / 0.3);
+    --color-sidebar-ring: oklch(0.70 0.12 250);
+}
+
+/* ============================================ */
+/* INDIGO THEME - Professional Blue/Indigo Palette */
+/* ============================================ */
+[data-theme="indigo"] {
+    --color-background: oklch(0.97 0.01 260);
+    --color-foreground: oklch(0.25 0.03 260);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.03 260);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.03 260);
+    --color-primary: oklch(0.55 0.20 260);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.92 0.03 260);
+    --color-secondary-foreground: oklch(0.30 0.05 260);
+    --color-muted: oklch(0.94 0.02 260);
+    --color-muted-foreground: oklch(0.50 0.05 260);
+    --color-accent: oklch(0.94 0.03 260);
+    --color-accent-foreground: oklch(0.30 0.05 260);
+    --color-destructive: oklch(0.60 0.25 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.55 0.20 260);
+    --color-sidebar-background: oklch(0.94 0.02 260 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.05 260);
+    --color-sidebar-primary: oklch(0.55 0.20 260);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.03 260 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.30 0.05 260);
+    --color-sidebar-border: oklch(0.88 0.02 260 / 0.3);
+    --color-sidebar-ring: oklch(0.55 0.20 260);
+}
+
+[data-theme="indigo"].dark {
+    --color-background: oklch(0.16 0.05 260);
+    --color-foreground: oklch(0.92 0.03 250);
+    --color-card: oklch(0.14 0.05 260);
+    --color-card-foreground: oklch(0.92 0.03 250);
+    --color-popover: oklch(0.14 0.05 260);
+    --color-popover-foreground: oklch(0.92 0.03 250);
+    --color-primary: oklch(0.65 0.22 260);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.25 0.05 260);
+    --color-secondary-foreground: oklch(0.92 0.03 250);
+    --color-muted: oklch(0.25 0.05 260);
+    --color-muted-foreground: oklch(0.65 0.10 250);
+    --color-accent: oklch(0.25 0.05 260);
+    --color-accent-foreground: oklch(0.92 0.03 250);
+    --color-destructive: oklch(0.48 0.18 25);
+    --color-destructive-foreground: oklch(0.92 0.03 250);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.65 0.22 260);
+    --color-sidebar-background: oklch(0.15 0.04 260 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.02 255);
+    --color-sidebar-primary: oklch(0.65 0.22 260);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.23 0.05 260 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.94 0.02 255);
+    --color-sidebar-border: oklch(0.23 0.05 260 / 0.3);
+    --color-sidebar-ring: oklch(0.65 0.22 260);
+}
+
+/* ============================================ */
+/* PARTY THEME - Vibrant Multi-Color Palette */
+/* ============================================ */
+[data-theme="party"] {
+    --color-background: oklch(0.97 0.02 330);
+    --color-foreground: oklch(0.25 0.05 330);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.05 330);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.05 330);
+    --color-primary: oklch(0.60 0.28 330);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.93 0.05 40);
+    --color-secondary-foreground: oklch(0.30 0.08 40);
+    --color-muted: oklch(0.94 0.03 330);
+    --color-muted-foreground: oklch(0.50 0.12 320);
+    --color-accent: oklch(0.94 0.05 280);
+    --color-accent-foreground: oklch(0.30 0.10 280);
+    --color-destructive: oklch(0.62 0.26 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.60 0.28 330);
+    --color-sidebar-background: oklch(0.94 0.03 330 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.10 320);
+    --color-sidebar-primary: oklch(0.60 0.28 330);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.06 280 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.30 0.10 280);
+    --color-sidebar-border: oklch(0.88 0.04 320 / 0.3);
+    --color-sidebar-ring: oklch(0.60 0.28 330);
+}
+
+[data-theme="party"].dark {
+    --color-background: oklch(0.16 0.06 330);
+    --color-foreground: oklch(0.92 0.05 320);
+    --color-card: oklch(0.14 0.06 330);
+    --color-card-foreground: oklch(0.92 0.05 320);
+    --color-popover: oklch(0.14 0.06 330);
+    --color-popover-foreground: oklch(0.92 0.05 320);
+    --color-primary: oklch(0.70 0.30 330);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.65 0.25 40);
+    --color-secondary-foreground: oklch(0.98 0 0);
+    --color-muted: oklch(0.25 0.08 330);
+    --color-muted-foreground: oklch(0.70 0.15 320);
+    --color-accent: oklch(0.60 0.25 280);
+    --color-accent-foreground: oklch(0.98 0 0);
+    --color-destructive: oklch(0.50 0.20 25);
+    --color-destructive-foreground: oklch(0.92 0.05 320);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.70 0.30 330);
+    --color-sidebar-background: oklch(0.15 0.05 330 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.04 320);
+    --color-sidebar-primary: oklch(0.70 0.30 330);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.60 0.25 280 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.98 0 0);
+    --color-sidebar-border: oklch(0.23 0.08 330 / 0.3);
+    --color-sidebar-ring: oklch(0.70 0.30 330);
+}
+
+/* ============================================ */
+/* SUNSET THEME - Warm Orange & Red Gradient */
+/* ============================================ */
+[data-theme="sunset"] {
+    --color-background: oklch(0.97 0.02 50);
+    --color-foreground: oklch(0.25 0.04 30);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.04 30);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.04 30);
+    --color-primary: oklch(0.62 0.24 40);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.92 0.06 30);
+    --color-secondary-foreground: oklch(0.30 0.08 30);
+    --color-muted: oklch(0.94 0.03 50);
+    --color-muted-foreground: oklch(0.50 0.10 40);
+    --color-accent: oklch(0.93 0.06 20);
+    --color-accent-foreground: oklch(0.30 0.08 20);
+    --color-destructive: oklch(0.60 0.25 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.62 0.24 40);
+    --color-sidebar-background: oklch(0.94 0.03 50 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.08 35);
+    --color-sidebar-primary: oklch(0.62 0.24 40);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.06 30 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.30 0.08 30);
+    --color-sidebar-border: oklch(0.88 0.04 40 / 0.3);
+    --color-sidebar-ring: oklch(0.62 0.24 40);
+}
+
+[data-theme="sunset"].dark {
+    --color-background: oklch(0.16 0.05 30);
+    --color-foreground: oklch(0.92 0.04 40);
+    --color-card: oklch(0.14 0.05 30);
+    --color-card-foreground: oklch(0.92 0.04 40);
+    --color-popover: oklch(0.14 0.05 30);
+    --color-popover-foreground: oklch(0.92 0.04 40);
+    --color-primary: oklch(0.70 0.26 40);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.65 0.22 30);
+    --color-secondary-foreground: oklch(0.98 0 0);
+    --color-muted: oklch(0.25 0.06 30);
+    --color-muted-foreground: oklch(0.70 0.12 35);
+    --color-accent: oklch(0.60 0.20 20);
+    --color-accent-foreground: oklch(0.98 0 0);
+    --color-destructive: oklch(0.50 0.20 25);
+    --color-destructive-foreground: oklch(0.92 0.04 40);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.70 0.26 40);
+    --color-sidebar-background: oklch(0.15 0.04 30 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.03 40);
+    --color-sidebar-primary: oklch(0.70 0.26 40);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.60 0.20 30 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.98 0 0);
+    --color-sidebar-border: oklch(0.23 0.06 30 / 0.3);
+    --color-sidebar-ring: oklch(0.70 0.26 40);
+}
+
+/* ============================================ */
+/* OCEAN THEME - Deep Blue & Teal Waters */
+/* ============================================ */
+[data-theme="ocean"] {
+    --color-background: oklch(0.97 0.02 220);
+    --color-foreground: oklch(0.25 0.04 210);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.04 210);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.04 210);
+    --color-primary: oklch(0.55 0.18 220);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.92 0.04 190);
+    --color-secondary-foreground: oklch(0.30 0.08 190);
+    --color-muted: oklch(0.94 0.03 220);
+    --color-muted-foreground: oklch(0.50 0.08 210);
+    --color-accent: oklch(0.93 0.05 200);
+    --color-accent-foreground: oklch(0.30 0.08 200);
+    --color-destructive: oklch(0.60 0.25 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.55 0.18 220);
+    --color-sidebar-background: oklch(0.94 0.03 220 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.08 210);
+    --color-sidebar-primary: oklch(0.55 0.18 220);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.05 200 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.30 0.08 200);
+    --color-sidebar-border: oklch(0.88 0.03 215 / 0.3);
+    --color-sidebar-ring: oklch(0.55 0.18 220);
+}
+
+[data-theme="ocean"].dark {
+    --color-background: oklch(0.16 0.05 220);
+    --color-foreground: oklch(0.92 0.04 210);
+    --color-card: oklch(0.14 0.05 220);
+    --color-card-foreground: oklch(0.92 0.04 210);
+    --color-popover: oklch(0.14 0.05 220);
+    --color-popover-foreground: oklch(0.92 0.04 210);
+    --color-primary: oklch(0.65 0.20 220);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.62 0.18 190);
+    --color-secondary-foreground: oklch(0.98 0 0);
+    --color-muted: oklch(0.25 0.06 220);
+    --color-muted-foreground: oklch(0.70 0.12 210);
+    --color-accent: oklch(0.58 0.18 200);
+    --color-accent-foreground: oklch(0.98 0 0);
+    --color-destructive: oklch(0.50 0.20 25);
+    --color-destructive-foreground: oklch(0.92 0.04 210);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.65 0.20 220);
+    --color-sidebar-background: oklch(0.15 0.04 220 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.03 210);
+    --color-sidebar-primary: oklch(0.65 0.20 220);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.58 0.18 200 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.98 0 0);
+    --color-sidebar-border: oklch(0.23 0.06 220 / 0.3);
+    --color-sidebar-ring: oklch(0.65 0.20 220);
+}
+
+/* ============================================ */
+/* FOREST THEME - Natural Green & Earth Tones */
+/* ============================================ */
+[data-theme="forest"] {
+    --color-background: oklch(0.97 0.02 140);
+    --color-foreground: oklch(0.25 0.04 140);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.04 140);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.04 140);
+    --color-primary: oklch(0.55 0.16 145);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.92 0.04 130);
+    --color-secondary-foreground: oklch(0.30 0.08 130);
+    --color-muted: oklch(0.94 0.03 140);
+    --color-muted-foreground: oklch(0.50 0.08 140);
+    --color-accent: oklch(0.93 0.05 150);
+    --color-accent-foreground: oklch(0.30 0.08 150);
+    --color-destructive: oklch(0.60 0.25 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.55 0.16 145);
+    --color-sidebar-background: oklch(0.94 0.03 140 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.08 140);
+    --color-sidebar-primary: oklch(0.55 0.16 145);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.05 150 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.30 0.08 150);
+    --color-sidebar-border: oklch(0.88 0.03 140 / 0.3);
+    --color-sidebar-ring: oklch(0.55 0.16 145);
+}
+
+[data-theme="forest"].dark {
+    --color-background: oklch(0.16 0.04 140);
+    --color-foreground: oklch(0.92 0.03 140);
+    --color-card: oklch(0.14 0.04 140);
+    --color-card-foreground: oklch(0.92 0.03 140);
+    --color-popover: oklch(0.14 0.04 140);
+    --color-popover-foreground: oklch(0.92 0.03 140);
+    --color-primary: oklch(0.65 0.18 145);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.62 0.16 130);
+    --color-secondary-foreground: oklch(0.98 0 0);
+    --color-muted: oklch(0.25 0.05 140);
+    --color-muted-foreground: oklch(0.70 0.10 140);
+    --color-accent: oklch(0.58 0.16 150);
+    --color-accent-foreground: oklch(0.98 0 0);
+    --color-destructive: oklch(0.50 0.20 25);
+    --color-destructive-foreground: oklch(0.92 0.03 140);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.65 0.18 145);
+    --color-sidebar-background: oklch(0.15 0.03 140 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.02 140);
+    --color-sidebar-primary: oklch(0.65 0.18 145);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.58 0.16 150 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.98 0 0);
+    --color-sidebar-border: oklch(0.23 0.05 140 / 0.3);
+    --color-sidebar-ring: oklch(0.65 0.18 145);
+}
+
+/* ============================================ */
+/* CYBERPUNK THEME - Neon Purple & Cyan */
+/* ============================================ */
+[data-theme="cyberpunk"] {
+    --color-background: oklch(0.97 0.02 300);
+    --color-foreground: oklch(0.25 0.05 300);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.05 300);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.05 300);
+    --color-primary: oklch(0.62 0.28 300);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.92 0.06 190);
+    --color-secondary-foreground: oklch(0.30 0.10 190);
+    --color-muted: oklch(0.94 0.03 300);
+    --color-muted-foreground: oklch(0.50 0.12 295);
+    --color-accent: oklch(0.93 0.06 200);
+    --color-accent-foreground: oklch(0.30 0.10 200);
+    --color-destructive: oklch(0.62 0.26 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.62 0.28 300);
+    --color-sidebar-background: oklch(0.94 0.03 300 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.10 295);
+    --color-sidebar-primary: oklch(0.62 0.28 300);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.06 200 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.30 0.10 200);
+    --color-sidebar-border: oklch(0.88 0.04 295 / 0.3);
+    --color-sidebar-ring: oklch(0.62 0.28 300);
+}
+
+[data-theme="cyberpunk"].dark {
+    --color-background: oklch(0.16 0.06 300);
+    --color-foreground: oklch(0.92 0.05 295);
+    --color-card: oklch(0.14 0.06 300);
+    --color-card-foreground: oklch(0.92 0.05 295);
+    --color-popover: oklch(0.14 0.06 300);
+    --color-popover-foreground: oklch(0.92 0.05 295);
+    --color-primary: oklch(0.72 0.30 300);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.68 0.24 190);
+    --color-secondary-foreground: oklch(0.98 0 0);
+    --color-muted: oklch(0.25 0.08 300);
+    --color-muted-foreground: oklch(0.70 0.16 295);
+    --color-accent: oklch(0.62 0.22 200);
+    --color-accent-foreground: oklch(0.98 0 0);
+    --color-destructive: oklch(0.50 0.20 25);
+    --color-destructive-foreground: oklch(0.92 0.05 295);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.72 0.30 300);
+    --color-sidebar-background: oklch(0.15 0.05 300 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.04 295);
+    --color-sidebar-primary: oklch(0.72 0.30 300);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.62 0.22 200 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.98 0 0);
+    --color-sidebar-border: oklch(0.23 0.08 300 / 0.3);
+    --color-sidebar-ring: oklch(0.72 0.30 300);
+}
+
+/* ============================================ */
+/* THUNDER THEME - Energetic Yellow & Black for Workouts */
+/* ============================================ */
+[data-theme="thunder"] {
+    --color-background: oklch(0.98 0.02 90);
+    --color-foreground: oklch(0.20 0.02 90);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.20 0.02 90);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.20 0.02 90);
+    --color-primary: oklch(0.85 0.20 95);
+    --color-primary-foreground: oklch(0.15 0.02 90);
+    --color-secondary: oklch(0.22 0.02 90);
+    --color-secondary-foreground: oklch(0.95 0.08 95);
+    --color-muted: oklch(0.92 0.02 90);
+    --color-muted-foreground: oklch(0.45 0.05 90);
+    --color-accent: oklch(0.88 0.18 95);
+    --color-accent-foreground: oklch(0.18 0.02 90);
+    --color-destructive: oklch(0.58 0.24 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.85 0.20 95);
+    --color-sidebar-background: oklch(0.20 0.02 90 / 0.95);
+    --color-sidebar-foreground: oklch(0.90 0.08 95);
+    --color-sidebar-primary: oklch(0.85 0.20 95);
+    --color-sidebar-primary-foreground: oklch(0.15 0.02 90);
+    --color-sidebar-accent: oklch(0.30 0.04 90 / 0.8);
+    --color-sidebar-accent-foreground: oklch(0.90 0.10 95);
+    --color-sidebar-border: oklch(0.35 0.04 90 / 0.5);
+    --color-sidebar-ring: oklch(0.85 0.20 95);
+}
+
+[data-theme="thunder"].dark {
+    --color-background: oklch(0.12 0.02 90);
+    --color-foreground: oklch(0.95 0.06 95);
+    --color-card: oklch(0.16 0.02 90);
+    --color-card-foreground: oklch(0.95 0.06 95);
+    --color-popover: oklch(0.16 0.02 90);
+    --color-popover-foreground: oklch(0.95 0.06 95);
+    --color-primary: oklch(0.88 0.22 95);
+    --color-primary-foreground: oklch(0.12 0.02 90);
+    --color-secondary: oklch(0.25 0.04 90);
+    --color-secondary-foreground: oklch(0.92 0.08 95);
+    --color-muted: oklch(0.22 0.03 90);
+    --color-muted-foreground: oklch(0.65 0.08 92);
+    --color-accent: oklch(0.82 0.20 95);
+    --color-accent-foreground: oklch(0.15 0.02 90);
+    --color-destructive: oklch(0.52 0.20 25);
+    --color-destructive-foreground: oklch(0.95 0.06 95);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.88 0.22 95);
+    --color-sidebar-background: oklch(0.10 0.02 90 / 0.95);
+    --color-sidebar-foreground: oklch(0.92 0.08 95);
+    --color-sidebar-primary: oklch(0.88 0.22 95);
+    --color-sidebar-primary-foreground: oklch(0.12 0.02 90);
+    --color-sidebar-accent: oklch(0.25 0.05 90 / 0.8);
+    --color-sidebar-accent-foreground: oklch(0.90 0.10 95);
+    --color-sidebar-border: oklch(0.25 0.04 90 / 0.5);
+    --color-sidebar-ring: oklch(0.88 0.22 95);
+}
+
+/* ============================================ */
+/* ROSE THEME - Elegant Pink & Wine */
+/* ============================================ */
+[data-theme="rose"] {
+    --color-background: oklch(0.97 0.02 350);
+    --color-foreground: oklch(0.25 0.04 350);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.04 350);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.04 350);
+    --color-primary: oklch(0.58 0.22 350);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.92 0.04 340);
+    --color-secondary-foreground: oklch(0.30 0.08 340);
+    --color-muted: oklch(0.94 0.03 350);
+    --color-muted-foreground: oklch(0.50 0.10 345);
+    --color-accent: oklch(0.93 0.05 360);
+    --color-accent-foreground: oklch(0.30 0.08 360);
+    --color-destructive: oklch(0.60 0.25 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.58 0.22 350);
+    --color-sidebar-background: oklch(0.94 0.03 350 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.08 345);
+    --color-sidebar-primary: oklch(0.58 0.22 350);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.05 360 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.30 0.08 360);
+    --color-sidebar-border: oklch(0.88 0.04 345 / 0.3);
+    --color-sidebar-ring: oklch(0.58 0.22 350);
+}
+
+[data-theme="rose"].dark {
+    --color-background: oklch(0.16 0.05 350);
+    --color-foreground: oklch(0.92 0.04 345);
+    --color-card: oklch(0.14 0.05 350);
+    --color-card-foreground: oklch(0.92 0.04 345);
+    --color-popover: oklch(0.14 0.05 350);
+    --color-popover-foreground: oklch(0.92 0.04 345);
+    --color-primary: oklch(0.68 0.24 350);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.62 0.20 340);
+    --color-secondary-foreground: oklch(0.98 0 0);
+    --color-muted: oklch(0.25 0.06 350);
+    --color-muted-foreground: oklch(0.70 0.12 345);
+    --color-accent: oklch(0.60 0.18 360);
+    --color-accent-foreground: oklch(0.98 0 0);
+    --color-destructive: oklch(0.50 0.20 25);
+    --color-destructive-foreground: oklch(0.92 0.04 345);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.68 0.24 350);
+    --color-sidebar-background: oklch(0.15 0.04 350 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.03 345);
+    --color-sidebar-primary: oklch(0.68 0.24 350);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.60 0.18 360 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.98 0 0);
+    --color-sidebar-border: oklch(0.23 0.06 350 / 0.3);
+    --color-sidebar-ring: oklch(0.68 0.24 350);
+}
+
+/* ============================================ */
+/* MIAMI VICE THEME - Neon Pink & Teal 80s Aesthetic */
+/* ============================================ */
+[data-theme="miami"] {
+    --color-background: oklch(0.97 0.03 320);
+    --color-foreground: oklch(0.25 0.05 320);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.05 320);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.05 320);
+    --color-primary: oklch(0.65 0.32 330);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.92 0.08 190);
+    --color-secondary-foreground: oklch(0.25 0.12 190);
+    --color-muted: oklch(0.94 0.04 320);
+    --color-muted-foreground: oklch(0.50 0.14 315);
+    --color-accent: oklch(0.93 0.08 180);
+    --color-accent-foreground: oklch(0.25 0.12 180);
+    --color-destructive: oklch(0.62 0.26 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.65 0.32 330);
+    --color-sidebar-background: oklch(0.94 0.04 320 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.12 315);
+    --color-sidebar-primary: oklch(0.65 0.32 330);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.08 180 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.25 0.12 180);
+    --color-sidebar-border: oklch(0.88 0.05 315 / 0.3);
+    --color-sidebar-ring: oklch(0.65 0.32 330);
+}
+
+[data-theme="miami"].dark {
+    --color-background: oklch(0.15 0.08 310);
+    --color-foreground: oklch(0.92 0.06 320);
+    --color-card: oklch(0.13 0.08 310);
+    --color-card-foreground: oklch(0.92 0.06 320);
+    --color-popover: oklch(0.13 0.08 310);
+    --color-popover-foreground: oklch(0.92 0.06 320);
+    --color-primary: oklch(0.75 0.34 330);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.68 0.28 190);
+    --color-secondary-foreground: oklch(0.98 0 0);
+    --color-muted: oklch(0.24 0.10 310);
+    --color-muted-foreground: oklch(0.70 0.18 315);
+    --color-accent: oklch(0.65 0.28 180);
+    --color-accent-foreground: oklch(0.98 0 0);
+    --color-destructive: oklch(0.50 0.20 25);
+    --color-destructive-foreground: oklch(0.92 0.06 320);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.75 0.34 330);
+    --color-sidebar-background: oklch(0.14 0.06 310 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.05 320);
+    --color-sidebar-primary: oklch(0.75 0.34 330);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.65 0.28 180 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.98 0 0);
+    --color-sidebar-border: oklch(0.22 0.10 310 / 0.3);
+    --color-sidebar-ring: oklch(0.75 0.34 330);
+}
+
+/* ============================================ */
+/* LAVENDER DREAMS THEME - Sophisticated Purple/Violet */
+/* ============================================ */
+[data-theme="lavender"] {
+    --color-background: oklch(0.97 0.03 290);
+    --color-foreground: oklch(0.25 0.05 285);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.05 285);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.05 285);
+    --color-primary: oklch(0.62 0.26 285);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.92 0.06 295);
+    --color-secondary-foreground: oklch(0.28 0.10 295);
+    --color-muted: oklch(0.94 0.04 290);
+    --color-muted-foreground: oklch(0.50 0.12 285);
+    --color-accent: oklch(0.93 0.07 280);
+    --color-accent-foreground: oklch(0.28 0.10 280);
+    --color-destructive: oklch(0.62 0.26 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.62 0.26 285);
+    --color-sidebar-background: oklch(0.94 0.04 290 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.10 285);
+    --color-sidebar-primary: oklch(0.62 0.26 285);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.07 280 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.28 0.10 280);
+    --color-sidebar-border: oklch(0.88 0.05 285 / 0.3);
+    --color-sidebar-ring: oklch(0.62 0.26 285);
+}
+
+[data-theme="lavender"].dark {
+    --color-background: oklch(0.16 0.06 285);
+    --color-foreground: oklch(0.92 0.05 290);
+    --color-card: oklch(0.14 0.06 285);
+    --color-card-foreground: oklch(0.92 0.05 290);
+    --color-popover: oklch(0.14 0.06 285);
+    --color-popover-foreground: oklch(0.92 0.05 290);
+    --color-primary: oklch(0.70 0.28 285);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.65 0.24 295);
+    --color-secondary-foreground: oklch(0.98 0 0);
+    --color-muted: oklch(0.25 0.08 285);
+    --color-muted-foreground: oklch(0.70 0.16 290);
+    --color-accent: oklch(0.62 0.24 280);
+    --color-accent-foreground: oklch(0.98 0 0);
+    --color-destructive: oklch(0.50 0.20 25);
+    --color-destructive-foreground: oklch(0.92 0.05 290);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.70 0.28 285);
+    --color-sidebar-background: oklch(0.15 0.05 285 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.04 290);
+    --color-sidebar-primary: oklch(0.70 0.28 285);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.62 0.24 280 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.98 0 0);
+    --color-sidebar-border: oklch(0.23 0.08 285 / 0.3);
+    --color-sidebar-ring: oklch(0.70 0.28 285);
+}
+
+/* ============================================ */
+/* MINT LUXURY THEME - Fresh Mint Green with Gold Accents */
+/* ============================================ */
+[data-theme="mint"] {
+    --color-background: oklch(0.97 0.03 165);
+    --color-foreground: oklch(0.25 0.04 160);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.04 160);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.04 160);
+    --color-primary: oklch(0.68 0.22 165);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.92 0.06 80);
+    --color-secondary-foreground: oklch(0.28 0.12 80);
+    --color-muted: oklch(0.94 0.04 165);
+    --color-muted-foreground: oklch(0.50 0.10 160);
+    --color-accent: oklch(0.93 0.08 170);
+    --color-accent-foreground: oklch(0.28 0.10 170);
+    --color-destructive: oklch(0.62 0.26 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.68 0.22 165);
+    --color-sidebar-background: oklch(0.94 0.04 165 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.08 160);
+    --color-sidebar-primary: oklch(0.68 0.22 165);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.08 170 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.28 0.10 170);
+    --color-sidebar-border: oklch(0.88 0.04 165 / 0.3);
+    --color-sidebar-ring: oklch(0.68 0.22 165);
+}
+
+[data-theme="mint"].dark {
+    --color-background: oklch(0.16 0.05 160);
+    --color-foreground: oklch(0.92 0.04 165);
+    --color-card: oklch(0.14 0.05 160);
+    --color-card-foreground: oklch(0.92 0.04 165);
+    --color-popover: oklch(0.14 0.05 160);
+    --color-popover-foreground: oklch(0.92 0.04 165);
+    --color-primary: oklch(0.72 0.24 165);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.75 0.20 85);
+    --color-secondary-foreground: oklch(0.15 0.04 80);
+    --color-muted: oklch(0.25 0.06 160);
+    --color-muted-foreground: oklch(0.70 0.14 165);
+    --color-accent: oklch(0.68 0.22 170);
+    --color-accent-foreground: oklch(0.98 0 0);
+    --color-destructive: oklch(0.50 0.20 25);
+    --color-destructive-foreground: oklch(0.92 0.04 165);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.72 0.24 165);
+    --color-sidebar-background: oklch(0.15 0.04 160 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.03 165);
+    --color-sidebar-primary: oklch(0.72 0.24 165);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.68 0.22 170 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.98 0 0);
+    --color-sidebar-border: oklch(0.23 0.06 160 / 0.3);
+    --color-sidebar-ring: oklch(0.72 0.24 165);
+}
+
+/* ============================================ */
+/* CORAL REEF THEME - Warm Coral & Turquoise */
+/* ============================================ */
+[data-theme="coral"] {
+    --color-background: oklch(0.97 0.03 30);
+    --color-foreground: oklch(0.25 0.04 25);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.04 25);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.04 25);
+    --color-primary: oklch(0.68 0.24 15);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.92 0.08 200);
+    --color-secondary-foreground: oklch(0.25 0.12 200);
+    --color-muted: oklch(0.94 0.04 30);
+    --color-muted-foreground: oklch(0.50 0.12 25);
+    --color-accent: oklch(0.93 0.08 195);
+    --color-accent-foreground: oklch(0.25 0.12 195);
+    --color-destructive: oklch(0.62 0.26 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.68 0.24 15);
+    --color-sidebar-background: oklch(0.94 0.04 30 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.10 25);
+    --color-sidebar-primary: oklch(0.68 0.24 15);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.08 195 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.25 0.12 195);
+    --color-sidebar-border: oklch(0.88 0.04 30 / 0.3);
+    --color-sidebar-ring: oklch(0.68 0.24 15);
+}
+
+[data-theme="coral"].dark {
+    --color-background: oklch(0.16 0.06 20);
+    --color-foreground: oklch(0.92 0.05 30);
+    --color-card: oklch(0.14 0.06 20);
+    --color-card-foreground: oklch(0.92 0.05 30);
+    --color-popover: oklch(0.14 0.06 20);
+    --color-popover-foreground: oklch(0.92 0.05 30);
+    --color-primary: oklch(0.72 0.26 15);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.68 0.26 200);
+    --color-secondary-foreground: oklch(0.98 0 0);
+    --color-muted: oklch(0.25 0.08 20);
+    --color-muted-foreground: oklch(0.70 0.16 25);
+    --color-accent: oklch(0.65 0.26 195);
+    --color-accent-foreground: oklch(0.98 0 0);
+    --color-destructive: oklch(0.50 0.20 25);
+    --color-destructive-foreground: oklch(0.92 0.05 30);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.72 0.26 15);
+    --color-sidebar-background: oklch(0.15 0.05 20 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.04 30);
+    --color-sidebar-primary: oklch(0.72 0.26 15);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.65 0.26 195 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.98 0 0);
+    --color-sidebar-border: oklch(0.23 0.08 20 / 0.3);
+    --color-sidebar-ring: oklch(0.72 0.26 15);
+}
+
+/* ============================================ */
+/* ARCTIC AURORA THEME - Cool Blues & Purples Like Northern Lights */
+/* ============================================ */
+[data-theme="arctic"] {
+    --color-background: oklch(0.97 0.02 240);
+    --color-foreground: oklch(0.25 0.04 235);
+    --color-card: oklch(1 0 0);
+    --color-card-foreground: oklch(0.25 0.04 235);
+    --color-popover: oklch(1 0 0);
+    --color-popover-foreground: oklch(0.25 0.04 235);
+    --color-primary: oklch(0.60 0.24 245);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.92 0.06 270);
+    --color-secondary-foreground: oklch(0.28 0.10 270);
+    --color-muted: oklch(0.94 0.03 240);
+    --color-muted-foreground: oklch(0.50 0.10 240);
+    --color-accent: oklch(0.93 0.06 265);
+    --color-accent-foreground: oklch(0.28 0.10 265);
+    --color-destructive: oklch(0.62 0.26 25);
+    --color-destructive-foreground: oklch(0.98 0 0);
+    --color-border: oklch(0.922 0 0);
+    --color-input: oklch(0.922 0 0);
+    --color-ring: oklch(0.60 0.24 245);
+    --color-sidebar-background: oklch(0.94 0.03 240 / 0);
+    --color-sidebar-foreground: oklch(0.40 0.08 240);
+    --color-sidebar-primary: oklch(0.60 0.24 245);
+    --color-sidebar-primary-foreground: oklch(0.98 0 0);
+    --color-sidebar-accent: oklch(0.88 0.06 265 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.28 0.10 265);
+    --color-sidebar-border: oklch(0.88 0.04 240 / 0.3);
+    --color-sidebar-ring: oklch(0.60 0.24 245);
+}
+
+[data-theme="arctic"].dark {
+    --color-background: oklch(0.15 0.05 235);
+    --color-foreground: oklch(0.92 0.04 245);
+    --color-card: oklch(0.13 0.05 235);
+    --color-card-foreground: oklch(0.92 0.04 245);
+    --color-popover: oklch(0.13 0.05 235);
+    --color-popover-foreground: oklch(0.92 0.04 245);
+    --color-primary: oklch(0.68 0.26 245);
+    --color-primary-foreground: oklch(0.98 0 0);
+    --color-secondary: oklch(0.65 0.24 270);
+    --color-secondary-foreground: oklch(0.98 0 0);
+    --color-muted: oklch(0.24 0.06 235);
+    --color-muted-foreground: oklch(0.70 0.14 240);
+    --color-accent: oklch(0.62 0.24 265);
+    --color-accent-foreground: oklch(0.98 0 0);
+    --color-destructive: oklch(0.50 0.20 25);
+    --color-destructive-foreground: oklch(0.92 0.04 245);
+    --color-border: oklch(0.27 0 0);
+    --color-input: oklch(0.27 0 0);
+    --color-ring: oklch(0.68 0.26 245);
+    --color-sidebar-background: oklch(0.14 0.04 235 / 0);
+    --color-sidebar-foreground: oklch(0.94 0.03 245);
+    --color-sidebar-primary: oklch(0.68 0.26 245);
+    --color-sidebar-primary-foreground: oklch(1 0 0);
+    --color-sidebar-accent: oklch(0.62 0.24 265 / 0.5);
+    --color-sidebar-accent-foreground: oklch(0.98 0 0);
+    --color-sidebar-border: oklch(0.22 0.06 235 / 0.3);
+    --color-sidebar-ring: oklch(0.68 0.26 245);
+}
+
+/* Additional runtime variables that don't need utility classes */
+:root {
+    --content-height: auto;
+}
+
+/* Custom sidebar utilities - hover states */
+@layer utilities {
+    .hover\:bg-sidebar-accent:hover {
+        background-color: var(--color-sidebar-accent);
+    }
+
+    .hover\:text-sidebar-accent-foreground:hover {
+        color: var(--color-sidebar-accent-foreground);
+    }
+}
+
+/* Custom animations */
+@keyframes accordion-down {
+    from {
+        height: 0;
+    }
+    to {
+        height: var(--content-height);
+    }
+}
+
+@keyframes accordion-up {
+    from {
+        height: var(--content-height);
+    }
+    to {
+        height: 0;
+    }
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes slide-out {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes aurora-move-1 {
+    0%, 100% {
+        transform: translate(0, 0) scale(1);
+        opacity: 0.6;
+    }
+    33% {
+        transform: translate(20px, 10px) scale(1.1);
+        opacity: 0.7;
+    }
+    66% {
+        transform: translate(-20px, 15px) scale(0.95);
+        opacity: 0.5;
+    }
+}
+
+@keyframes aurora-move-2 {
+    0%, 100% {
+        transform: translate(0, 0) scale(1);
+        opacity: 0.6;
+    }
+    33% {
+        transform: translate(-25px, -10px) scale(1.15);
+        opacity: 0.7;
+    }
+    66% {
+        transform: translate(15px, -15px) scale(0.9);
+        opacity: 0.5;
+    }
+}
+
+@keyframes aurora-move-3 {
+    0%, 100% {
+        transform: translateX(-50%) scale(1);
+        opacity: 0.6;
+    }
+    33% {
+        transform: translateX(-45%) scale(1.1);
+        opacity: 0.7;
+    }
+    66% {
+        transform: translateX(-55%) scale(0.95);
+        opacity: 0.5;
+    }
+}
+
+/* Device frame mockups for component preview */
+.ios-frame {
+    position: relative;
+}
+
+.ios-frame::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 200px;
+    height: 30px;
+    background: #1a1a1a;
+    border-bottom-left-radius: 1.5rem;
+    border-bottom-right-radius: 1.5rem;
+    z-index: 10;
+}
+
+.android-frame {
+    position: relative;
+}
+
+/* Fullscreen mode adjustments */
+:fullscreen .ios-frame,
+:fullscreen .android-frame {
+    max-width: none;
+    max-height: none;
+}
+
+/* Preview theme toggle - scoped dark mode */
+[data-docs--component-preview-target="previewContainer"].dark {
+    color-scheme: dark;
+}
+
+[data-docs--component-preview-target="previewContainer"].dark .bg-background {
+    background-color: oklch(0.2 0 0);
+}
+
+[data-docs--component-preview-target="previewContainer"].dark .text-foreground {
+    color: oklch(0.98 0 0);
+}
+
+[data-docs--component-preview-target="previewContainer"].dark .border-border {
+    border-color: oklch(0.25 0 0);
+}
+
+/* Navbar blur effect - transparent */
+.navbar-blur {
+    background-color: transparent;
+}
+
+/* Aurora Borealis Animation */
+.aurora-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 800px;
+    height: 300px;
+    overflow: visible;
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+.aurora {
+    position: absolute;
+    width: 600px;
+    height: 400px;
+    filter: blur(60px);
+    opacity: 0.6;
+}
+
+.aurora-1 {
+    background: radial-gradient(ellipse at center,
+    oklch(0.80 0.25 310) 0%,
+    oklch(0.75 0.22 290) 30%,
+    transparent 60%);
+    top: 0;
+    left: -100px;
+    animation: aurora-move-1 20s ease-in-out infinite;
+}
+
+.aurora-2 {
+    background: radial-gradient(ellipse at center,
+    oklch(0.75 0.20 220) 0%,
+    oklch(0.70 0.18 200) 30%,
+    transparent 60%);
+    top: 20px;
+    right: -100px;
+    animation: aurora-move-2 25s ease-in-out infinite;
+}
+
+.aurora-3 {
+    background: radial-gradient(ellipse at center,
+    oklch(0.75 0.20 160) 0%,
+    oklch(0.70 0.18 180) 30%,
+    transparent 60%);
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    animation: aurora-move-3 30s ease-in-out infinite;
+}
+
+/* Dark mode aurora - more vibrant */
+.dark .aurora-container {
+    opacity: 0.5;
+}
+
+.dark .aurora-1 {
+    background: radial-gradient(ellipse at center,
+    oklch(0.60 0.28 310) 0%,
+    oklch(0.55 0.25 290) 30%,
+    transparent 60%);
+}
+
+.dark .aurora-2 {
+    background: radial-gradient(ellipse at center,
+    oklch(0.60 0.22 220) 0%,
+    oklch(0.55 0.20 200) 30%,
+    transparent 60%);
+}
+
+.dark .aurora-3 {
+    background: radial-gradient(ellipse at center,
+    oklch(0.60 0.22 160) 0%,
+    oklch(0.55 0.20 180) 30%,
+    transparent 60%);
+}
+
+/* Responsive aurora - hide on mobile */
+@media (max-width: 768px) {
+    .aurora-container {
+        display: none;
+    }
+}
+
+/* Skeleton loading animations */
+@keyframes skeleton-pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes shimmer {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+.animate-shimmer {
+    animation: shimmer 2s infinite;
+}