@pattern-stack/frontend-patterns 0.1.3 → 0.2.0-alpha.0

package/dist/frontend-patterns.css

@@ -17,553 +17,553 @@
      PALETTE 1: OCEAN DEPTH - Deep blues with vibrant accents
      ================================================================== */
   .palette-ocean-depth {
-  /* Base semantic colors */
-  --background: 220 26% 14%;      /* Deep navy background */
-  --foreground: 195 100% 95%;     /* Crisp white-blue */
-  --card: 220 24% 16%;            /* Slightly lighter navy */
-  --card-foreground: 195 100% 95%;
-  --popover: 220 24% 16%;
-  --popover-foreground: 195 100% 95%;
-  
-  --primary: 195 100% 65%;        /* Bright cyan */
-  --primary-foreground: 220 26% 14%;
-  --primary-hover: 195 100% 70%;
-  --primary-active: 195 100% 60%;
-  --primary-disabled: 195 30% 40%;
-  
-  --secondary: 220 20% 25%;       /* Muted blue-gray */
-  --secondary-foreground: 195 80% 85%;
-  --secondary-hover: 220 20% 30%;
-  --secondary-active: 220 20% 20%;
-  
-  --muted: 220 18% 20%;           /* Dark blue-gray */
-  --muted-foreground: 195 40% 70%;
-  
-  --accent: 280 100% 70%;         /* Electric purple accent */
-  --accent-foreground: 220 26% 14%;
-  
-  --destructive: 0 85% 65%;       /* Bright coral red */
-  --destructive-foreground: 220 26% 14%;
-  --destructive-hover: 0 85% 70%;
-  --destructive-active: 0 85% 60%;
-  
-  --border: 220 20% 22%;
-  --input: 220 20% 22%;
-  --ring: 195 100% 65%;
-  
-  /* Data categorization - Ocean inspired */
-  --category-1: 195 100% 65%;     /* Bright cyan */
-  --category-2: 175 70% 55%;      /* Turquoise */
-  --category-3: 25 90% 65%;       /* Coral orange */
-  --category-4: 280 80% 70%;      /* Electric purple */
-  --category-5: 320 75% 65%;      /* Pink coral */
-  --category-6: 160 60% 50%;      /* Sea green */
-  --category-7: 45 100% 70%;      /* Golden sand */
-  --category-8: 340 85% 65%;      /* Sunset pink */
-  
-  /* Status colors - High contrast for depth */
-  --status-success: 160 70% 55%;  /* Sea green */
-  --status-warning: 45 100% 70%;  /* Golden sand */
-  --status-error: 0 85% 65%;      /* Coral red */
-  --status-info: 195 100% 65%;    /* Bright cyan */
-  --status-neutral: 195 30% 60%;  /* Muted blue */
-  
-  /* Surface colors */
-  --surface: 220 24% 16%;
-  --overlay: 220 26% 14% / 0.8;
-  --backdrop: 0 0% 0% / 0.6;
-}
+    /* Base semantic colors */
+    --background: 220 26% 14%; /* Deep navy background */
+    --foreground: 195 100% 95%; /* Crisp white-blue */
+    --card: 220 24% 16%; /* Slightly lighter navy */
+    --card-foreground: 195 100% 95%;
+    --popover: 220 24% 16%;
+    --popover-foreground: 195 100% 95%;
 
-/* ==================================================================
+    --primary: 195 100% 65%; /* Bright cyan */
+    --primary-foreground: 220 26% 14%;
+    --primary-hover: 195 100% 70%;
+    --primary-active: 195 100% 60%;
+    --primary-disabled: 195 30% 40%;
+
+    --secondary: 220 20% 25%; /* Muted blue-gray */
+    --secondary-foreground: 195 80% 85%;
+    --secondary-hover: 220 20% 30%;
+    --secondary-active: 220 20% 20%;
+
+    --muted: 220 18% 20%; /* Dark blue-gray */
+    --muted-foreground: 195 40% 70%;
+
+    --accent: 280 100% 70%; /* Electric purple accent */
+    --accent-foreground: 220 26% 14%;
+
+    --destructive: 0 85% 65%; /* Bright coral red */
+    --destructive-foreground: 220 26% 14%;
+    --destructive-hover: 0 85% 70%;
+    --destructive-active: 0 85% 60%;
+
+    --border: 220 20% 22%;
+    --input: 220 20% 22%;
+    --ring: 195 100% 65%;
+
+    /* Data categorization - Ocean inspired */
+    --category-1: 195 100% 65%; /* Bright cyan */
+    --category-2: 175 70% 55%; /* Turquoise */
+    --category-3: 25 90% 65%; /* Coral orange */
+    --category-4: 280 80% 70%; /* Electric purple */
+    --category-5: 320 75% 65%; /* Pink coral */
+    --category-6: 160 60% 50%; /* Sea green */
+    --category-7: 45 100% 70%; /* Golden sand */
+    --category-8: 340 85% 65%; /* Sunset pink */
+
+    /* Status colors - High contrast for depth */
+    --status-success: 160 70% 55%; /* Sea green */
+    --status-warning: 45 100% 70%; /* Golden sand */
+    --status-error: 0 85% 65%; /* Coral red */
+    --status-info: 195 100% 65%; /* Bright cyan */
+    --status-neutral: 195 30% 60%; /* Muted blue */
+
+    /* Surface colors */
+    --surface: 220 24% 16%;
+    --overlay: 220 26% 14% / 0.8;
+    --backdrop: 0 0% 0% / 0.6;
+  }
+
+  /* ==================================================================
    PALETTE 2: NEON CYBER - Vibrant cyberpunk aesthetics
    ================================================================== */
