@admin-layout/tailwind-design-pro 10.1.1-alpha.9 → 12.0.16-alpha.0

package/lib/styles/index.css

@@ -1,18 +1,19 @@
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* Base theme variables */
-:root {
-    /* Theme colors */
+/* Multi-theme design system with CSS custom properties */
+
+@layer base {
+  /* Default Theme - Light Mode */
+  :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 221.2 83.2% 53.3%;
+    --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
@@ -24,61 +25,50 @@
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
+    --ring: 222.2 84% 4.9%;
     --radius: 0.5rem;
-    
+
+    /* Brand colors */
+    --brand-primary: 222.2 47.4% 11.2%;
+    --brand-secondary: 210 40% 96.1%;
+    --brand-accent: 210 40% 96.1%;
+
+    /* Semantic colors */
+    --success: 142.1 76.2% 36.3%;
+    --warning: 47.9 95.8% 53.1%;
+    --error: 0 84.2% 60.2%;
+    --info: 199.89 89.55% 48.04%;
+
+    /* Gradients */
+    --gradient-primary: linear-gradient(135deg, hsl(222.2 47.4% 11.2%), hsl(222.2 47.4% 21.2%));
+    --gradient-secondary: linear-gradient(135deg, hsl(210 40% 96.1%), hsl(210 40% 93.1%));
+    --gradient-brand: linear-gradient(135deg, hsl(222.2 47.4% 11.2%), hsl(222.2 47.4% 21.2%));
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 hsl(222.2 47.4% 11.2% / 0.05);
+    --shadow-md: 0 4px 6px -1px hsl(222.2 47.4% 11.2% / 0.1);
+    --shadow-lg: 0 10px 15px -3px hsl(222.2 47.4% 11.2% / 0.1);
+    --shadow-xl: 0 20px 25px -5px hsl(222.2 47.4% 11.2% / 0.1);
+
+    /* Component specific */
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 222.2 84% 4.9%;
+    --sidebar-border: 214.3 31.8% 91.4%;
+    --modal-backdrop: 222.2 84% 4.9% / 0.8;
+    --dropdown-background: 0 0% 100%;
+    --table-header: 210 40% 96.1%;
+    --code-background: 210 40% 96.1%;
+
+    /* Transitions */
+    --transition-colors: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+    --transition-transform: transform 0.15s ease-in-out;
+    --transition-all: all 0.15s ease-in-out;
+
     /* Fonts */
     --font-family: 'Inter', sans-serif;
-    
-    /* Font sizes */
-    --font-size-xs: 0.75rem;
-    --font-size-sm: 0.875rem;
-    --font-size-base: 1rem;
-    --font-size-lg: 1.125rem;
-    --font-size-xl: 1.25rem;
-    --font-size-2xl: 1.5rem;
-    --font-size-3xl: 1.875rem;
-    --font-size-4xl: 2.25rem;
-    --font-size-5xl: 3rem;
-    
-    /* Spacing */
-    --spacing-px: 1px;
-    --spacing-0: 0;
-    --spacing-0_5: 0.125rem;
-    --spacing-1: 0.25rem;
-    --spacing-1_5: 0.375rem;
-    --spacing-2: 0.5rem;
-    --spacing-2_5: 0.625rem;
-    --spacing-3: 0.75rem;
-    --spacing-3_5: 0.875rem;
-    --spacing-4: 1rem;
-    --spacing-5: 1.25rem;
-    --spacing-6: 1.5rem;
-    --spacing-8: 2rem;
-    --spacing-10: 2.5rem;
-    --spacing-12: 3rem;
-    --spacing-16: 4rem;
-    --spacing-20: 5rem;
-    --spacing-24: 6rem;
-    --spacing-32: 8rem;
-    --spacing-40: 10rem;
-    --spacing-48: 12rem;
-    --spacing-56: 14rem;
-    --spacing-64: 16rem;
-    
-    /* Border radius */
-    --radius-none: 0;
-    --radius-sm: 0.125rem;
-    --radius-default: 0.25rem;
-    --radius-md: 0.375rem;
-    --radius-lg: 0.5rem;
-    --radius-xl: 0.75rem;
-    --radius-2xl: 1rem;
-    --radius-3xl: 1.5rem;
-    --radius-full: 9999px;
-  }
-  
-  /* Dark mode theme variables */
+  }
+
+  /* Default Theme - Dark Mode */
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
@@ -86,7 +76,7 @@
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
+    --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
@@ -98,346 +88,586 @@
     --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
