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.

src/components/MemberFooter.js

@@ -4,7 +4,7 @@ import { Calendar, Users, User, BookOpen, FileText, DollarSign, Scale } from 'lu
 
 const MemberFooter = () => {
   return (
-    <footer className="bg-[#422268] text-white mt-auto">
+    <footer className="bg-var(--purple-ink) text-white mt-auto">
       <div className="max-w-7xl mx-auto px-6 py-12">
         <div className="grid md:grid-cols-4 gap-8">
           {/* Logo & About */}
@@ -104,7 +104,7 @@ const MemberFooter = () => {
       </div>
 
       {/* Bottom Bar */}
-      <div className="border-t border-[#664fa3]">
+      <div className="border-t border-var(--purple-lavender)">
         <div className="max-w-7xl mx-auto px-6 py-4">
           <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-400" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <div className="flex gap-6">