-.palette-neon-cyber {
-  /* Base semantic colors */
-  --background: 260 15% 8%;       /* Very dark purple */
-  --foreground: 120 100% 95%;     /* Bright green-white */
-  --card: 260 15% 10%;            /* Slightly lighter dark */
-  --card-foreground: 120 100% 95%;
-  --popover: 260 15% 10%;
-  --popover-foreground: 120 100% 95%;
-  
-  --primary: 320 100% 70%;        /* Hot pink/magenta */
-  --primary-foreground: 260 15% 8%;
-  --primary-hover: 320 100% 75%;
-  --primary-active: 320 100% 65%;
-  --primary-disabled: 320 30% 40%;
-  
-  --secondary: 260 20% 18%;       /* Dark purple-gray */
-  --secondary-foreground: 120 80% 85%;
-  --secondary-hover: 260 20% 22%;
-  --secondary-active: 260 20% 15%;
-  
-  --muted: 260 15% 15%;           /* Very dark purple */
-  --muted-foreground: 120 40% 70%;
-  
-  --accent: 180 100% 70%;         /* Electric cyan */
-  --accent-foreground: 260 15% 8%;
-  
-  --destructive: 0 100% 70%;      /* Bright red */
-  --destructive-foreground: 260 15% 8%;
-  --destructive-hover: 0 100% 75%;
-  --destructive-active: 0 100% 65%;
-  
-  --border: 260 20% 20%;
-  --input: 260 20% 20%;
-  --ring: 320 100% 70%;
-  
-  /* Data categorization - Cyberpunk neon */
-  --category-1: 320 100% 70%;     /* Hot pink */
-  --category-2: 180 100% 70%;     /* Electric cyan */
-  --category-3: 120 100% 65%;     /* Neon green */
-  --category-4: 280 100% 75%;     /* Electric purple */
-  --category-5: 60 100% 70%;      /* Electric yellow */
-  --category-6: 200 100% 65%;     /* Sky blue */
-  --category-7: 30 100% 70%;      /* Electric orange */
-  --category-8: 0 100% 70%;       /* Neon red */
-  
-  /* Status colors - Neon bright */
-  --status-success: 120 100% 65%; /* Neon green */
-  --status-warning: 60 100% 70%;  /* Electric yellow */
-  --status-error: 0 100% 70%;     /* Neon red */
-  --status-info: 180 100% 70%;    /* Electric cyan */
-  --status-neutral: 260 40% 60%;  /* Muted purple */
-  
-  /* Surface colors */
-  --surface: 260 15% 10%;
-  --overlay: 260 15% 8% / 0.9;
-  --backdrop: 0 0% 0% / 0.8;
-}
+  .palette-neon-cyber {
+    /* Base semantic colors */
+    --background: 260 15% 8%; /* Very dark purple */
+    --foreground: 120 100% 95%; /* Bright green-white */
+    --card: 260 15% 10%; /* Slightly lighter dark */
+    --card-foreground: 120 100% 95%;
+    --popover: 260 15% 10%;
+    --popover-foreground: 120 100% 95%;
 
-/* ==================================================================
+    --primary: 320 100% 70%; /* Hot pink/magenta */
+    --primary-foreground: 260 15% 8%;
+    --primary-hover: 320 100% 75%;
+    --primary-active: 320 100% 65%;
+    --primary-disabled: 320 30% 40%;
+
+    --secondary: 260 20% 18%; /* Dark purple-gray */
+    --secondary-foreground: 120 80% 85%;
+    --secondary-hover: 260 20% 22%;
+    --secondary-active: 260 20% 15%;
+
+    --muted: 260 15% 15%; /* Very dark purple */
+    --muted-foreground: 120 40% 70%;
+
+    --accent: 180 100% 70%; /* Electric cyan */
+    --accent-foreground: 260 15% 8%;
+
+    --destructive: 0 100% 70%; /* Bright red */
+    --destructive-foreground: 260 15% 8%;
+    --destructive-hover: 0 100% 75%;
+    --destructive-active: 0 100% 65%;
+
+    --border: 260 20% 20%;
+    --input: 260 20% 20%;
+    --ring: 320 100% 70%;
+
+    /* Data categorization - Cyberpunk neon */
+    --category-1: 320 100% 70%; /* Hot pink */
+    --category-2: 180 100% 70%; /* Electric cyan */
+    --category-3: 120 100% 65%; /* Neon green */
+    --category-4: 280 100% 75%; /* Electric purple */
+    --category-5: 60 100% 70%; /* Electric yellow */
+    --category-6: 200 100% 65%; /* Sky blue */
+    --category-7: 30 100% 70%; /* Electric orange */
+    --category-8: 0 100% 70%; /* Neon red */
+
+    /* Status colors - Neon bright */
+    --status-success: 120 100% 65%; /* Neon green */
+    --status-warning: 60 100% 70%; /* Electric yellow */
+    --status-error: 0 100% 70%; /* Neon red */
+    --status-info: 180 100% 70%; /* Electric cyan */
+    --status-neutral: 260 40% 60%; /* Muted purple */
+
+    /* Surface colors */
+    --surface: 260 15% 10%;
+    --overlay: 260 15% 8% / 0.9;
+    --backdrop: 0 0% 0% / 0.8;
+  }
+
+  /* ==================================================================
    PALETTE 3: EARTH TONES - Warm, organic, professional
    ================================================================== */
-.palette-earth-tones {
-  /* Base semantic colors */
-  --background: 35 25% 96%;       /* Warm cream */
-  --foreground: 25 30% 15%;       /* Rich brown */
-  --card: 35 40% 98%;             /* Pure warm white */
-  --card-foreground: 25 30% 15%;
-  --popover: 35 40% 98%;
-  --popover-foreground: 25 30% 15%;
-  
-  --primary: 25 70% 45%;          /* Rich terracotta */
-  --primary-foreground: 35 40% 98%;
-  --primary-hover: 25 70% 50%;
-  --primary-active: 25 70% 40%;
-  --primary-disabled: 25 30% 60%;
-  
-  --secondary: 35 20% 88%;        /* Warm light gray */
-  --secondary-foreground: 25 30% 15%;
-  --secondary-hover: 35 20% 85%;
-  --secondary-active: 35 20% 90%;
-  
-  --muted: 35 15% 90%;            /* Soft gray */
-  --muted-foreground: 25 20% 45%;
-  
-  --accent: 200 60% 55%;          /* Sage blue */
-  --accent-foreground: 35 40% 98%;
-  
-  --destructive: 5 75% 55%;       /* Warm red */
-  --destructive-foreground: 35 40% 98%;
-  --destructive-hover: 5 75% 60%;
-  --destructive-active: 5 75% 50%;
-  
-  --border: 35 20% 85%;
-  --input: 35 20% 85%;
-  --ring: 25 70% 45%;
-  
-  /* Data categorization - Natural earth palette */
-  --category-1: 25 70% 45%;       /* Terracotta */
-  --category-2: 160 40% 40%;      /* Forest green */
-  --category-3: 35 80% 55%;       /* Golden amber */
-  --category-4: 280 30% 55%;      /* Sage purple */
-  --category-5: 340 50% 50%;      /* Dusty rose */
-  --category-6: 80 50% 45%;       /* Olive green */
-  --category-7: 45 70% 60%;       /* Warm gold */
-  --category-8: 15 60% 50%;       /* Clay red */
-  
-  /* Status colors - Earthy variants */
-  --status-success: 120 40% 40%;  /* Natural green */
-  --status-warning: 45 70% 55%;   /* Amber */
-  --status-error: 5 65% 50%;      /* Warm red */
-  --status-info: 200 50% 50%;     /* Sage blue */
-  --status-neutral: 35 15% 50%;   /* Warm gray */
-  
-  /* Surface colors */
-  --surface: 35 40% 98%;
-  --overlay: 25 30% 15% / 0.4;
-  --backdrop: 25 20% 20% / 0.3;
-}
+  .palette-earth-tones {
+    /* Base semantic colors */
+    --background: 35 25% 96%; /* Warm cream */
+    --foreground: 25 30% 15%; /* Rich brown */
+    --card: 35 40% 98%; /* Pure warm white */
+    --card-foreground: 25 30% 15%;
+    --popover: 35 40% 98%;
+    --popover-foreground: 25 30% 15%;
 
-/* Dark mode variant for Earth Tones */
-.palette-earth-tones.dark {
-  --background: 25 20% 12%;       /* Dark brown */
-  --foreground: 35 40% 95%;       /* Warm white */
-  --card: 25 18% 14%;
-  --card-foreground: 35 40% 95%;
-  --popover: 25 18% 14%;
-  --popover-foreground: 35 40% 95%;
-  
-  /* Adjust other colors for dark mode... */
-  --category-1: 25 60% 65%;       /* Lighter terracotta */
-  --category-2: 160 50% 60%;      /* Lighter forest green */
-  --category-3: 35 70% 70%;       /* Lighter amber */
-  --category-4: 280 40% 70%;      /* Lighter sage purple */
-  --category-5: 340 60% 65%;      /* Lighter dusty rose */
-  --category-6: 80 60% 60%;       /* Lighter olive */
-  --category-7: 45 80% 75%;       /* Lighter gold */
-  --category-8: 15 70% 65%;       /* Lighter clay */
-}
+    --primary: 25 70% 45%; /* Rich terracotta */
+    --primary-foreground: 35 40% 98%;
+    --primary-hover: 25 70% 50%;
+    --primary-active: 25 70% 40%;
+    --primary-disabled: 25 30% 60%;
 
-/* ==================================================================
+    --secondary: 35 20% 88%; /* Warm light gray */
+    --secondary-foreground: 25 30% 15%;
+    --secondary-hover: 35 20% 85%;
+    --secondary-active: 35 20% 90%;
+
+    --muted: 35 15% 90%; /* Soft gray */
+    --muted-foreground: 25 20% 45%;
+
+    --accent: 200 60% 55%; /* Sage blue */
+    --accent-foreground: 35 40% 98%;
+
+    --destructive: 5 75% 55%; /* Warm red */
+    --destructive-foreground: 35 40% 98%;
+    --destructive-hover: 5 75% 60%;
+    --destructive-active: 5 75% 50%;
+
+    --border: 35 20% 85%;
+    --input: 35 20% 85%;
+    --ring: 25 70% 45%;
+
+    /* Data categorization - Natural earth palette */
+    --category-1: 25 70% 45%; /* Terracotta */
+    --category-2: 160 40% 40%; /* Forest green */
+    --category-3: 35 80% 55%; /* Golden amber */
+    --category-4: 280 30% 55%; /* Sage purple */
+    --category-5: 340 50% 50%; /* Dusty rose */
+    --category-6: 80 50% 45%; /* Olive green */
+    --category-7: 45 70% 60%; /* Warm gold */
+    --category-8: 15 60% 50%; /* Clay red */
+
+    /* Status colors - Earthy variants */
+    --status-success: 120 40% 40%; /* Natural green */
+    --status-warning: 45 70% 55%; /* Amber */
+    --status-error: 5 65% 50%; /* Warm red */
+    --status-info: 200 50% 50%; /* Sage blue */
+    --status-neutral: 35 15% 50%; /* Warm gray */
+
+    /* Surface colors */
+    --surface: 35 40% 98%;
+    --overlay: 25 30% 15% / 0.4;
+    --backdrop: 25 20% 20% / 0.3;
+  }
+
+  /* Dark mode variant for Earth Tones */
+  .palette-earth-tones.dark {
+    --background: 25 20% 12%; /* Dark brown */
+    --foreground: 35 40% 95%; /* Warm white */
+    --card: 25 18% 14%;
+    --card-foreground: 35 40% 95%;
+    --popover: 25 18% 14%;
+    --popover-foreground: 35 40% 95%;
+
+    /* Adjust other colors for dark mode... */
+    --category-1: 25 60% 65%; /* Lighter terracotta */
+    --category-2: 160 50% 60%; /* Lighter forest green */
+    --category-3: 35 70% 70%; /* Lighter amber */
+    --category-4: 280 40% 70%; /* Lighter sage purple */
+    --category-5: 340 60% 65%; /* Lighter dusty rose */
+    --category-6: 80 60% 60%; /* Lighter olive */
+    --category-7: 45 80% 75%; /* Lighter gold */
+    --category-8: 15 70% 65%; /* Lighter clay */
+  }
+
+  /* ==================================================================
    PALETTE 4: AURORA BOREALIS - Mystical greens and blues
    ================================================================== */