+    --ring: 212.7 26.8% 83.9%;
+
+    --brand-primary: 210 40% 98%;
+    --brand-secondary: 217.2 32.6% 17.5%;
+    --brand-accent: 217.2 32.6% 17.5%;
+
+    --success: 142.1 70.6% 45.3%;
+    --warning: 47.9 95.8% 53.1%;
+    --error: 0 84.2% 60.2%;
+    --info: 199.89 89.55% 48.04%;
+
+    --gradient-primary: linear-gradient(135deg, hsl(210 40% 98%), hsl(210 40% 88%));
+    --gradient-secondary: linear-gradient(135deg, hsl(217.2 32.6% 17.5%), hsl(217.2 32.6% 27.5%));
+    --gradient-brand: linear-gradient(135deg, hsl(210 40% 98%), hsl(210 40% 88%));
+
+    --shadow-sm: 0 1px 2px 0 hsl(217.2 32.6% 17.5% / 0.05);
+    --shadow-md: 0 4px 6px -1px hsl(217.2 32.6% 17.5% / 0.1);
+    --shadow-lg: 0 10px 15px -3px hsl(217.2 32.6% 17.5% / 0.1);
+    --shadow-xl: 0 20px 25px -5px hsl(217.2 32.6% 17.5% / 0.1);
+
+    --sidebar-background: 217.2 32.6% 17.5%;
+    --sidebar-foreground: 210 40% 98%;
+    --sidebar-border: 217.2 32.6% 27.5%;
+    --modal-backdrop: 222.2 84% 4.9% / 0.8;
+    --dropdown-background: 222.2 84% 4.9%;
+    --table-header: 217.2 32.6% 17.5%;
+    --code-background: 217.2 32.6% 17.5%;
+  }
+
+  /* Airbnb Theme - Light Mode */
+  [data-theme="airbnb"] {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 13%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 13%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 13%;
+    --primary: 0 100% 60%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 13%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 0 100% 95%;
+    --accent-foreground: 0 100% 60%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 89%;
+    --input: 0 0% 89%;
+    --ring: 0 100% 60%;
+    --radius: 0.75rem;
+
+    --brand-primary: 0 100% 60%;
+    --brand-secondary: 0 0% 96%;
+    --brand-accent: 0 100% 95%;
+
+    --success: 142.1 76.2% 36.3%;
+    --warning: 47.9 95.8% 53.1%;
+    --error: 0 84.2% 60.2%;
+    --info: 199.89 89.55% 48.04%;
+
+    --gradient-primary: linear-gradient(135deg, hsl(0 100% 60%), hsl(0 100% 70%));
+    --gradient-secondary: linear-gradient(135deg, hsl(0 0% 96%), hsl(0 0% 93%));
+    --gradient-brand: linear-gradient(135deg, hsl(0 100% 60%), hsl(0 100% 70%));
+
+    --shadow-sm: 0 1px 2px 0 hsl(0 100% 60% / 0.05);
+    --shadow-md: 0 4px 6px -1px hsl(0 100% 60% / 0.1);
+    --shadow-lg: 0 10px 15px -3px hsl(0 100% 60% / 0.1);
+    --shadow-xl: 0 20px 25px -5px hsl(0 100% 60% / 0.1);
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 0 0% 13%;
+    --sidebar-border: 0 0% 89%;
+    --modal-backdrop: 0 0% 13% / 0.8;
+    --dropdown-background: 0 0% 100%;
+    --table-header: 0 0% 96%;
+    --code-background: 0 0% 96%;
+  }
+
+  /* Airbnb Theme - Dark Mode */
+  [data-theme="airbnb"].dark {
+    --background: 0 0% 7%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 11%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 11%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 100% 65%;
+    --primary-foreground: 0 0% 7%;
+    --secondary: 0 0% 15%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 0 0% 65%;
+    --accent: 0 0% 15%;
+    --accent-foreground: 0 100% 65%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 18%;
+    --input: 0 0% 18%;
+    --ring: 0 100% 65%;
+
+    --brand-primary: 0 100% 65%;
+    --brand-secondary: 0 0% 15%;
+    --brand-accent: 0 0% 15%;
+
+    --gradient-primary: linear-gradient(135deg, hsl(0 100% 65%), hsl(0 100% 75%));
+    --gradient-secondary: linear-gradient(135deg, hsl(0 0% 15%), hsl(0 0% 25%));
+    --gradient-brand: linear-gradient(135deg, hsl(0 100% 65%), hsl(0 100% 75%));
+
+    --shadow-sm: 0 1px 2px 0 hsl(0 100% 65% / 0.05);
+    --shadow-md: 0 4px 6px -1px hsl(0 100% 65% / 0.1);
+    --shadow-lg: 0 10px 15px -3px hsl(0 100% 65% / 0.1);
+    --shadow-xl: 0 20px 25px -5px hsl(0 100% 65% / 0.1);
+
+    --sidebar-background: 0 0% 11%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-border: 0 0% 18%;
+    --modal-backdrop: 0 0% 7% / 0.8;
+    --dropdown-background: 0 0% 11%;
+    --table-header: 0 0% 15%;
+    --code-background: 0 0% 15%;
+  }
+
+  /* Slack Theme - Light Mode */
+  [data-theme="slack"] {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 13%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 13%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 13%;
+    --primary: 289 100% 32%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 289 20% 95%;
+    --secondary-foreground: 0 0% 13%;
+    --muted: 289 20% 95%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 289 100% 95%;
+    --accent-foreground: 289 100% 32%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 289 20% 89%;
+    --input: 289 20% 89%;
+    --ring: 289 100% 32%;
+    --radius: 0.375rem;
+
+    --brand-primary: 289 100% 32%;
+    --brand-secondary: 289 20% 95%;
+    --brand-accent: 289 100% 95%;
+
+    --success: 142.1 76.2% 36.3%;
+    --warning: 47.9 95.8% 53.1%;
+    --error: 0 84.2% 60.2%;
+    --info: 199.89 89.55% 48.04%;
+
+    --gradient-primary: linear-gradient(135deg, hsl(289 100% 32%), hsl(289 100% 42%));
+    --gradient-secondary: linear-gradient(135deg, hsl(289 20% 95%), hsl(289 20% 92%));
+    --gradient-brand: linear-gradient(135deg, hsl(289 100% 32%), hsl(289 100% 42%));
+
+    --shadow-sm: 0 1px 2px 0 hsl(289 100% 32% / 0.05);
+    --shadow-md: 0 4px 6px -1px hsl(289 100% 32% / 0.1);
+    --shadow-lg: 0 10px 15px -3px hsl(289 100% 32% / 0.1);
+    --shadow-xl: 0 20px 25px -5px hsl(289 100% 32% / 0.1);
+
+    --sidebar-background: 289 20% 98%;
+    --sidebar-foreground: 0 0% 13%;
+    --sidebar-border: 289 20% 89%;
+    --modal-backdrop: 0 0% 13% / 0.8;
+    --dropdown-background: 0 0% 100%;
+    --table-header: 289 20% 95%;
+    --code-background: 289 20% 95%;
+  }
+
+  /* Slack Theme - Dark Mode */
+  [data-theme="slack"].dark {
+    --background: 26 15% 8%;
+    --foreground: 0 0% 98%;
+    --card: 26 15% 12%;
+    --card-foreground: 0 0% 98%;
+    --popover: 26 15% 12%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 289 100% 45%;
+    --primary-foreground: 26 15% 8%;
+    --secondary: 26 15% 18%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 26 15% 18%;
+    --muted-foreground: 0 0% 65%;
+    --accent: 26 15% 18%;
+    --accent-foreground: 289 100% 45%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 26 15% 22%;
+    --input: 26 15% 22%;
+    --ring: 289 100% 45%;
+
+    --brand-primary: 289 100% 45%;
+    --brand-secondary: 26 15% 18%;
+    --brand-accent: 26 15% 18%;
+
+    --gradient-primary: linear-gradient(135deg, hsl(289 100% 45%), hsl(289 100% 55%));
+    --gradient-secondary: linear-gradient(135deg, hsl(26 15% 18%), hsl(26 15% 28%));
+    --gradient-brand: linear-gradient(135deg, hsl(289 100% 45%), hsl(289 100% 55%));
+
+    --shadow-sm: 0 1px 2px 0 hsl(289 100% 45% / 0.05);
+    --shadow-md: 0 4px 6px -1px hsl(289 100% 45% / 0.1);
+    --shadow-lg: 0 10px 15px -3px hsl(289 100% 45% / 0.1);
+    --shadow-xl: 0 20px 25px -5px hsl(289 100% 45% / 0.1);
+
+    --sidebar-background: 26 15% 12%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-border: 26 15% 22%;
+    --modal-backdrop: 26 15% 8% / 0.8;
+    --dropdown-background: 26 15% 12%;
+    --table-header: 26 15% 18%;
+    --code-background: 26 15% 18%;
+  }
+
+  /* GitHub Theme - Light Mode */
+  [data-theme="github"] {
+    --background: 0 0% 100%;
+    --foreground: 213 13% 13%;
+    --card: 0 0% 100%;
+    --card-foreground: 213 13% 13%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 213 13% 13%;
+    --primary: 213 13% 13%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 213 13% 96%;
+    --secondary-foreground: 213 13% 13%;
+    --muted: 213 13% 96%;
+    --muted-foreground: 213 13% 45%;
+    --accent: 213 13% 95%;
+    --accent-foreground: 213 13% 13%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 213 13% 89%;
+    --input: 213 13% 89%;
+    --ring: 213 13% 13%;
+    --radius: 0.25rem;
+
+    --brand-primary: 213 13% 13%;
+    --brand-secondary: 213 13% 96%;
+    --brand-accent: 213 13% 95%;
+
+    --success: 142.1 76.2% 36.3%;
+    --warning: 47.9 95.8% 53.1%;
+    --error: 0 84.2% 60.2%;
+    --info: 199.89 89.55% 48.04%;
+
+    --gradient-primary: linear-gradient(135deg, hsl(213 13% 13%), hsl(213 13% 23%));
+    --gradient-secondary: linear-gradient(135deg, hsl(213 13% 96%), hsl(213 13% 93%));
+    --gradient-brand: linear-gradient(135deg, hsl(213 13% 13%), hsl(213 13% 23%));
+
+    --shadow-sm: 0 1px 2px 0 hsl(213 13% 13% / 0.05);
+    --shadow-md: 0 4px 6px -1px hsl(213 13% 13% / 0.1);
+    --shadow-lg: 0 10px 15px -3px hsl(213 13% 13% / 0.1);
+    --shadow-xl: 0 20px 25px -5px hsl(213 13% 13% / 0.1);
+
+    --sidebar-background: 213 13% 98%;
+    --sidebar-foreground: 213 13% 13%;
+    --sidebar-border: 213 13% 89%;
+    --modal-backdrop: 213 13% 13% / 0.8;
+    --dropdown-background: 0 0% 100%;
+    --table-header: 213 13% 96%;
+    --code-background: 213 13% 96%;
+  }
+
+  /* GitHub Theme - Dark Mode */
+  [data-theme="github"].dark {
+    --background: 220 13% 9%;
+    --foreground: 220 14% 93%;
+    --card: 220 13% 13%;
+    --card-foreground: 220 14% 93%;
+    --popover: 220 13% 13%;
+    --popover-foreground: 220 14% 93%;
+    --primary: 220 14% 93%;
+    --primary-foreground: 220 13% 9%;
+    --secondary: 220 13% 17%;
+    --secondary-foreground: 220 14% 93%;
+    --muted: 220 13% 17%;
+    --muted-foreground: 220 9% 65%;
+    --accent: 220 13% 17%;
+    --accent-foreground: 220 14% 93%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 220 14% 93%;
+    --border: 220 13% 21%;
+    --input: 220 13% 21%;
+    --ring: 220 14% 93%;
+
+    --brand-primary: 220 14% 93%;
+    --brand-secondary: 220 13% 17%;
+    --brand-accent: 220 13% 17%;
+
+    --gradient-primary: linear-gradient(135deg, hsl(220 14% 93%), hsl(220 14% 83%));
+    --gradient-secondary: linear-gradient(135deg, hsl(220 13% 17%), hsl(220 13% 27%));
+    --gradient-brand: linear-gradient(135deg, hsl(220 14% 93%), hsl(220 14% 83%));
+
+    --shadow-sm: 0 1px 2px 0 hsl(220 14% 93% / 0.05);
+    --shadow-md: 0 4px 6px -1px hsl(220 14% 93% / 0.1);
+    --shadow-lg: 0 10px 15px -3px hsl(220 14% 93% / 0.1);
+    --shadow-xl: 0 20px 25px -5px hsl(220 14% 93% / 0.1);
+
+    --sidebar-background: 220 13% 13%;
+    --sidebar-foreground: 220 14% 93%;
+    --sidebar-border: 220 13% 21%;
+    --modal-backdrop: 220 13% 9% / 0.8;
+    --dropdown-background: 220 13% 13%;
+    --table-header: 220 13% 17%;
+    --code-background: 220 13% 17%;
   }
