feat: introduce dark theme with custom CSS variables and integrate border color into Tailwind configuration.

app/globals.css

@@ -13,7 +13,8 @@
     --popover: 240 10% 6%;
     --popover-foreground: 0 0% 98%;
 
-    --primary: 263.4 70% 50.4%; /* Vivid Violet */
+    --primary: 263.4 70% 50.4%;
+    /* Vivid Violet */
     --primary-foreground: 210 40% 98%;
 
     --secondary: 240 3.7% 15.9%;
@@ -31,15 +32,18 @@
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
-    
+
     --radius: 0.75rem;
   }
 }
 
 @layer base {
   * {
-    @apply border-border;
+    border-color: hsl(var(--border));
+    border-width: 1px;
+    /* defaulting border width */
   }
+
   body {
     @apply bg-background text-foreground;
   }
@@ -51,4 +55,4 @@
 
 .gradient-text {
   @apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400;
-}
+}

tailwind.config.ts

@@ -29,6 +29,7 @@ const config: Config = {
                     DEFAULT: "var(--card)",
                     foreground: "var(--card-foreground)",
                 },
+                border: "hsl(var(--border))",
             },
             borderRadius: {
                 lg: "var(--radius)",