-.palette-aurora {
-  /* Base semantic colors */
-  --background: 220 30% 8%;       /* Deep night blue */
-  --foreground: 160 80% 92%;      /* Aurora white-green */
-  --card: 220 25% 10%;
-  --card-foreground: 160 80% 92%;
-  --popover: 220 25% 10%;
-  --popover-foreground: 160 80% 92%;
-  
-  --primary: 160 80% 65%;         /* Aurora green */
-  --primary-foreground: 220 30% 8%;
-  --primary-hover: 160 80% 70%;
-  --primary-active: 160 80% 60%;
-  --primary-disabled: 160 30% 40%;
-  
-  --secondary: 220 20% 20%;       /* Dark blue-gray */
-  --secondary-foreground: 160 60% 85%;
-  --secondary-hover: 220 20% 25%;
-  --secondary-active: 220 20% 15%;
-  
-  --muted: 220 15% 18%;
-  --muted-foreground: 160 40% 70%;
-  
-  --accent: 280 90% 75%;          /* Purple aurora */
-  --accent-foreground: 220 30% 8%;
-  
-  --destructive: 350 85% 65%;     /* Aurora pink-red */
-  --destructive-foreground: 220 30% 8%;
-  --destructive-hover: 350 85% 70%;
-  --destructive-active: 350 85% 60%;
-  
-  --border: 220 20% 22%;
-  --input: 220 20% 22%;
-  --ring: 160 80% 65%;
-  
-  /* Data categorization - Aurora inspired */
-  --category-1: 160 80% 65%;      /* Primary aurora green */
-  --category-2: 180 70% 60%;      /* Cyan aurora */
-  --category-3: 200 85% 70%;      /* Blue aurora */
-  --category-4: 280 85% 75%;      /* Purple aurora */
-  --category-5: 320 80% 70%;      /* Pink aurora */
-  --category-6: 140 70% 55%;      /* Deep green aurora */
-  --category-7: 60 90% 75%;       /* Yellow aurora */
-  --category-8: 350 85% 65%;      /* Red aurora */
-  
-  /* Status colors - Aurora variants */
-  --status-success: 160 80% 65%;  /* Aurora green */
-  --status-warning: 60 90% 75%;   /* Yellow aurora */
-  --status-error: 350 85% 65%;    /* Aurora pink-red */
-  --status-info: 200 85% 70%;     /* Blue aurora */
-  --status-neutral: 220 40% 60%;  /* Muted blue */
-  
-  /* Surface colors */
-  --surface: 220 25% 10%;
-  --overlay: 220 30% 8% / 0.85;
-  --backdrop: 0 0% 0% / 0.7;
-}
+  .palette-aurora {
+    /* Base semantic colors */
+    --background: 220 30% 8%; /* Deep night blue */
+    --foreground: 160 80% 92%; /* Aurora white-green */
+    --card: 220 25% 10%;
+    --card-foreground: 160 80% 92%;
+    --popover: 220 25% 10%;
+    --popover-foreground: 160 80% 92%;
 
-/* ==================================================================
+    --primary: 160 80% 65%; /* Aurora green */
+    --primary-foreground: 220 30% 8%;
+    --primary-hover: 160 80% 70%;
+    --primary-active: 160 80% 60%;
+    --primary-disabled: 160 30% 40%;
+
+    --secondary: 220 20% 20%; /* Dark blue-gray */
+    --secondary-foreground: 160 60% 85%;
+    --secondary-hover: 220 20% 25%;
+    --secondary-active: 220 20% 15%;
+
+    --muted: 220 15% 18%;
+    --muted-foreground: 160 40% 70%;
+
+    --accent: 280 90% 75%; /* Purple aurora */
+    --accent-foreground: 220 30% 8%;
+
+    --destructive: 350 85% 65%; /* Aurora pink-red */
+    --destructive-foreground: 220 30% 8%;
+    --destructive-hover: 350 85% 70%;
+    --destructive-active: 350 85% 60%;
+
+    --border: 220 20% 22%;
+    --input: 220 20% 22%;
+    --ring: 160 80% 65%;
+
+    /* Data categorization - Aurora inspired */
+    --category-1: 160 80% 65%; /* Primary aurora green */
+    --category-2: 180 70% 60%; /* Cyan aurora */
+    --category-3: 200 85% 70%; /* Blue aurora */
+    --category-4: 280 85% 75%; /* Purple aurora */
+    --category-5: 320 80% 70%; /* Pink aurora */
+    --category-6: 140 70% 55%; /* Deep green aurora */
+    --category-7: 60 90% 75%; /* Yellow aurora */
+    --category-8: 350 85% 65%; /* Red aurora */
+
+    /* Status colors - Aurora variants */
+    --status-success: 160 80% 65%; /* Aurora green */
+    --status-warning: 60 90% 75%; /* Yellow aurora */
+    --status-error: 350 85% 65%; /* Aurora pink-red */
+    --status-info: 200 85% 70%; /* Blue aurora */
+    --status-neutral: 220 40% 60%; /* Muted blue */
+
+    /* Surface colors */
+    --surface: 220 25% 10%;
+    --overlay: 220 30% 8% / 0.85;
+    --backdrop: 0 0% 0% / 0.7;
+  }
+
+  /* ==================================================================
    PALETTE 5: SUNSET GRADIENT - Warm oranges, pinks, and purples
    ================================================================== */
