Improve overall CMS styling: refined design tokens, improved card/button/input components, circular avatars on me page

tailwind.css

@@ -1,7 +1,6 @@
 @import "tailwindcss";
 
 @theme {
-  /* Colors */
   --color-primary: #eeb425;
   --color-primary-hover: #cf9d15;
   --color-background: #f3f4f6;
@@ -16,33 +15,32 @@
   --color-danger: #ef4444;
   --color-danger-hover: #dc2626;
   --color-secondary: #1a1a2e;
-
-  /* Border */
   --color-border: #eeb425;
   --color-input-border: #4b5563;
 
-  /* Font Family */
   --font-family-sans: "Poppins", sans-serif;
 
-  /* Border Radius */
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
   --radius-full: 9999px;
 
-  /* Shadows */
-  --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.15);
-  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-btn-hover: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* Font import */
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
 
-/* Base styles */
 body {
   font-family: var(--font-family-sans);
   background-color: var(--color-background);
   color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /* Button effects */