scrollbar

app/globals.css

@@ -5,17 +5,80 @@
   --foreground: #171717;
   --font-inter: 'Inter', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Slim global scrollbar */
+  --scrollbar-size: 6px;
+  --scrollbar-track: transparent;
+  --scrollbar-thumb: rgba(99, 102, 241, 0.28);
+  --scrollbar-thumb-hover: rgba(99, 102, 241, 0.48);
+  --scrollbar-thumb-active: rgba(99, 102, 241, 0.65);
+  --scrollbar-corner: transparent;
 }
 
 .dark {
   --background: #0a0a0a;
   --foreground: #ededed;
+  --scrollbar-thumb: rgba(129, 140, 248, 0.32);
+  --scrollbar-thumb-hover: rgba(129, 140, 248, 0.52);
+  --scrollbar-thumb-active: rgba(165, 180, 252, 0.68);
 }
 
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --scrollbar-thumb: rgba(129, 140, 248, 0.32);
+    --scrollbar-thumb-hover: rgba(129, 140, 248, 0.52);
+    --scrollbar-thumb-active: rgba(165, 180, 252, 0.68);
+  }
+}
+
+/* Global slim scrollbar — Firefox */
 html {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
   background: var(--background);
 }
 
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+/* Global slim scrollbar — Chromium / Safari */
+*::-webkit-scrollbar {
+  width: var(--scrollbar-size);
+  height: var(--scrollbar-size);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: 999px;
+  border: 1.5px solid transparent;
+  background-clip: padding-box;
+  transition: background-color 0.2s ease;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover);
+}
+
+*::-webkit-scrollbar-thumb:active {
+  background-color: var(--scrollbar-thumb-active);
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--scrollbar-corner);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *::-webkit-scrollbar-thumb {
+    transition: none;
+  }
+}
+
 body {
   color: var(--foreground);
   background: var(--background);