-.palette-sunset {
-  /* Base semantic colors */
-  --background: 15 30% 95%;       /* Warm light */
-  --foreground: 280 40% 15%;      /* Deep purple */
-  --card: 15 50% 98%;
-  --card-foreground: 280 40% 15%;
-  --popover: 15 50% 98%;
-  --popover-foreground: 280 40% 15%;
-  
-  --primary: 25 85% 60%;          /* Sunset orange */
-  --primary-foreground: 15 50% 98%;
-  --primary-hover: 25 85% 65%;
-  --primary-active: 25 85% 55%;
-  --primary-disabled: 25 40% 60%;
-  
-  --secondary: 15 25% 88%;        /* Warm light gray */
-  --secondary-foreground: 280 40% 15%;
-  --secondary-hover: 15 25% 85%;
-  --secondary-active: 15 25% 90%;
-  
-  --muted: 15 20% 90%;
-  --muted-foreground: 280 25% 45%;
-  
-  --accent: 320 85% 65%;          /* Sunset pink */
-  --accent-foreground: 15 50% 98%;
-  
-  --destructive: 5 90% 60%;       /* Bright sunset red */
-  --destructive-foreground: 15 50% 98%;
-  --destructive-hover: 5 90% 65%;
-  --destructive-active: 5 90% 55%;
-  
-  --border: 15 25% 85%;
-  --input: 15 25% 85%;
-  --ring: 25 85% 60%;
-  
-  /* Data categorization - Sunset spectrum */
-  --category-1: 25 85% 60%;       /* Sunset orange */
-  --category-2: 340 85% 65%;      /* Sunset pink */
-  --category-3: 320 80% 70%;      /* Magenta sunset */
-  --category-4: 280 85% 65%;      /* Purple sunset */
-  --category-5: 45 90% 65%;       /* Golden sunset */
-  --category-6: 15 80% 55%;       /* Deep orange */
-  --category-7: 60 85% 70%;       /* Yellow sunset */
-  --category-8: 300 80% 65%;      /* Violet sunset */
-  
-  /* Status colors - Sunset themed */
-  --status-success: 120 50% 50%;  /* Balanced green */
-  --status-warning: 45 90% 65%;   /* Golden sunset */
-  --status-error: 5 90% 60%;      /* Sunset red */
-  --status-info: 280 85% 65%;     /* Purple sunset */
-  --status-neutral: 15 25% 50%;   /* Warm gray */
-  
-  /* Surface colors */
-  --surface: 15 50% 98%;
-  --overlay: 280 40% 15% / 0.4;
-  --backdrop: 280 20% 20% / 0.3;
-}
+  .palette-sunset {
+    /* Base semantic colors */
+    --background: 15 30% 95%; /* Warm light */
+    --foreground: 280 40% 15%; /* Deep purple */
+    --card: 15 50% 98%;
+    --card-foreground: 280 40% 15%;
+    --popover: 15 50% 98%;
+    --popover-foreground: 280 40% 15%;
 
-/* ==================================================================
+    --primary: 25 85% 60%; /* Sunset orange */
+    --primary-foreground: 15 50% 98%;
+    --primary-hover: 25 85% 65%;
+    --primary-active: 25 85% 55%;
+    --primary-disabled: 25 40% 60%;
+
+    --secondary: 15 25% 88%; /* Warm light gray */
+    --secondary-foreground: 280 40% 15%;
+    --secondary-hover: 15 25% 85%;
+    --secondary-active: 15 25% 90%;
+
+    --muted: 15 20% 90%;
+    --muted-foreground: 280 25% 45%;
+
+    --accent: 320 85% 65%; /* Sunset pink */
+    --accent-foreground: 15 50% 98%;
+
+    --destructive: 5 90% 60%; /* Bright sunset red */
+    --destructive-foreground: 15 50% 98%;
+    --destructive-hover: 5 90% 65%;
+    --destructive-active: 5 90% 55%;
+
+    --border: 15 25% 85%;
+    --input: 15 25% 85%;
+    --ring: 25 85% 60%;
+
+    /* Data categorization - Sunset spectrum */
+    --category-1: 25 85% 60%; /* Sunset orange */
+    --category-2: 340 85% 65%; /* Sunset pink */
+    --category-3: 320 80% 70%; /* Magenta sunset */
+    --category-4: 280 85% 65%; /* Purple sunset */
+    --category-5: 45 90% 65%; /* Golden sunset */
+    --category-6: 15 80% 55%; /* Deep orange */
+    --category-7: 60 85% 70%; /* Yellow sunset */
+    --category-8: 300 80% 65%; /* Violet sunset */
+
+    /* Status colors - Sunset themed */
+    --status-success: 120 50% 50%; /* Balanced green */
+    --status-warning: 45 90% 65%; /* Golden sunset */
+    --status-error: 5 90% 60%; /* Sunset red */
+    --status-info: 280 85% 65%; /* Purple sunset */
+    --status-neutral: 15 25% 50%; /* Warm gray */
+
+    /* Surface colors */
+    --surface: 15 50% 98%;
+    --overlay: 280 40% 15% / 0.4;
+    --backdrop: 280 20% 20% / 0.3;
+  }
+
+  /* ==================================================================
    PALETTE 6: MONOCHROME ELITE - Sophisticated grayscale with accent
    ================================================================== */
