PreRelease v2

app/globals.css

@@ -123,6 +123,60 @@
   :focus-visible {
     @apply outline-none ring-2 ring-primary ring-offset-2;
   }
+
+  /* Global branded scrollbar */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--primary) / 0.65) hsl(var(--muted));
+  }
+
+  *::-webkit-scrollbar {
+    width: 11px;
+    height: 11px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: linear-gradient(
+      180deg,
+      hsl(var(--muted)) 0%,
+      hsl(var(--background)) 100%
+    );
+    border-radius: 999px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: linear-gradient(
+      180deg,
+      hsl(var(--primary) / 0.85) 0%,
+      hsl(var(--secondary) / 0.8) 100%
+    );
+    border: 2px solid hsl(var(--background));
+    border-radius: 999px;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(
+      180deg,
+      hsl(var(--primary)) 0%,
+      hsl(var(--accent) / 0.95) 100%
+    );
+  }
+
+  .dark * {
+    scrollbar-color: hsl(var(--primary) / 0.8) hsl(var(--muted));
+  }
+
+  .dark *::-webkit-scrollbar-track {
+    background: linear-gradient(
+      180deg,
+      hsl(var(--muted)) 0%,
+      hsl(var(--background) / 0.92) 100%
+    );
+  }
+
+  .dark *::-webkit-scrollbar-thumb {
+    border-color: hsl(var(--background));
+  }
 }
 
 @layer utilities {