-  
-  /* Theme color utilities */
-  .bg-background {
-    background-color: hsl(var(--background)) !important;
+
+  /* Spotify Theme - Default (Dark) */
+  [data-theme="spotify"] {
+    --background: 0 0% 7%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 11%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 11%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 141 76% 48%;
+    --primary-foreground: 0 0% 7%;
+    --secondary: 0 0% 18%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 18%;
+    --muted-foreground: 0 0% 63%;
+    --accent: 0 0% 18%;
+    --accent-foreground: 141 76% 48%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 18%;
+    --input: 0 0% 18%;
+    --ring: 141 76% 48%;
+    --radius: 1rem;
+
+    --brand-primary: 141 76% 48%;
+    --brand-secondary: 0 0% 18%;
+    --brand-accent: 0 0% 18%;
+
+    --success: 142.1 76.2% 36.3%;
+    --warning: 47.9 95.8% 53.1%;
+    --error: 0 84.2% 60.2%;
+    --info: 199.89 89.55% 48.04%;
+
+    --gradient-primary: linear-gradient(135deg, hsl(141 76% 48%), hsl(141 76% 58%));
+    --gradient-secondary: linear-gradient(135deg, hsl(0 0% 18%), hsl(0 0% 15%));
+    --gradient-brand: linear-gradient(135deg, hsl(141 76% 48%), hsl(141 76% 58%));
+
+    --shadow-sm: 0 1px 2px 0 hsl(141 76% 48% / 0.05);
+    --shadow-md: 0 4px 6px -1px hsl(141 76% 48% / 0.1);
+    --shadow-lg: 0 10px 15px -3px hsl(141 76% 48% / 0.1);
+    --shadow-xl: 0 20px 25px -5px hsl(141 76% 48% / 0.1);
+
+    --sidebar-background: 0 0% 11%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-border: 0 0% 18%;
+    --modal-backdrop: 0 0% 7% / 0.8;
+    --dropdown-background: 0 0% 11%;
+    --table-header: 0 0% 18%;
+    --code-background: 0 0% 18%;
   }
-  
-  .text-foreground {
-    color: hsl(var(--foreground)) !important;
+
+  /* Spotify Theme - Light Mode */
+  [data-theme="spotify"].light {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 13%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 13%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 13%;
+    --primary: 141 76% 38%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 141 10% 96%;
+    --secondary-foreground: 0 0% 13%;
+    --muted: 141 10% 96%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 141 10% 95%;
+    --accent-foreground: 141 76% 38%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 141 10% 89%;
+    --input: 141 10% 89%;
+    --ring: 141 76% 38%;
+
+    --brand-primary: 141 76% 38%;
+    --brand-secondary: 141 10% 96%;
+    --brand-accent: 141 10% 95%;
+
+    --gradient-primary: linear-gradient(135deg, hsl(141 76% 38%), hsl(141 76% 48%));
+    --gradient-secondary: linear-gradient(135deg, hsl(141 10% 96%), hsl(141 10% 93%));
+    --gradient-brand: linear-gradient(135deg, hsl(141 76% 38%), hsl(141 76% 48%));
+
+    --shadow-sm: 0 1px 2px 0 hsl(141 76% 38% / 0.05);
+    --shadow-md: 0 4px 6px -1px hsl(141 76% 38% / 0.1);
+    --shadow-lg: 0 10px 15px -3px hsl(141 76% 38% / 0.1);
+    --shadow-xl: 0 20px 25px -5px hsl(141 76% 38% / 0.1);
+
+    --sidebar-background: 141 10% 98%;
+    --sidebar-foreground: 0 0% 13%;
+    --sidebar-border: 141 10% 89%;
+    --modal-backdrop: 0 0% 13% / 0.8;
+    --dropdown-background: 0 0% 100%;
+    --table-header: 141 10% 96%;
+    --code-background: 141 10% 96%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
   }
-  
-  .bg-card {
-    background-color: hsl(var(--card)) !important;
+
+  body {
+    @apply bg-background text-foreground transition-colors duration-300;
   }
-  
-  .text-card-foreground {
-    color: hsl(var(--card-foreground)) !important;
+   /* Ensure all text elements use the font variable */
+   body,h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, textarea, select, label {
+    font-family: var(--font-family);
   }
-  
-  .bg-popover {
-    background-color: hsl(var(--popover)) !important;
+}
+
+@layer components {
+  /* Theme-aware component styles */
+  .themed-button {
+    @apply bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-200;
+    border-radius: calc(var(--radius));
+    box-shadow: var(--shadow-sm);
   }
-  
-  .text-popover-foreground {
-    color: hsl(var(--popover-foreground)) !important;
+
+  .themed-button:hover {
+    box-shadow: var(--shadow-md);
   }
-  
-  .bg-primary {
-    background-color: hsl(var(--primary)) !important;
+
+  .themed-card {
+    @apply bg-card text-card-foreground border border-border;
+    border-radius: calc(var(--radius) * 1.5);
+    box-shadow: var(--shadow-md);
   }
-  
-  .text-primary {
-    color: hsl(var(--primary)) !important;
+
+  .themed-input {
+    @apply bg-background border-input text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:border-transparent;
+    border-radius: calc(var(--radius));
+    transition: var(--transition-all);
   }
-  
-  .border-primary {
-    border-color: hsl(var(--primary)) !important;
+
+  .themed-modal {
+    @apply bg-card text-card-foreground border border-border;
+    border-radius: calc(var(--radius) * 2);
+    box-shadow: var(--shadow-xl);
   }
-  
-  .ring-primary {
-    --tw-ring-color: hsl(var(--primary)) !important;
+
+  .themed-modal::backdrop {
+    background: var(--modal-backdrop);
   }
-  
-  .hover\:bg-primary:hover {
-    background-color: hsl(var(--primary)) !important;
+
+  .themed-dropdown {
+    background: var(--dropdown-background);
+    @apply text-foreground border border-border z-50;
+    border-radius: calc(var(--radius));
+    box-shadow: var(--shadow-lg);
   }
-  
-  .hover\:text-primary:hover {
-    color: hsl(var(--primary)) !important;
+
+  .themed-sidebar {
+    background: var(--sidebar-background);
+    color: var(--sidebar-foreground);
+    border-color: var(--sidebar-border);
   }
-  
-  .text-primary-foreground {
-    color: hsl(var(--primary-foreground)) !important;
+
+  .themed-table-header {
+    background: var(--table-header);
+    @apply text-foreground;
   }
-  
-  .bg-secondary {
-    background-color: hsl(var(--secondary)) !important;
+
+  .themed-code {
+    background: var(--code-background);
+    @apply text-foreground font-mono text-sm;
+    border-radius: calc(var(--radius) * 0.5);
+    padding: 0.25rem 0.5rem;
   }
-  
-  .text-secondary {
-    color: hsl(var(--secondary)) !important;
+
+  /* Brand gradient backgrounds */
+  .bg-gradient-primary {
+    background: var(--gradient-primary);
   }
-  
-  .border-secondary {
-    border-color: hsl(var(--secondary)) !important;
+
+  .bg-gradient-secondary {
+    background: var(--gradient-secondary);
   }
-  
-  .text-secondary-foreground {
-    color: hsl(var(--secondary-foreground)) !important;
+
+  .bg-gradient-brand {
+    background: var(--gradient-brand);
   }
-  
-  .bg-muted {
-    background-color: hsl(var(--muted)) !important;
+
+  /* Theme-aware shadows */
+  .shadow-themed-sm {
+    box-shadow: var(--shadow-sm);
   }
-  
-  .text-muted {
-    color: hsl(var(--muted)) !important;
+
+  .shadow-themed-md {
+    box-shadow: var(--shadow-md);
   }
-  
-  .text-muted-foreground {
-    color: hsl(var(--muted-foreground)) !important;
+
+  .shadow-themed-lg {
+    box-shadow: var(--shadow-lg);
   }
-  
-  .bg-accent {
-    background-color: hsl(var(--accent)) !important;
+
+  .shadow-themed-xl {
+    box-shadow: var(--shadow-xl);
   }
-  
-  .text-accent {
-    color: hsl(var(--accent)) !important;
+
+  /* Interactive elements */
+  .interactive-hover {
+    @apply transition-all duration-200 hover:scale-105;
+    transition: var(--transition-all);
   }
-  
-  .text-accent-foreground {
-    color: hsl(var(--accent-foreground)) !important;
+
+  .interactive-hover:hover {
+    box-shadow: var(--shadow-lg);
   }
-  
-  .bg-destructive {
-    background-color: hsl(var(--destructive)) !important;
+
+  /* Focus styles */
+  .focus-themed:focus {
+    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
   }
-  
-  .text-destructive {
-    color: hsl(var(--destructive)) !important;
-  }
-  
-  .text-destructive-foreground {
-    color: hsl(var(--destructive-foreground)) !important;
-  }
-  
-  .border-border {
-    border-color: hsl(var(--border)) !important;
-  }
-  
-  .border-input {
-    border-color: hsl(var(--input)) !important;
-  }
-  
-  .focus-ring {
-    outline: 2px solid hsl(var(--ring));
-    outline-offset: 2px;
-  }
-  
-  /* Font family utility */
-  .font-sans {
-    font-family: var(--font-family) !important;
-  }
-  
-  /* Border radius utilities */
-  .rounded-none {
-    border-radius: var(--radius-none) !important;
-  }
-  
-  .rounded-sm {
-    border-radius: var(--radius-sm) !important;
-  }
-  
-  .rounded {
-    border-radius: var(--radius-default) !important;
-  }
-  
-  .rounded-md {
-    border-radius: var(--radius-md) !important;
-  }
-  
-  .rounded-lg {
-    border-radius: var(--radius-lg) !important;
-  }
-  
-  .rounded-xl {
-    border-radius: var(--radius-xl) !important;
-  }
-  
-  .rounded-2xl {
-    border-radius: var(--radius-2xl) !important;
-  }
-  
-  .rounded-3xl {
-    border-radius: var(--radius-3xl) !important;
-  }
-  
-  .rounded-full {
-    border-radius: var(--radius-full) !important;
-  }
-  
-  /* Font size utilities */
-  .text-xs {
-    font-size: var(--font-size-xs) !important;
-  }
-  
-  .text-sm {
-    font-size: var(--font-size-sm) !important;
-  }
-  
-  .text-base {
-    font-size: var(--font-size-base) !important;
-  }
-  
-  .text-lg {
-    font-size: var(--font-size-lg) !important;
-  }
-  
-  .text-xl {
-    font-size: var(--font-size-xl) !important;
-  }
-  
-  .text-2xl {
-    font-size: var(--font-size-2xl) !important;
-  }
-  
-  .text-3xl {
-    font-size: var(--font-size-3xl) !important;
-  }
-  
-  .text-4xl {
-    font-size: var(--font-size-4xl) !important;
-  }
-  
-  .text-5xl {
-    font-size: var(--font-size-5xl) !important;
-  }
-  
-  /* Button styles */
-  .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-md);
-    font-weight: 500;
-    transition-property: color, background-color, border-color;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-    padding: 0.5rem 1rem;
-    font-family: var(--font-family);
+
+  /* Theme-specific border radius utilities */
+  .rounded-themed {
+    border-radius: calc(var(--radius));
   }
-  
-  .btn-primary {
-    background-color: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-  }
-  
-  .btn-primary:hover {
-    background-color: hsl(var(--primary) / 0.9);
-  }
-  
-  .btn-secondary {
-    background-color: hsl(var(--secondary));
-    color: hsl(var(--secondary-foreground));
-  }
-  
-  .btn-secondary:hover {
-    background-color: hsl(var(--secondary) / 0.9);
-  }
-  
-  .btn-accent {
-    background-color: hsl(var(--accent));
-    color: hsl(var(--accent-foreground));
-  }
-  
-  .btn-accent:hover {
-    background-color: hsl(var(--accent) / 0.9);
-  }
-  
-  .btn-destructive {
-    background-color: hsl(var(--destructive));
-    color: hsl(var(--destructive-foreground));
-  }
-  
-  .btn-destructive:hover {
-    background-color: hsl(var(--destructive) / 0.9);
-  }
-  
-  .btn-outline {
-    border: 1px solid hsl(var(--input));
-    background-color: transparent;
-    color: hsl(var(--foreground));
-  }
-  
-  .btn-outline:hover {
-    background-color: hsl(var(--accent));
-    color: hsl(var(--accent-foreground));
-  }
-  
-  /* Card styles */
-  .card {
-    background-color: hsl(var(--card));
-    color: hsl(var(--card-foreground));
-    border-radius: var(--radius-lg);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  }
-  
-  /* Form input styles */
-  .input {
-    display: block;
-    width: 100%;
-    padding: 0.5rem;
-    border-radius: var(--radius-md);
-    border: 1px solid hsl(var(--input));
-    background-color: transparent;
-    color: hsl(var(--foreground));
-    font-family: var(--font-family);
-    font-size: var(--font-size-base);
-  }
-  
-  .input:focus {
-    outline: 2px solid hsl(var(--ring));
-    outline-offset: 2px;
-  }
-  
-  /* Menu and navbar styles */
-  .menu {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    font-family: var(--font-family);
+
+  .rounded-themed-lg {
+    border-radius: calc(var(--radius) * 1.5);
   }
-  
-  .menu-item {
-    padding: 0.5rem 1rem;
-    border-radius: var(--radius-md);
-    color: hsl(var(--foreground));
-    transition-property: color, background-color;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  
-  .menu-item:hover {
-    background-color: hsl(var(--accent));
-    color: hsl(var(--accent-foreground));
-  }
-  
-  .menu-item.active {
-    background-color: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-  }
-  
-  /* Navbar styles */
-  .navbar {
-    background-color: hsl(var(--background));
-    border-bottom: 1px solid hsl(var(--border));
-    padding: 0.75rem 1rem;
-    display: flex;
-    align-items: center;
-    font-family: var(--font-family);
+
+  .rounded-themed-xl {
+    border-radius: calc(var(--radius) * 2);
   }
-  
-  /* Sidebar styles */
-  .sidebar {
-    background-color: hsl(var(--card));
-    border-right: 1px solid hsl(var(--border));
-    font-family: var(--font-family);
+
+  /* Typography */
+  .text-brand-primary {
+    color: hsl(var(--brand-primary));
+  }
+
+  .text-brand-secondary {
+    color: hsl(var(--brand-secondary));
+  }
+
+  .text-brand-accent {
+    color: hsl(var(--brand-accent));
+  }
+
+  /* Semantic colors */
+  .text-success {
+    color: hsl(var(--success));
+  }
+
+  .text-warning {
+    color: hsl(var(--warning));
+  }
+
+  .text-error {
+    color: hsl(var(--error));
+  }
+
+  .text-info {
+    color: hsl(var(--info));
+  }
+
+  .bg-success {
+    background-color: hsl(var(--success));
+  }
+
+  .bg-warning {
+    background-color: hsl(var(--warning));
+  }
+
+  .bg-error {
+    background-color: hsl(var(--error));
+  }
+
+  .bg-info {
+    background-color: hsl(var(--info));
   }
-  
-  /* Utility for transitions */
-  .transition-colors {
-    transition-property: color, background-color, border-color;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  
-  .transition-all {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  } 
+}