-.palette-monochrome {
-  /* Base semantic colors */
-  --background: 0 0% 98%;         /* Pure light gray */
-  --foreground: 0 0% 8%;          /* Deep black */
-  --card: 0 0% 100%;              /* Pure white */
-  --card-foreground: 0 0% 8%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 8%;
-  
-  --primary: 240 100% 50%;        /* Pure blue accent */
-  --primary-foreground: 0 0% 100%;
-  --primary-hover: 240 100% 45%;
-  --primary-active: 240 100% 55%;
-  --primary-disabled: 240 30% 60%;
-  
-  --secondary: 0 0% 90%;          /* Light gray */
-  --secondary-foreground: 0 0% 8%;
-  --secondary-hover: 0 0% 85%;
-  --secondary-active: 0 0% 95%;
-  
-  --muted: 0 0% 92%;
-  --muted-foreground: 0 0% 40%;
-  
-  --accent: 240 100% 50%;         /* Blue accent */
-  --accent-foreground: 0 0% 100%;
-  
-  --destructive: 0 100% 50%;      /* Pure red */
-  --destructive-foreground: 0 0% 100%;
-  --destructive-hover: 0 100% 45%;
-  --destructive-active: 0 100% 55%;
-  
-  --border: 0 0% 85%;
-  --input: 0 0% 85%;
-  --ring: 240 100% 50%;
-  
-  /* Data categorization - Sophisticated grays with color accents */
-  --category-1: 240 100% 50%;     /* Blue */
-  --category-2: 0 0% 20%;         /* Dark gray */
-  --category-3: 0 0% 35%;         /* Medium-dark gray */
-  --category-4: 0 0% 50%;         /* Medium gray */
-  --category-5: 0 0% 65%;         /* Medium-light gray */
-  --category-6: 180 100% 40%;     /* Teal accent */
-  --category-7: 60 100% 45%;      /* Yellow accent */
-  --category-8: 300 100% 50%;     /* Magenta accent */
-  
-  /* Status colors - High contrast */
-  --status-success: 120 100% 35%; /* Dark green */
-  --status-warning: 45 100% 45%;  /* Orange */
-  --status-error: 0 100% 50%;     /* Pure red */
-  --status-info: 240 100% 50%;    /* Blue */
-  --status-neutral: 0 0% 50%;     /* Medium gray */
-  
-  /* Surface colors */
-  --surface: 0 0% 100%;
-  --overlay: 0 0% 0% / 0.4;
-  --backdrop: 0 0% 0% / 0.2;
-}
+  .palette-monochrome {
+    /* Base semantic colors */
+    --background: 0 0% 98%; /* Pure light gray */
+    --foreground: 0 0% 8%; /* Deep black */
+    --card: 0 0% 100%; /* Pure white */
+    --card-foreground: 0 0% 8%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 8%;
 
-/* Dark mode for monochrome */
-.palette-monochrome.dark {
-  --background: 0 0% 8%;          /* Deep black */
-  --foreground: 0 0% 95%;         /* Light gray */
-  --card: 0 0% 10%;
-  --card-foreground: 0 0% 95%;
-  --popover: 0 0% 10%;
-  --popover-foreground: 0 0% 95%;
-  
-  /* Invert the grayscale categories */
-  --category-2: 0 0% 80%;         /* Light gray */
-  --category-3: 0 0% 65%;         /* Medium-light gray */
-  --category-4: 0 0% 50%;         /* Medium gray */
-  --category-5: 0 0% 35%;         /* Medium-dark gray */
-  
-  --border: 0 0% 20%;
-  --input: 0 0% 20%;
-  --surface: 0 0% 10%;
-}
+    --primary: 240 100% 50%; /* Pure blue accent */
+    --primary-foreground: 0 0% 100%;
+    --primary-hover: 240 100% 45%;
+    --primary-active: 240 100% 55%;
+    --primary-disabled: 240 30% 60%;
 
-/* ==================================================================
+    --secondary: 0 0% 90%; /* Light gray */
+    --secondary-foreground: 0 0% 8%;
+    --secondary-hover: 0 0% 85%;
+    --secondary-active: 0 0% 95%;
+
+    --muted: 0 0% 92%;
+    --muted-foreground: 0 0% 40%;
+
+    --accent: 240 100% 50%; /* Blue accent */
+    --accent-foreground: 0 0% 100%;
+
+    --destructive: 0 100% 50%; /* Pure red */
+    --destructive-foreground: 0 0% 100%;
+    --destructive-hover: 0 100% 45%;
+    --destructive-active: 0 100% 55%;
+
+    --border: 0 0% 85%;
+    --input: 0 0% 85%;
+    --ring: 240 100% 50%;
+
+    /* Data categorization - Sophisticated grays with color accents */
+    --category-1: 240 100% 50%; /* Blue */
+    --category-2: 0 0% 20%; /* Dark gray */
+    --category-3: 0 0% 35%; /* Medium-dark gray */
+    --category-4: 0 0% 50%; /* Medium gray */
+    --category-5: 0 0% 65%; /* Medium-light gray */
+    --category-6: 180 100% 40%; /* Teal accent */
+    --category-7: 60 100% 45%; /* Yellow accent */
+    --category-8: 300 100% 50%; /* Magenta accent */
+
+    /* Status colors - High contrast */
+    --status-success: 120 100% 35%; /* Dark green */
+    --status-warning: 45 100% 45%; /* Orange */
+    --status-error: 0 100% 50%; /* Pure red */
+    --status-info: 240 100% 50%; /* Blue */
+    --status-neutral: 0 0% 50%; /* Medium gray */
+
+    /* Surface colors */
+    --surface: 0 0% 100%;
+    --overlay: 0 0% 0% / 0.4;
+    --backdrop: 0 0% 0% / 0.2;
+  }
+
+  /* Dark mode for monochrome */
+  .palette-monochrome.dark {
+    --background: 0 0% 8%; /* Deep black */
+    --foreground: 0 0% 95%; /* Light gray */
+    --card: 0 0% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 10%;
+    --popover-foreground: 0 0% 95%;
+
+    /* Invert the grayscale categories */
+    --category-2: 0 0% 80%; /* Light gray */
+    --category-3: 0 0% 65%; /* Medium-light gray */
+    --category-4: 0 0% 50%; /* Medium gray */
+    --category-5: 0 0% 35%; /* Medium-dark gray */
+
+    --border: 0 0% 20%;
+    --input: 0 0% 20%;
+    --surface: 0 0% 10%;
+  }
+
+  /* ==================================================================
    PALETTE 7: CORPORATE ELITE - Executive boardroom sophistication
    ================================================================== */
