refactor: update styles in MembersDirectory and NewsletterArchive for consistency and improved theming

- Updated color classes to use CSS variables for better maintainability and theming.
- Refactored component styles in MembersDirectory.js to enhance visual consistency.
- Adjusted loading states and empty states in NewsletterArchive.js for improved user experience.
- Added new brand colors to tailwind.config.js for future use.

tailwind.config.js

@@ -43,6 +43,10 @@ module.exports = {
 					DEFAULT: 'hsl(var(--destructive))',
 					foreground: 'hsl(var(--destructive-foreground))'
 				},
+				success: {
+					DEFAULT: 'hsl(var(--success))',
+					foreground: 'hsl(var(--success-foreground))'
+				},
 				border: 'hsl(var(--border))',
 				input: 'hsl(var(--input))',
 				ring: 'hsl(var(--ring))',
@@ -51,25 +55,39 @@ module.exports = {
 					'2': 'hsl(var(--chart-2))',
 					'3': 'hsl(var(--chart-3))',
 					'4': 'hsl(var(--chart-4))',
-					'5': 'hsl(var(--chart-5))'
-				}
+					'5': 'hsl(var(--chart-5))',
+					'6': 'hsl(var(--chart-6))',
+					'7': 'hsl(var(--chart-7))',
+				},
+
+				/* =========================
+				   Brand Colors
+				   ========================= */
+				brand: {
+					'dark-lavender': 'hsl(var(--brand-dark-lavender))',
+					'purple': 'hsl(var(--brand-purple))',
+					'lavender': 'hsl(var(--brand-lavender))',
+					'light-lavender': 'hsl(var(--brand-light-lavender))',
+					'white': 'hsl(var(--brand-white))',
+
+					'dark-orange': 'hsl(var(--brand-dark-orange))',
+					'orange': 'hsl(var(--brand-orange))',
+					'light-orange': 'hsl(var(--brand-light-orange))',
+
+					'pink': 'hsl(var(--brand-pink))',
+					'dusty-pink': 'hsl(var(--dusty-pink))',
+					'dark-rose': 'hsl(var(--dark-rose))',
+				},
+
 			},
 			keyframes: {
 				'accordion-down': {
-					from: {
-						height: '0'
-					},
-					to: {
-						height: 'var(--radix-accordion-content-height)'
-					}
+					from: { height: '0' },
+					to: { height: 'var(--radix-accordion-content-height)' }
 				},
 				'accordion-up': {
-					from: {
-						height: 'var(--radix-accordion-content-height)'
-					},
-					to: {
-						height: '0'
-					}
+					from: { height: 'var(--radix-accordion-content-height)' },
+					to: { height: '0' }
 				}
 			},
 			animation: {
@@ -78,6 +96,7 @@ module.exports = {
 			}
 		}
 	},
+
 	plugins: [
 		require("tailwindcss-animate"),
 		require("@tailwindcss/typography")