fix: redesign

app/globals.css

@@ -42,14 +42,13 @@
 }
 
 :root {
-  --background: #f3f4f6;
-  --foreground: #171717;
+  --background: #f9fafb;
+  --foreground: #111827;
 }
 
-/* Dark palette is driven by the `.dark` class so the toggle controls it */
 .dark {
   --background: #030712;
-  --foreground: #ededed;
+  --foreground: #f9fafb;
 }
 
 @theme inline {
@@ -64,6 +63,8 @@ body {
   color: var(--foreground);
   font-family: 'Dana', 'Inter', Arial, Helvetica, sans-serif;
   font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* Smooth theme transition for surfaces, borders and text */
@@ -71,7 +72,7 @@ body {
 *::before,
 *::after {
   transition-property: background-color, border-color, color, fill, stroke;
-  transition-duration: 200ms;
+  transition-duration: 150ms;
   transition-timing-function: ease;
 }
 
@@ -84,8 +85,11 @@ body {
   scrollbar-color: #374151 transparent;
 }
 *::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
 }
 *::-webkit-scrollbar-thumb {
   background-color: #cbd5e1;
@@ -105,3 +109,24 @@ body {
   background-color: #4853c4;
   color: #f9fafb;
 }
+
+/* Toast animations */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slide-in-from-top-4 {
+  from { transform: translateY(-1rem); }
+  to { transform: translateY(0); }
+}
+.animate-in {
+  animation-duration: 300ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+.fade-in {
+  animation-name: fade-in;
+}
+.slide-in-from-top-4 {
+  animation-name: slide-in-from-top-4;
+}