-.palette-corporate-elite {
-  /* Base semantic colors */
-  --background: 220 15% 97%;      /* Clean light gray */
-  --foreground: 224 25% 12%;      /* Deep navy text */
-  --card: 0 0% 100%;              /* Pure white cards */
-  --card-foreground: 224 25% 12%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 224 25% 12%;
-  
-  --primary: 224 65% 25%;         /* Deep navy blue */
-  --primary-foreground: 0 0% 100%;
-  --primary-hover: 224 65% 20%;
-  --primary-active: 224 65% 30%;
-  --primary-disabled: 224 25% 50%;
-  
-  --secondary: 220 10% 88%;       /* Sophisticated light gray */
-  --secondary-foreground: 224 25% 12%;
-  --secondary-hover: 220 10% 85%;
-  --secondary-active: 220 10% 90%;
-  
-  --muted: 220 8% 92%;            /* Very light warm gray */
-  --muted-foreground: 224 15% 45%;
-  
-  --accent: 45 85% 55%;           /* Sophisticated gold accent */
-  --accent-foreground: 224 25% 12%;
-  
-  --destructive: 0 65% 45%;       /* Professional burgundy */
-  --destructive-foreground: 0 0% 100%;
-  --destructive-hover: 0 65% 40%;
-  --destructive-active: 0 65% 50%;
-  
-  --border: 220 12% 85%;
-  --input: 220 12% 85%;
-  --ring: 224 65% 25%;
-  
-  /* Data categorization - Executive palette */
-  --category-1: 224 65% 25%;      /* Deep navy (primary) */
-  --category-2: 45 85% 45%;       /* Rich gold */
-  --category-3: 160 40% 35%;      /* Forest green */
-  --category-4: 224 25% 35%;      /* Charcoal blue */
-  --category-5: 0 45% 40%;        /* Professional burgundy */
-  --category-6: 200 25% 45%;      /* Steel blue */
-  --category-7: 35 25% 25%;       /* Warm charcoal */
-  --category-8: 280 20% 45%;      /* Sophisticated purple */
-  
-  /* Status colors - Professional variants */
-  --status-success: 160 50% 35%;  /* Rich forest green */
-  --status-warning: 45 85% 50%;   /* Sophisticated gold */
-  --status-error: 0 60% 45%;      /* Professional burgundy */
-  --status-info: 224 65% 25%;     /* Deep navy */
-  --status-neutral: 220 15% 50%;  /* Professional gray */
-  
-  /* Surface colors */
-  --surface: 0 0% 100%;
-  --overlay: 224 25% 12% / 0.4;
-  --backdrop: 224 25% 12% / 0.2;
-}
+  .palette-corporate-elite {
+    /* Base semantic colors */
+    --background: 220 15% 97%; /* Clean light gray */
+    --foreground: 224 25% 12%; /* Deep navy text */
+    --card: 0 0% 100%; /* Pure white cards */
+    --card-foreground: 224 25% 12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 25% 12%;
 
-/* Dark mode variant for Corporate Elite */
-.palette-corporate-elite.dark {
-  --background: 224 20% 8%;       /* Very dark navy */
-  --foreground: 220 15% 95%;      /* Crisp light gray */
-  --card: 224 18% 10%;            /* Dark navy cards */
-  --card-foreground: 220 15% 95%;
-  --popover: 224 18% 10%;
-  --popover-foreground: 220 15% 95%;
-  
-  --primary: 224 65% 55%;         /* Brighter navy for contrast */
-  --primary-foreground: 224 20% 8%;
-  --primary-hover: 224 65% 60%;
-  --primary-active: 224 65% 50%;
-  
-  --secondary: 224 15% 18%;       /* Dark blue-gray */
-  --secondary-foreground: 220 15% 95%;
-  --secondary-hover: 224 15% 22%;
-  --secondary-active: 224 15% 15%;
-  
-  --muted: 224 12% 15%;
-  --muted-foreground: 220 10% 70%;
-  
-  --accent: 45 85% 65%;           /* Brighter gold for dark mode */
-  --accent-foreground: 224 20% 8%;
-  
-  --destructive: 0 65% 60%;       /* Brighter burgundy */
-  --destructive-foreground: 224 20% 8%;
-  
-  /* Adjusted category colors for dark mode */
-  --category-1: 224 65% 55%;      /* Brighter navy */
-  --category-2: 45 85% 60%;       /* Brighter gold */
-  --category-3: 160 50% 50%;      /* Brighter forest green */
-  --category-4: 224 35% 55%;      /* Brighter charcoal blue */
-  --category-5: 0 55% 55%;        /* Brighter burgundy */
-  --category-6: 200 35% 60%;      /* Brighter steel blue */
-  --category-7: 35 35% 65%;       /* Brighter warm gray */
-  --category-8: 280 30% 65%;      /* Brighter sophisticated purple */
-  
-  --border: 224 15% 20%;
-  --input: 224 15% 20%;
-  --surface: 224 18% 10%;
-}
+    --primary: 224 65% 25%; /* Deep navy blue */
+    --primary-foreground: 0 0% 100%;
+    --primary-hover: 224 65% 20%;
+    --primary-active: 224 65% 30%;
+    --primary-disabled: 224 25% 50%;
 
-/* ==================================================================
+    --secondary: 220 10% 88%; /* Sophisticated light gray */
+    --secondary-foreground: 224 25% 12%;
+    --secondary-hover: 220 10% 85%;
+    --secondary-active: 220 10% 90%;
+
+    --muted: 220 8% 92%; /* Very light warm gray */
+    --muted-foreground: 224 15% 45%;
+
+    --accent: 45 85% 55%; /* Sophisticated gold accent */
+    --accent-foreground: 224 25% 12%;
+
+    --destructive: 0 65% 45%; /* Professional burgundy */
+    --destructive-foreground: 0 0% 100%;
+    --destructive-hover: 0 65% 40%;
+    --destructive-active: 0 65% 50%;
+
+    --border: 220 12% 85%;
+    --input: 220 12% 85%;
+    --ring: 224 65% 25%;
+
+    /* Data categorization - Executive palette */
+    --category-1: 224 65% 25%; /* Deep navy (primary) */
+    --category-2: 45 85% 45%; /* Rich gold */
+    --category-3: 160 40% 35%; /* Forest green */
+    --category-4: 224 25% 35%; /* Charcoal blue */
+    --category-5: 0 45% 40%; /* Professional burgundy */
+    --category-6: 200 25% 45%; /* Steel blue */
+    --category-7: 35 25% 25%; /* Warm charcoal */
+    --category-8: 280 20% 45%; /* Sophisticated purple */
+
+    /* Status colors - Professional variants */
+    --status-success: 160 50% 35%; /* Rich forest green */
+    --status-warning: 45 85% 50%; /* Sophisticated gold */
+    --status-error: 0 60% 45%; /* Professional burgundy */
+    --status-info: 224 65% 25%; /* Deep navy */
+    --status-neutral: 220 15% 50%; /* Professional gray */
+
+    /* Surface colors */
+    --surface: 0 0% 100%;
+    --overlay: 224 25% 12% / 0.4;
+    --backdrop: 224 25% 12% / 0.2;
+  }
+
+  /* Dark mode variant for Corporate Elite */
+  .palette-corporate-elite.dark {
+    --background: 224 20% 8%; /* Very dark navy */
+    --foreground: 220 15% 95%; /* Crisp light gray */
+    --card: 224 18% 10%; /* Dark navy cards */
+    --card-foreground: 220 15% 95%;
+    --popover: 224 18% 10%;
+    --popover-foreground: 220 15% 95%;
+
+    --primary: 224 65% 55%; /* Brighter navy for contrast */
+    --primary-foreground: 224 20% 8%;
+    --primary-hover: 224 65% 60%;
+    --primary-active: 224 65% 50%;
+
+    --secondary: 224 15% 18%; /* Dark blue-gray */
+    --secondary-foreground: 220 15% 95%;
+    --secondary-hover: 224 15% 22%;
+    --secondary-active: 224 15% 15%;
+
+    --muted: 224 12% 15%;
+    --muted-foreground: 220 10% 70%;
+
+    --accent: 45 85% 65%; /* Brighter gold for dark mode */
+    --accent-foreground: 224 20% 8%;
+
+    --destructive: 0 65% 60%; /* Brighter burgundy */
+    --destructive-foreground: 224 20% 8%;
+
+    /* Adjusted category colors for dark mode */
+    --category-1: 224 65% 55%; /* Brighter navy */
+    --category-2: 45 85% 60%; /* Brighter gold */
+    --category-3: 160 50% 50%; /* Brighter forest green */
+    --category-4: 224 35% 55%; /* Brighter charcoal blue */
+    --category-5: 0 55% 55%; /* Brighter burgundy */
+    --category-6: 200 35% 60%; /* Brighter steel blue */
+    --category-7: 35 35% 65%; /* Brighter warm gray */
+    --category-8: 280 30% 65%; /* Brighter sophisticated purple */
+
+    --border: 224 15% 20%;
+    --input: 224 15% 20%;
+    --surface: 224 18% 10%;
+  }
+
+  /* ==================================================================
    PALETTE APPLICATION UTILITIES
    ================================================================== */
 
