fix: restore critical build/deploy fixes and standardize destructive UI state

styles/globals.css

@@ -1,7 +1,9 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme {
-  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-sans:
+    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    Arial, sans-serif;
   --font-heading: 'Inter', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, sans-serif;
 
@@ -30,43 +32,82 @@
   --color-success: #10b981;
   --color-warning: #f59e0b;
   --color-danger: #ef4444;
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #ffffff;
   --color-info: #3b82f6;
 
   --animate-fade-in: fade-in 0.5s ease-out;
   --animate-slide-up: slide-up 0.6s ease-out;
   --animate-slow-zoom: slow-zoom 20s linear infinite;
   --animate-reveal: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-slight-fade-in-from-bottom: slight-fade-in-from-bottom 0.8s
+    cubic-bezier(0.16, 1, 0.3, 1) forwards;
   --animate-gradient-x: gradient-x 15s ease infinite;
 
   @keyframes gradient-x {
-    0%, 100% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
   }
   @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
   @keyframes slide-up {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
   @keyframes slow-zoom {
-    from { transform: scale(1); }
-    to { transform: scale(1.1); }
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(1.1);
+    }
   }
   @keyframes reveal {
-    from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
-    to { opacity: 1; transform: translateY(0); filter: blur(0); }
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+      filter: blur(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
   }
   @keyframes slight-fade-in-from-bottom {
-    from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
-    to { opacity: 1; transform: translateY(0); filter: blur(0); }
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+      filter: blur(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+      filter: blur(0);
+    }
   }
 }
 
 @layer base {
-  .bg-primary a, .bg-primary-dark a {
+  .bg-primary a,
+  .bg-primary-dark a {
     @apply text-white/90 hover:text-white transition-colors;
   }
   body {
@@ -76,63 +117,81 @@
     -moz-osx-font-smoothing: grayscale;
     line-height: 1.7;
   }
-  
-  h1, h2, h3, h4, h5, h6 {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     @apply font-heading font-bold tracking-tight;
     line-height: 1.2;
   }
-  
+
   /* Enhanced Mobile-first typography hierarchy with fluid sizing */
-  h1 { @apply text-3xl md:text-5xl lg:text-6xl leading-[1.1]; }
-  h2 { @apply text-2xl md:text-4xl lg:text-5xl leading-[1.2]; }
-  h3 { @apply text-xl md:text-2xl lg:text-3xl leading-[1.3]; }
-  h4 { @apply text-lg md:text-xl lg:text-2xl leading-[1.4]; }
-  h5 { @apply text-base md:text-lg leading-[1.5]; }
-  h6 { @apply text-sm md:text-base leading-[1.6]; }
-  
+  h1 {
+    @apply text-3xl md:text-5xl lg:text-6xl leading-[1.1];
+  }
+  h2 {
+    @apply text-2xl md:text-4xl lg:text-5xl leading-[1.2];
+  }
+  h3 {
+    @apply text-xl md:text-2xl lg:text-3xl leading-[1.3];
+  }
+  h4 {
+    @apply text-lg md:text-xl lg:text-2xl leading-[1.4];
+  }
+  h5 {
+    @apply text-base md:text-lg leading-[1.5];
+  }
+  h6 {
+    @apply text-sm md:text-base leading-[1.6];
+  }
+
   /* Paragraph and text styles */
   p {
     @apply mb-4 leading-relaxed;
   }
-  
+
   /* Link styles */
   a {
     @apply no-underline transition-all duration-200;
   }
-  
+
   /* List styles */
-  ul, ol {
+  ul,
+  ol {
     @apply my-4 ml-6;
   }
-  
+
   li {
     @apply mb-2 leading-relaxed;
   }
-  
+
   /* Small text */
   small {
     @apply text-sm md:text-base;
   }
-  
+
   /* Strong and emphasis */
   strong {
     @apply font-bold;
   }
-  
+
   em {
     @apply italic;
   }
-  
+
   /* Blockquote */
   blockquote {
     @apply border-l-4 pl-6 my-6 italic;
   }
-  
+
   /* Code */
   code {
     @apply px-2 py-1 rounded font-mono text-sm;
   }
-  
+
   /* Horizontal rule */
   hr {
     @apply my-8;
@@ -177,7 +236,7 @@
     opacity 0.6s ease-out,
     transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
     filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
-  
+
   &.is-visible {
     opacity: 1;
     transform: translateY(0);