-/* Very fast transitions for all theme changes */
-* {
-  transition: 
-    background-color 0.025s ease,
-    color 0.025s ease,
-    border-color 0.025s ease,
-    box-shadow 0.025s ease;
-}
+  /* Very fast transitions for all theme changes */
+  * {
+    transition:
+      background-color 0.025s ease,
+      color 0.025s ease,
+      border-color 0.025s ease,
+      box-shadow 0.025s ease;
+  }
 
-/* Dark mode is handled by the main application via document.documentElement.classList */
+  /* Dark mode is handled by the main application via document.documentElement.classList */
 
-/* Helper classes for palette preview */
-.palette-preview {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 0.5rem;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  background: hsl(var(--card));
-  border: 1px solid hsl(var(--border));
-}
+  /* Helper classes for palette preview */
+  .palette-preview {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 0.5rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+  }
 
-.palette-swatch {
-  aspect-ratio: 1;
-  border-radius: 0.25rem;
-  border: 1px solid hsl(var(--border) / 0.2);
-}
+  .palette-swatch {
+    aspect-ratio: 1;
+    border-radius: 0.25rem;
+    border: 1px solid hsl(var(--border) / 0.2);
+  }
 
-/* Usage example in component:
+  /* Usage example in component:
 <div className="palette-preview">
   <div className="palette-swatch bg-category-1"></div>
   <div className="palette-swatch bg-category-2"></div>
   <!-- ... etc for all 8 categories -->
 </div>
 */
-
-}/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
+}
+/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -576,24 +576,17 @@
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-800: oklch(44.4% 0.177 26.899);
-    --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-yellow-800: oklch(47.6% 0.114 61.907);
-    --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-100: oklch(96.2% 0.044 156.743);
-    --color-green-200: oklch(92.5% 0.084 155.995);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-green-800: oklch(44.8% 0.119 151.328);
-    --color-green-900: oklch(39.3% 0.095 152.535);
-    --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-100: oklch(93.2% 0.032 255.585);
-    --color-blue-200: oklch(88.2% 0.059 254.128);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-blue-800: oklch(42.4% 0.199 265.638);
-    --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-gray-50: oklch(98.5% 0.002 247.839);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -652,6 +645,10 @@
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
     --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -1046,9 +1043,6 @@
       max-width: 96rem;
     }
   }
-  .m-4 {
-    margin: calc(var(--spacing) * 4);
-  }
   .m-12 {
     margin: calc(var(--spacing) * 12);
   }
@@ -1133,9 +1127,6 @@
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
-  .mb-12 {
-    margin-bottom: calc(var(--spacing) * 12);
-  }
   .-ml-3 {
     margin-left: calc(var(--spacing) * -3);
   }
@@ -1163,6 +1154,12 @@
   .ml-auto {
     margin-left: auto;
   }
+  .line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
   .block {
     display: block;
   }
@@ -1763,13 +1760,6 @@
       margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-12 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-x-1 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1916,9 +1906,6 @@
   .border-black {
     border-color: var(--color-black);
   }
-  .border-blue-200 {
-    border-color: var(--color-blue-200);
-  }
   .border-gray-100 {
     border-color: var(--color-gray-100);
   }
@@ -1928,9 +1915,6 @@
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
-  .border-green-200 {
-    border-color: var(--color-green-200);
-  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1970,9 +1954,6 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
-  .bg-blue-50 {
-    background-color: var(--color-blue-50);
-  }
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
@@ -2027,9 +2008,6 @@
   .bg-gray-950 {
     background-color: var(--color-gray-950);
   }
-  .bg-green-50 {
-    background-color: var(--color-green-50);
-  }
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
@@ -2127,12 +2105,18 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -2375,9 +2359,6 @@
   .text-blue-800 {
     color: var(--color-blue-800);
   }
-  .text-blue-900 {
-    color: var(--color-blue-900);
-  }
   .text-current {
     color: currentcolor;
   }
@@ -2396,9 +2377,6 @@
   .text-gray-900 {
     color: var(--color-gray-900);
   }
-  .text-green-500 {
-    color: var(--color-green-500);
-  }
   .text-green-600 {
     color: var(--color-green-600);
   }
@@ -2408,12 +2386,6 @@
   .text-green-800 {
     color: var(--color-green-800);
   }
-  .text-green-900 {
-    color: var(--color-green-900);
-  }
-  .text-red-500 {
-    color: var(--color-red-500);
-  }
   .text-red-600 {
     color: var(--color-red-600);
   }
@@ -2426,9 +2398,6 @@
   .text-white {
     color: var(--color-white);
   }
-  .text-yellow-500 {
-    color: var(--color-yellow-500);
-  }
   .text-yellow-600 {
     color: var(--color-yellow-600);
   }
@@ -2476,6 +2445,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_10px_15px_-3px_rgb\(0_0_0_\/_0\.1\)\,0_4px_6px_-4px_rgb\(0_0_0_\/_0\.1\)\] {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2512,6 +2485,10 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-1 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-2 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2799,6 +2776,14 @@
       }
     }
   }
+  .hover\:border-solid {
+    &:hover {
+      @media (hover: hover) {
+        --tw-border-style: solid;
+        border-style: solid;
+      }
+    }
+  }
   .hover\:bg-black\/10 {
     &:hover {
       @media (hover: hover) {
@@ -3077,6 +3062,21 @@
       gap: calc(var(--spacing) * 2);
     }
   }
+  .sm\:p-3 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 3);
+    }
+  }
+  .sm\:p-4 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 4);
+    }
+  }
+  .sm\:p-6 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:px-2 {
     @media (width >= 40rem) {
       padding-inline: calc(var(--spacing) * 2);
@@ -3164,11 +3164,26 @@
       grid-template-columns: repeat(11, minmax(0, 1fr));
     }
   }
+  .md\:p-3\.5 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 3.5);
+    }
+  }
   .md\:p-4 {
     @media (width >= 48rem) {
       padding: calc(var(--spacing) * 4);
     }
   }
+  .md\:p-5 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 5);
+    }
+  }
+  .md\:p-7 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 7);
+    }
+  }
   .md\:px-3 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 3);
@@ -3235,11 +3250,21 @@
       gap: calc(var(--spacing) * 3);
     }
   }
+  .lg\:p-4 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 4);
+    }
+  }
   .lg\:p-6 {
     @media (width >= 64rem) {
       padding: calc(var(--spacing) * 6);
     }
   }
+  .lg\:p-8 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
   .lg\:px-8 {
     @media (width >= 64rem) {
       padding-inline: calc(var(--spacing) * 8);
@@ -3266,6 +3291,21 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .xl\:p-5 {
+    @media (width >= 80rem) {
+      padding: calc(var(--spacing) * 5);
+    }
+  }
+  .xl\:p-8 {
+    @media (width >= 80rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
+  .xl\:p-10 {
+    @media (width >= 80rem) {
+      padding: calc(var(--spacing) * 10);
+    }
+  }
   .\[\&_table\]\:table-fixed {
     & table {
       table-layout: fixed;
@@ -3917,9 +3957,9 @@
   }
   * {
     transition: background-color 0.025s ease,
-    color 0.025s ease,
-    border-color 0.025s ease,
-    box-shadow 0.025s ease;
+      color 0.025s ease,
+      border-color 0.025s ease,
+      box-shadow 0.025s ease;
   }
   .palette-preview {
     display: grid;
@@ -4016,6 +4056,15 @@
     --component-gap: 1.5rem;
     --content-max-width: 80rem;
     --radius: 0.5rem;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+    --shadow-map-popup: 0 10px 40px -10px rgb(0 0 0 / 0.3), 0 0 1px rgb(0 0 0 / 0.2);
+    --shadow-map-control: 0 2px 8px rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1);
+    --shadow-map-overlay: 0 4px 16px rgb(0 0 0 / 0.2), 0 0 2px rgb(0 0 0 / 0.1);
     --primary-hover: 222.2 47.4% 15%;
     --primary-active: 222.2 47.4% 8%;
     --primary-disabled: 215 16% 47%;
@@ -4070,6 +4119,15 @@
     --surface: 220 13% 15%;
     --overlay: 0 0% 0% / 0.75;
     --backdrop: 0 0% 0% / 0.6;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
+    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.2);
+    --shadow-map-popup: 0 10px 40px -10px rgb(0 0 0 / 0.6), 0 0 1px rgb(0 0 0 / 0.4);
+    --shadow-map-control: 0 2px 8px rgb(0 0 0 / 0.4), 0 0 1px rgb(0 0 0 / 0.2);
+    --shadow-map-overlay: 0 4px 16px rgb(0 0 0 / 0.5), 0 0 2px rgb(0 0 0 / 0.3);
     --primary-hover: 210 40% 94%;
     --primary-active: 210 40% 90%;
     --primary-disabled: 215 16% 35%;
@@ -4114,11 +4172,17 @@
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
     margin: 0;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings: "rlig" 1,
+      "calt" 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     letter-spacing: -0.025em;
     font-weight: 600;
   }
@@ -4145,12 +4209,15 @@
     color: hsl(var(--card-foreground));
     border: 1px solid hsl(var(--border));
     border-radius: calc(var(--radius) * 1.5);
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06);
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
+      0 1px 2px 0 rgb(0 0 0 / 0.06);
     padding: var(--card-padding);
-    transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
+    transition: box-shadow 0.2s ease-in-out,
+      border-color 0.2s ease-in-out;
   }
   .card-container:hover {
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -1px rgb(0 0 0 / 0.06);
   }
   .card-nested {
     background-color: hsl(var(--gray-25));
@@ -4329,28 +4396,36 @@
     color: hsl(var(--category-8));
   }
   .shadow-category-1 {
-    box-shadow: 0 4px 6px -1px hsl(var(--category-1) / 0.1), 0 2px 4px -1px hsl(var(--category-1) / 0.06);
+    box-shadow: 0 4px 6px -1px hsl(var(--category-1) / 0.1),
+      0 2px 4px -1px hsl(var(--category-1) / 0.06);
   }
   .shadow-category-2 {
-    box-shadow: 0 4px 6px -1px hsl(var(--category-2) / 0.1), 0 2px 4px -1px hsl(var(--category-2) / 0.06);
+    box-shadow: 0 4px 6px -1px hsl(var(--category-2) / 0.1),
+      0 2px 4px -1px hsl(var(--category-2) / 0.06);
   }
   .shadow-category-3 {
-    box-shadow: 0 4px 6px -1px hsl(var(--category-3) / 0.1), 0 2px 4px -1px hsl(var(--category-3) / 0.06);
+    box-shadow: 0 4px 6px -1px hsl(var(--category-3) / 0.1),
+      0 2px 4px -1px hsl(var(--category-3) / 0.06);
   }
   .shadow-category-4 {
-    box-shadow: 0 4px 6px -1px hsl(var(--category-4) / 0.1), 0 2px 4px -1px hsl(var(--category-4) / 0.06);
+    box-shadow: 0 4px 6px -1px hsl(var(--category-4) / 0.1),
+      0 2px 4px -1px hsl(var(--category-4) / 0.06);
   }
   .shadow-category-5 {
-    box-shadow: 0 4px 6px -1px hsl(var(--category-5) / 0.1), 0 2px 4px -1px hsl(var(--category-5) / 0.06);
+    box-shadow: 0 4px 6px -1px hsl(var(--category-5) / 0.1),
+      0 2px 4px -1px hsl(var(--category-5) / 0.06);
   }
   .shadow-category-6 {
-    box-shadow: 0 4px 6px -1px hsl(var(--category-6) / 0.1), 0 2px 4px -1px hsl(var(--category-6) / 0.06);
+    box-shadow: 0 4px 6px -1px hsl(var(--category-6) / 0.1),
+      0 2px 4px -1px hsl(var(--category-6) / 0.06);
   }
   .shadow-category-7 {
-    box-shadow: 0 4px 6px -1px hsl(var(--category-7) / 0.1), 0 2px 4px -1px hsl(var(--category-7) / 0.06);
+    box-shadow: 0 4px 6px -1px hsl(var(--category-7) / 0.1),
+      0 2px 4px -1px hsl(var(--category-7) / 0.06);
   }
   .shadow-category-8 {
-    box-shadow: 0 4px 6px -1px hsl(var(--category-8) / 0.1), 0 2px 4px -1px hsl(var(--category-8) / 0.06);
+    box-shadow: 0 4px 6px -1px hsl(var(--category-8) / 0.1),
+      0 2px 4px -1px hsl(var(--category-8) / 0.06);
   }
   .status-success {
     background-color: hsl(var(--status-success) / 0.1);
@@ -4582,6 +4657,68 @@
       grid-template-columns: repeat(2, 1fr);
     }
   }
+  .dark .mapboxgl-ctrl-group {
+    background: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+  }
+  .dark .mapboxgl-ctrl-group > button {
+    background-color: hsl(var(--card));
+    border-color: hsl(var(--border));
+  }
+  .dark .mapboxgl-ctrl-group > button:hover {
+    background-color: hsl(var(--secondary));
+  }
+  .dark .mapboxgl-ctrl-group > button:disabled {
+    background-color: hsl(var(--card));
+    opacity: 0.5;
+  }
+  .dark .mapboxgl-ctrl-group > button + button {
+    border-top-color: hsl(var(--border));
+  }
+  .dark .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,
+  .dark .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon,
+  .dark .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon,
+  .dark .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon,
+  .dark .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon,
+  .dark .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon {
+    filter: invert(1);
+  }
+  .dark .mapboxgl-ctrl-scale {
+    background-color: hsla(var(--card) / 0.8);
+    color: hsl(var(--foreground));
+    border-color: hsl(var(--border));
+  }
+  .dark .mapboxgl-ctrl-attrib {
+    background-color: hsla(var(--card) / 0.8);
+    color: hsl(var(--muted-foreground));
+  }
+  .dark .mapboxgl-ctrl-attrib a {
+    color: hsl(var(--primary));
+  }
+  .dark .mapboxgl-ctrl-attrib a:hover {
+    color: hsl(var(--primary-hover));
+  }
+  .dark .mapboxgl-ctrl-attrib-button {
+    background-color: hsla(var(--card) / 0.8);
+    color: hsl(var(--foreground));
+  }
+  .dark .mapboxgl-popup-content {
+    background: hsl(var(--card));
+    color: hsl(var(--foreground));
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5);
+  }
+  .dark .mapboxgl-popup-tip {
+    border-top-color: hsl(var(--card));
+    border-bottom-color: hsl(var(--card));
+    border-left-color: hsl(var(--card));
+    border-right-color: hsl(var(--card));
+  }
+  .dark .mapboxgl-popup-close-button {
+    color: hsl(var(--foreground));
+  }
+  .dark .mapboxgl-popup-close-button:hover {
+    background-color: hsl(var(--secondary));
+  }
 }
 @property --tw-translate-x {
   syntax: "*";
@@ -4980,4 +5117,4 @@
       --tw-content: "";
     }
   }
-}
+}