src/components/AdminSidebar.js

@@ -436,7 +436,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                   <div
                     className={`h-2 rounded-full transition-all ${storagePercentage > 90 ? 'bg-red-500' :
                       storagePercentage > 75 ? 'bg-yellow-500' :
-                        'bg-[#81B29A]'
+                        'bg-success'
                       }`}
                     style={{ width: `${storagePercentage}%` }}
                   />

src/components/AttendanceDialog.js

@@ -83,7 +83,7 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
                   <p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
                 </div>
                 {rsvp.attended && (
-                  <span className="text-sm text-[#81B29A] font-medium">
+                  <span className="text-sm text-success font-medium">
                     ✓ Attended
                   </span>
                 )}

src/components/ConfirmationDialog.js

@@ -39,7 +39,7 @@ const ConfirmationDialog = ({
     warning: {
       icon: AlertTriangle,
       iconColor: 'text-accent',
-      confirmButtonClass: 'bg-accent text-white hover:bg-[#e88d66] rounded-full px-6',
+      confirmButtonClass: 'bg-accent text-white hover:bg-tangerine-dream rounded-full px-6',
     },
     danger: {
       icon: AlertTriangle,
@@ -49,12 +49,12 @@ const ConfirmationDialog = ({
     info: {
       icon: Info,
       iconColor: 'text-muted-foreground',
-      confirmButtonClass: 'bg-muted-foreground text-white hover:bg-[#553d8a] rounded-full px-6',
+      confirmButtonClass: 'bg-muted-foreground text-white hover:bg-rebecca-purple rounded-full px-6',
     },
     success: {
       icon: CheckCircle,
-      iconColor: 'text-[#81B29A]',
+      iconColor: 'text-success',
-      confirmButtonClass: 'bg-[#81B29A] text-white hover:bg-[#6fa188] rounded-full px-6',
+      confirmButtonClass: 'bg-success text-white hover:bg-muted-teal-base rounded-full px-6',
     },
   };
 

src/components/CreateMemberDialog.js

@@ -311,7 +311,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             </Button>
             <Button
               type="submit"
-              className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+              className="rounded-xl bg-success hover:bg-muted-teal-balanced text-white"
               disabled={loading}
             >
               {loading ? (

src/components/CreateStaffDialog.js

@@ -229,7 +229,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
             </Button>
             <Button
               type="submit"
-              className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+              className="rounded-xl bg-success hover:bg-muted-teal-balanced text-white"
               disabled={loading}
             >
               {loading ? (

src/components/ImportMembersDialog.js

@@ -155,7 +155,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
           // Upload Form
           <div className="grid gap-6 py-4">
             {/* CSV Format Instructions */}
-            <Alert className="border-muted-foreground bg-[#F9F8FB]">
+            <Alert className="border-muted-foreground bg-bright-snow">
               <AlertDescription className="text-sm text-primary">
                 <strong>Required columns:</strong> Email, First Name, Last Name, Phone, Role
                 <br />
@@ -168,8 +168,8 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* File Upload Area */}
             <div
               className={`border-2 border-dashed rounded-2xl p-12 text-center transition-colors ${dragActive
-                ? 'border-muted-foreground bg-[#F9F8FB]'
+                ? 'border-muted-foreground bg-bright-snow'
-                : 'border-chart-6 hover:border-muted-foreground hover:bg-[#F9F8FB]'
+                : 'border-chart-6 hover:border-muted-foreground hover:bg-bright-snow'
                 }`}
               onDragEnter={handleDrag}
               onDragLeave={handleDrag}
@@ -178,7 +178,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             >
               {file ? (
                 <div className="flex flex-col items-center gap-4">
-                  <FileUp className="h-16 w-16 text-[#81B29A]" />
+                  <FileUp className="h-16 w-16 text-success" />
                   <div>
                     <p className="text-lg font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {file.name}
@@ -222,7 +222,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             </div>
 
             {/* Options */}
-            <div className="flex items-center gap-3 p-4 bg-[#F9F8FB] rounded-xl">
+            <div className="flex items-center gap-3 p-4 bg-bright-snow rounded-xl">
               <Checkbox
                 checked={updateExisting}
                 onCheckedChange={setUpdateExisting}
@@ -274,7 +274,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                     </TableHeader>
                     <TableBody>
                       {importResult.errors.map((error, idx) => (
-                        <TableRow key={idx} className="hover:bg-[#F9F8FB]">
+                        <TableRow key={idx} className="hover:bg-bright-snow">
                           <TableCell className="font-medium text-primary">{error.row}</TableCell>
                           <TableCell className="text-muted-foreground">{error.email}</TableCell>
                           <TableCell className="text-red-600 text-sm">{error.error}</TableCell>
@@ -301,7 +301,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
               </Button>
               <Button
                 onClick={handleSubmit}
-                className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+                className="rounded-xl bg-success hover:bg-muted-teal-balanced text-white"
                 disabled={loading || !file}
               >
                 {loading ? (
@@ -320,7 +320,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
           ) : (
             <Button
               onClick={handleClose}
-              className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+              className="rounded-xl bg-success hover:bg-muted-teal-balanced text-white"
             >
               Done
             </Button>

src/components/InviteStaffDialog.js

@@ -275,7 +275,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
               </Button>
               <Button
                 type="submit"
-                className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+                className="rounded-xl bg-success hover:bg-muted-teal-balanced text-white"
                 disabled={loading}
               >
                 {loading ? (
@@ -298,7 +298,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
           <DialogFooter>
             <Button
               onClick={handleClose}
-              className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+              className="rounded-xl bg-success hover:bg-muted-teal-balanced text-white"
             >
               Done
             </Button>

src/components/MemberRoute.js

@@ -19,8 +19,8 @@ const MemberRoute = ({ children }) => {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-[#FDFCF8]">
+      <div className="min-h-screen flex items-center justify-center bg-ghost-white">
-        <p className="text-[#6B708D]">Loading...</p>
+        <p className="text-slate-grey">Loading...</p>
       </div>
     );
   }

src/components/Navbar.js

@@ -26,7 +26,7 @@ const Navbar = () => {
   return (
     <>
       {/* Top Header - Member Actions (Desktop Only) */}
-      <header className="hidden lg:flex bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
+      <header className="hidden lg:flex bg-gradient-to-r from-dusty-grape to-foreground px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
         {user && (
           <span className="text-white text-base font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
             Welcome, {user.first_name}
@@ -53,7 +53,7 @@ const Navbar = () => {
         </button>
         <Link to="/donate">
           <Button
-            className="bg-accent hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
+            className="bg-accent hover:bg-coral-glow text-foreground rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
             style={{ fontFamily: "'Montserrat', sans-serif" }}
           >
             Donate
@@ -86,19 +86,19 @@ const Navbar = () => {
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
               <DropdownMenuItem asChild>
-                <Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-muted cursor-pointer"
+                <Link to="/about/history" className="w-full px-3 py-2 text-foreground hover:bg-muted cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   History
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-muted cursor-pointer"
+                <Link to="/about/mission-values" className="w-full px-3 py-2 text-foreground hover:bg-muted cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Mission and Values
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-muted cursor-pointer"
+                <Link to="/about/board" className="w-full px-3 py-2 text-foreground hover:bg-muted cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Board of Directors
                 </Link>
@@ -151,19 +151,19 @@ const Navbar = () => {
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
               <DropdownMenuItem asChild>
-                <Link to="/members/newsletters" className="w-full px-3 py-2 text-[#48286e] hover:bg-muted cursor-pointer"
+                <Link to="/members/newsletters" className="w-full px-3 py-2 text-foreground hover:bg-muted cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Newsletters
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/members/financials" className="w-full px-3 py-2 text-[#48286e] hover:bg-muted cursor-pointer"
+                <Link to="/members/financials" className="w-full px-3 py-2 text-foreground hover:bg-muted cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Financials
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/members/bylaws" className="w-full px-3 py-2 text-[#48286e] hover:bg-muted cursor-pointer"
+                <Link to="/members/bylaws" className="w-full px-3 py-2 text-foreground hover:bg-muted cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Bylaws
                 </Link>
@@ -200,7 +200,7 @@ const Navbar = () => {
           />
 
           {/* Drawer */}
-          <div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-muted-foreground to-[#48286e] shadow-2xl flex flex-col">
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-muted-foreground to-foreground shadow-2xl flex flex-col">
             {/* Header */}
             <div className="flex items-center justify-between p-6 border-b border-white/20">
               <div className="flex items-center gap-3">
@@ -383,7 +383,7 @@ const Navbar = () => {
                 onClick={() => setIsMobileMenuOpen(false)}
               >
                 <Button
-                  className="w-full bg-accent hover:bg-[#ff8c64] text-[#48286e] rounded-lg font-semibold"
+                  className="w-full bg-accent hover:bg-coral-glow text-foreground rounded-lg font-semibold"
                   style={{ fontFamily: "'Montserrat', sans-serif" }}
                 >
                   Donate

src/components/PaymentActivationDialog.js

@@ -234,7 +234,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Breakdown Display */}
           {breakdown && breakdown.total >= breakdown.base && (
-            <Card className="p-4 bg-[#f9f5ff] border border-chart-6">
+            <Card className="p-4 bg-lavender-mist border border-chart-6">
               <div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <div className="flex justify-between text-primary">
                   <span>Membership Fee:</span>
@@ -402,7 +402,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
             <Button
               type="submit"
               disabled={loading}
-              className="bg-[#81B29A] text-white hover:bg-[#6FA087] rounded-full"
+              className="bg-success text-white hover:bg-[#6FA087] rounded-full"
             >
               {loading ? 'Activating...' : 'Activate Payment'}
             </Button>

src/components/PendingInvitationsTable.js

@@ -74,7 +74,7 @@ const PendingInvitationsTable = () => {
   const getRoleBadge = (role) => {
     const config = {
       superadmin: { label: 'Superadmin', className: 'bg-muted-foreground text-white' },
-      admin: { label: 'Admin', className: 'bg-[#81B29A] text-white' },
+      admin: { label: 'Admin', className: 'bg-success text-white' },
       member: { label: 'Member', className: 'bg-chart-6 text-primary' }
     };
 
@@ -148,7 +148,7 @@ const PendingInvitationsTable = () => {
           </TableHeader>
           <TableBody>
             {invitations.map((invitation) => (
-              <TableRow key={invitation.id} className="hover:bg-[#F9F8FB]">
+              <TableRow key={invitation.id} className="hover:bg-bright-snow">
                 <TableCell className="font-medium text-primary">
                   {invitation.email}
                 </TableCell>
@@ -176,7 +176,7 @@ const PendingInvitationsTable = () => {
                       size="sm"
                       onClick={() => handleResend(invitation.id)}
                       disabled={resending === invitation.id}
-                      className="rounded-xl border-[#81B29A] text-[#81B29A] hover:bg-[#81B29A] hover:text-white"
+                      className="rounded-xl border-success text-success hover:bg-success hover:text-white"
                     >
                       {resending === invitation.id ? (
                         'Resending...'

src/components/PlanDialog.js

@@ -252,7 +252,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   onChange={(e) => setFormData({ ...formData, allow_donation: e.target.checked })}
                   className="sr-only peer"
                 />
-                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-muted-foreground/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#81B29A]"></div>
+                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-muted-foreground/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-success"></div>
               </label>
             </div>
           </div>
@@ -349,7 +349,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                 </div>
               </div>
 
-              <div className="bg-[#f9f5ff] border border-chart-6 rounded p-3">
+              <div className="bg-lavender-mist border border-chart-6 rounded p-3">
                 <p className="text-sm text-primary" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <strong>Example:</strong> Jan 1 - Dec 31 for calendar year, or Jul 1 - Jun 30 for fiscal year
                 </p>
@@ -373,7 +373,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                 onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
                 className="sr-only peer"
               />
-              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-muted-foreground/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#81B29A]"></div>
+              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-muted-foreground/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-success"></div>
             </label>
           </div>
 

src/components/PublicFooter.js

@@ -8,7 +8,7 @@ const PublicFooter = () => {
   return (
     <>
       {/* Main Footer */}
-      <footer className="bg-[#644c9f] border-t border-[rgba(0,0,0,0.1)] py-8 px-2  lg:px-10 flex items-center justify-between">
+      <footer className="bg-dusty-grape border-t border-[rgba(0,0,0,0.1)] py-8 px-2  lg:px-10 flex items-center justify-between">
         <div className=" flex flex-col md:flex-row gap-14 md:gap-2 lg:gap-32 xl:gap-40 items-center justify-center text-left md:justify-between w-full max-w-7xl mx-auto">
           <div className="w-40 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
             <img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
@@ -35,7 +35,7 @@ const PublicFooter = () => {
             <div className="flex flex-col gap-2 items-center justify-center md:items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
               <div className="pb-4 w-full flex justify-center lg:justify-start">
                 <Link to="/donate" className="block">
-                  <Button className="bg-accent hover:bg-[#ff8c64] text-[#48286e] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
+                  <Button className="bg-accent hover:bg-coral-glow text-foreground rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
                     Donate
                   </Button>
                 </Link>
@@ -49,7 +49,7 @@ const PublicFooter = () => {
       </footer>
 
       {/* Bottom Footer */}
-      <footer className="bg-gradient-to-r from-[#48286e] to-[#644c9f] border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-20 py-5">
+      <footer className="bg-gradient-to-r from-foreground to-dusty-grape border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-20 py-5">
         <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-between items-center max-w-7xl mx-auto">
           <nav className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center order-1 sm:order-none">
             <Link to="/terms-of-service" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>

src/components/PublicNavbar.js

@@ -46,7 +46,7 @@ const PublicNavbar = () => {
   const getDesktopLinkClasses = (path) => {
     const baseClasses = "text-[17.5px] font-medium transition-all px-3 py-1 rounded-md";
     if (isActive(path)) {
-      return `${baseClasses} text-accent hover:text-[#ff8c64] `;
+      return `${baseClasses} text-accent hover:text-coral-glow `;
     }
     return `${baseClasses} text-white hover:opacity-80`;
   };
@@ -55,18 +55,18 @@ const PublicNavbar = () => {
   const getMobileLinkClasses = (path) => {
     const baseClasses = "text-base font-medium px-4 py-3 rounded-md transition-colors";
     if (isActive(path)) {
-      return `${baseClasses} bg-accent hover:bg-[#ff8c64] text-[#48286e]`;
+      return `${baseClasses} bg-accent hover:bg-coral-glow text-foreground`;
     }
-    return `${baseClasses} text-white hover:bg-[#48286e]`;
+    return `${baseClasses} text-white hover:bg-foreground`;
   };
 
   // Active and inactive link styles for mobile sub-items (About Us)
   const getMobileSubLinkClasses = (path) => {
     const baseClasses = "text-sm font-medium px-6 py-2 rounded-md transition-colors block";
     if (isActive(path)) {
-      return `${baseClasses} bg-accent hover:bg-[#ff8c64] text-[#48286e]`;
+      return `${baseClasses} bg-accent hover:bg-coral-glow text-foreground`;
     }
-    return `${baseClasses} text-chart-6 hover:bg-[#48286e] hover:text-white`;
+    return `${baseClasses} text-chart-6 hover:bg-foreground hover:text-white`;
   };
 
   return (
@@ -74,7 +74,7 @@ const PublicNavbar = () => {
       {/* Top Header - Auth Actions */}
       <div className='sticky top-0 inset-x-0 z-50'>
 
-        <header className="bg-gradient-to-r flex-wrap from-[#644c9f] to-[#48286e] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
+        <header className="bg-gradient-to-r flex-wrap from-dusty-grape to-foreground px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
           <div className='flex gap-4 sm:gap-6'>
 
             <button
@@ -96,7 +96,7 @@ const PublicNavbar = () => {
           </div>
           <Link to="/donate">
             <Button
-              className="bg-accent hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
+              className="bg-accent hover:bg-coral-glow text-foreground rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
               style={{ fontFamily: "'Montserrat', sans-serif" }}
             >
               Donate
@@ -113,7 +113,7 @@ const PublicNavbar = () => {
           {/* Mobile Menu Button */}
           <button
             onClick={() => setIsMobileMenuOpen(true)}
-            className="lg:hidden p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
+            className="lg:hidden p-2 text-white hover:bg-foreground rounded-md transition-colors"
             aria-label="Open menu"
           >
             <Menu className="size-14" />
@@ -132,7 +132,7 @@ const PublicNavbar = () => {
               <DropdownMenuTrigger asChild>
                 <button
                   className={`${isAboutActive()
-                    ? "text-accent hover:text-[#ff8c64]"
+                    ? "text-accent hover:text-coral-glow"
                     : "text-white hover:opacity-80"} text-[17.5px] font-medium transition-all flex items-center gap-1 bg-transparent border-none cursor-pointer px-3 py-1 rounded-md`}
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   About Us
@@ -141,19 +141,19 @@ const PublicNavbar = () => {
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
                 <DropdownMenuItem asChild>
-                  <Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-muted cursor-pointer"
+                  <Link to="/about/history" className="w-full px-3 py-2 text-foreground hover:bg-muted cursor-pointer"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     History
                   </Link>
                 </DropdownMenuItem>
                 <DropdownMenuItem asChild>
-                  <Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-muted cursor-pointer"
+                  <Link to="/about/mission-values" className="w-full px-3 py-2 text-foreground hover:bg-muted cursor-pointer"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Mission and Values
                   </Link>
                 </DropdownMenuItem>
                 <DropdownMenuItem asChild>
-                  <Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-muted cursor-pointer"
+                  <Link to="/about/board" className="w-full px-3 py-2 text-foreground hover:bg-muted cursor-pointer"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Board of Directors
                   </Link>
@@ -206,13 +206,13 @@ const PublicNavbar = () => {
           {/* Drawer */}
           <div className="fixed right-0 top-0 h-full w-[280px] bg-muted-foreground shadow-xl overflow-y-auto">
             {/* Header */}
-            <div className="flex justify-between items-center p-6 border-b border-[#48286e]">
+            <div className="flex justify-between items-center p-6 border-b border-foreground">
               <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Menu
               </span>
               <button
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
+                className="p-2 text-white hover:bg-foreground rounded-md transition-colors"
                 aria-label="Close menu"
               >
                 <X className="h-5 w-5" />
@@ -303,13 +303,13 @@ const PublicNavbar = () => {
               </Link>
 
               {/* Auth Actions */}
-              <div className="pt-4 border-t border-[#48286e] space-y-2">
+              <div className="pt-4 border-t border-foreground space-y-2">
                 <button
                   onClick={() => {
                     handleAuthAction();
                     setIsMobileMenuOpen(false);
                   }}
-                  className="w-full text-left text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
+                  className="w-full text-left text-white text-base font-medium hover:bg-foreground px-4 py-3 rounded-md transition-colors"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 >
                   {user ? 'Logout' : 'Login'}
@@ -318,7 +318,7 @@ const PublicNavbar = () => {
                   <Link
                     to="/register"
                     onClick={() => setIsMobileMenuOpen(false)}
-                    className="block text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
+                    className="block text-white text-base font-medium hover:bg-foreground px-4 py-3 rounded-md transition-colors"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                   >
                     Register
@@ -329,7 +329,7 @@ const PublicNavbar = () => {
                   onClick={() => setIsMobileMenuOpen(false)}
                   className="block w-full"
                 >
-                  <Button className="w-full bg-accent hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-6 py-3 text-base font-semibold">
+                  <Button className="w-full bg-accent hover:bg-coral-glow text-foreground rounded-[25px] px-6 py-3 text-base font-semibold">
                     Donate
                   </Button>
                 </Link>

src/components/RejectionDialog.js

@@ -47,7 +47,7 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
         </DialogHeader>
 
         <div className="space-y-4 py-4">
-          <div className="bg-[#f9f5ff] border border-chart-6 rounded-lg p-4">
+          <div className="bg-lavender-mist border border-chart-6 rounded-lg p-4">
             <p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <strong>Applicant:</strong> {user?.email}
             </p>

src/components/WordPressImportWizard.js

@@ -376,7 +376,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                 </p>
             </div>
 
-            <Card className="p-6 border-2 border-dashed border-chart-6 bg-[#f9f5ff]">
+            <Card className="p-6 border-2 border-dashed border-chart-6 bg-lavender-mist">
                 <div className="flex flex-col items-center gap-4">
                     <Upload className="h-12 w-12 text-muted-foreground" />
                     <div className="text-center">
@@ -544,7 +544,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             </div>
 
             {/* Bulk edit toolbar */}
-            <Card className="p-4 bg-[#f9f5ff] border-chart-6">
+            <Card className="p-4 bg-lavender-mist border-chart-6">
                 <div className="flex items-center gap-4">
                     <Checkbox
                         checked={selectedRows.size === previewData.length && previewData.length > 0}
@@ -578,7 +578,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                 <div className="border rounded-lg overflow-hidden">
                     <Table>
                         <TableHeader>
-                            <TableRow className="bg-[#f9f5ff]">
+                            <TableRow className="bg-lavender-mist">
                                 <TableHead className="w-12">
                                     <Checkbox checked={false} />
                                 </TableHead>

src/components/registration/RegistrationStep1.js

@@ -97,7 +97,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
             required
             value={formData.address}
             onChange={handleInputChange}
-            className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+            className="h-14 rounded-xl border-2 border-almond-cream focus:border-burnt-peach"
             data-testid="address-input"
           />
         </div>

src/components/registration/RegistrationStepIndicator.js

@@ -22,7 +22,7 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
                 ${currentStep === step.number
                   ? 'bg-accent text-white scale-110 shadow-lg'
                   : currentStep > step.number
-                    ? 'bg-[#81B29A] text-white'
+                    ? 'bg-success text-white'
                     : 'bg-chart-6 text-muted-foreground'
                 }
               `}>
@@ -42,7 +42,7 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
                 <div
                   className={`
                     h-full transition-all duration-500
-                    ${currentStep > step.number ? 'bg-[#81B29A] w-full' : 'bg-transparent w-0'}
+                    ${currentStep > step.number ? 'bg-success w-full' : 'bg-transparent w-0'}
                   `}
                 />
               </div>

src/components/ui/password-input.jsx

@@ -1,9 +1,9 @@
-import * as React from "react"
+import * as React from "react";
-import { Eye, EyeOff } from "lucide-react"
+import { Eye, EyeOff } from "lucide-react";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
-  const [showPassword, setShowPassword] = React.useState(false)
+  const [showPassword, setShowPassword] = React.useState(false);
 
   return (
     <div className="relative">
@@ -19,7 +19,7 @@ const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
       <button
         type="button"
         onClick={() => setShowPassword(!showPassword)}
-        className="absolute right-3 top-1/2 -translate-y-1/2 text-[#6B708D] hover:text-[#3D405B] transition-colors focus:outline-none"
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-grey hover:text-[#3D405B] transition-colors focus:outline-none"
         tabIndex={-1}
       >
         {showPassword ? (
@@ -29,8 +29,8 @@ const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
         )}
       </button>
     </div>
-  )
+  );
-})
+});
-PasswordInput.displayName = "PasswordInput"
+PasswordInput.displayName = "PasswordInput";
 
-export { PasswordInput }
+export { PasswordInput };

src/index.css

@@ -22,8 +22,104 @@ code {
 
 @layer base {
   :root {
+    /* =========================
+     Brand Colors
+     ========================= */
+    --brand-dark-lavender: 267 47% 29%;
+    --brand-purple: 256 35% 47%;
+    --brand-lavender: 262 46% 80%;
+    --brand-light-lavender: 256 32% 88%;
+    --brand-white: 0 0% 100%;
+
+    --brand-dark-orange: 13 100% 42%;
+    --brand-orange: 24 86% 55%;
+    --brand-light-orange: 24 100% 67%;
+
+    --brand-pink: 324 55% 60%;
+    --dusty-pink: 323 39% 52%;
+    --dark-rose: 324 98% 32%;
+
+    /* ==================================
+     Additional Colors (AI generated)
+     ================================== */
+
+    --tangerine-dream: 18 74% 65%;
+    --rebecca-purple: 259 39% 39%;
+    --dusty-grape: 257, 35%, 46%; /*#644c9f*/
+
+    /* Muted Teal Family */
+    --muted-teal-base: 150 21% 53%;
+    --muted-teal-balanced: 148 21% 53%; /* better version */
+    --muted-teal-dark: 150 17% 50%; /* darker / desaturated */
+    --muted-teal-light: 151 24% 60%; /* lighter shade */
+
+    --bright-snow: 260 27% 98%; /* bright-snow in repo close to F9F8FC = 255 33% 98%*/
+    --slate-grey: 231 14% 49%;
+    --coral-glow: 15 100% 70%;
+    --lavender-mist: 264 100% 98%;
+    --almond-cream: 31 33% 88%;
+    --lavender-blush: 351 100% 96%;
+    --burnt-peach: 13 68% 63%;
+    --apricot-cream: 37 79% 75%;
+    --ghost-white: 255 33% 98%;
+    
+
+    /* 
+
+
+ #664fa3,
+ #644c9f, 
+ #FDFCF8, - porcelain
+ #6FA087, 
+ #c5b4e3, 
+ #3D405B, 
+ #5A8F72, 
+ #4f378a, 
+ #eeebf4, 
+ #F9FAFB, 
+ #e8e0f5, 
+ #eaedf4, 
+ #865edf, 
+ #E8F5E9, 
+ #DCD7EA, 
+ #ddd8eb, 
+ #FFFFFF, 
+ #422268, 
+ #6a9a83, 
+ #d16b54, 
+ #e8bf7a, 
+ #4CAF50, 
+ #533a82, 
+ #C5BFD9, 
+ #FFF3E0, 
+ #f9fafb, 
+ #f9f7fc, 
+ #f1eef9, 
+ #fafafa, 
+ #DDD8EB, 
+ #81B29A, 
+ #66927e, 
+ #9ca3af, 
+ #6b7280, 
+ #fb923c, 
+ #ea580c, 
+ #c4bed8, 
+ #1877F2, 
+ #E4405F, 
+ #1DA1F2, 
+ #0A66C2, 
+ #ff8c5a, 
+ #664ea2, 
+ #5a4290, 
+ #e88a63
+
+
+
+*/
+
+    /* Theme */
     --background: 0 0% 100%;
-    --foreground: 280 47% 27%;
+    --foreground: var(--brand-dark-lavender);
     --card: 0 0% 100%;
     --card-foreground: 280 47% 27%;
     --popover: 0 0% 100%;
@@ -38,6 +134,8 @@ code {
     --accent-foreground: 280 47% 27%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
+    --success: var(--muted-teal-light);
+    --success-foreground: 0 0% 100%;
     --border: 268 33% 89%;
     --input: 268 33% 89%;
     --ring: 268 35% 47%;
@@ -47,25 +145,23 @@ code {
     --chart-4: 280 44% 29%;
     --chart-5: 268 35% 47%;
     --chart-6: 256 32% 88%;
-    --chart-7: 255 33% 98%;
+    --chart-7: var(--ghost-white);
     --radius: 0.5rem;
   }
   .dark {
-    --background: 0 0% 3.9%;
+    --background: var(--brand-dark-lavender);
-    --foreground: 0 0% 98%;
+    --foreground: var(--bright-snow);
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
     --popover: 0 0% 3.9%;
     --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
     --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
+    --secondary: var(--brand-purple);
-    --secondary-foreground: 0 0% 98%;
+    --secondary-foreground: 280 47% 27%;
     --muted: 0 0% 14.9%;
     --muted-foreground: 0 0% 63.9%;
-    /* --accent: 0 0% 14.9%;
+    --accent: var(--brand-lavender);
-    --accent-foreground: 0 0% 98%; */
-    --accent: 17 100% 73%;
     --accent-foreground: 280 47% 27%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
@@ -78,7 +174,7 @@ code {
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
     --chart-6: 0 0% 14.9%;
-    --chart-7: 0 0% 14.9%;
+    --chart-7: var(--ghost-white);
   }
 }
 

src/pages/AcceptInvitation.js

@@ -164,7 +164,7 @@ const AcceptInvitation = () => {
   const getRoleBadge = (role) => {
     const config = {
       superadmin: { label: 'Superadmin', className: 'bg-muted-foreground text-white' },
-      admin: { label: 'Admin', className: 'bg-[#81B29A] text-white' },
+      admin: { label: 'Admin', className: 'bg-success text-white' },
       member: { label: 'Member', className: 'bg-chart-6 text-primary' }
     };
 
@@ -179,7 +179,7 @@ const AcceptInvitation = () => {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
+      <div className="min-h-screen bg-gradient-to-br from-bright-snow to-white flex items-center justify-center p-4">
         <Card className="w-full max-w-md p-12 bg-background rounded-2xl border border-chart-6 text-center">
           <Loader2 className="h-12 w-12 text-muted-foreground mx-auto mb-4 animate-spin" />
           <p className="text-lg text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -192,7 +192,7 @@ const AcceptInvitation = () => {
 
   if (error) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
+      <div className="min-h-screen bg-gradient-to-br from-bright-snow to-white flex items-center justify-center p-4">
         <Card className="w-full max-w-md p-12 bg-background rounded-2xl border border-chart-6 text-center">
           <XCircle className="h-16 w-16 text-red-500 mx-auto mb-6" />
           <h1 className="text-2xl font-semibold text-primary mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -216,11 +216,11 @@ const AcceptInvitation = () => {
     const redirectPath = successUser?.role === 'admin' || successUser?.role === 'superadmin' ? '/admin' : '/dashboard';
 
     return (
-      <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
+      <div className="min-h-screen bg-gradient-to-br from-bright-snow to-white flex items-center justify-center p-4">
         <Card className="w-full max-w-2xl p-12 bg-background rounded-2xl border border-chart-6 text-center">
           {/* Success Animation */}
           <div className="mb-8">
-            <div className="h-24 w-24 mx-auto rounded-full bg-gradient-to-br from-[#81B29A] to-[#6DA085] flex items-center justify-center animate-bounce">
+            <div className="h-24 w-24 mx-auto rounded-full bg-gradient-to-br from-success to-muted-teal-balanced flex items-center justify-center animate-bounce">
               <CheckCircle className="h-12 w-12 text-white" />
             </div>
           </div>
@@ -234,7 +234,7 @@ const AcceptInvitation = () => {
           </p>
 
           {/* User Info Card */}
-          <div className="mb-8 p-6 bg-gradient-to-r from-chart-6 to-[#F9F8FB] rounded-xl">
+          <div className="mb-8 p-6 bg-gradient-to-r from-chart-6 to-bright-snow rounded-xl">
             <div className="grid md:grid-cols-2 gap-4 text-left">
               <div>
                 <p className="text-sm text-muted-foreground mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -262,7 +262,7 @@ const AcceptInvitation = () => {
                 <p className="text-sm text-muted-foreground mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Status
                 </p>
-                <Badge className="bg-[#81B29A] text-white px-4 py-2 rounded-full text-sm">
+                <Badge className="bg-success text-white px-4 py-2 rounded-full text-sm">
                   {successUser?.status}
                 </Badge>
               </div>
@@ -280,7 +280,7 @@ const AcceptInvitation = () => {
           {/* Manual Continue Button */}
           <Button
             onClick={() => navigate(redirectPath)}
-            className="w-full h-14 rounded-xl bg-gradient-to-r from-[#81B29A] to-[#6DA085] hover:from-[#6DA085] hover:to-[#5A8F72] text-white text-lg font-semibold"
+            className="w-full h-14 rounded-xl bg-gradient-to-r from-success to-muted-teal-balanced hover:from-muted-teal-balanced hover:to-[#5A8F72] text-white text-lg font-semibold"
           >
             Continue to Dashboard
           </Button>
@@ -290,7 +290,7 @@ const AcceptInvitation = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gradient-to-br from-bright-snow to-white flex items-center justify-center p-4">
       <Card className="w-full max-w-3xl p-8 md:p-12 bg-background rounded-2xl border border-chart-6">
         {/* Header */}
         <div className="text-center mb-8">
@@ -308,7 +308,7 @@ const AcceptInvitation = () => {
         </div>
 
         {/* Invitation Details */}
-        <div className="mb-8 p-6 bg-gradient-to-r from-chart-6 to-[#F9F8FB] rounded-xl">
+        <div className="mb-8 p-6 bg-gradient-to-r from-chart-6 to-bright-snow rounded-xl">
           <div className="grid md:grid-cols-2 gap-4 text-sm">
             <div>
               <p className="text-muted-foreground mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -507,7 +507,7 @@ const AcceptInvitation = () => {
             <Button
               type="submit"
               disabled={submitting}
-              className="w-full h-14 rounded-xl bg-gradient-to-r from-[#81B29A] to-[#6DA085] hover:from-[#6DA085] hover:to-[#5A8F72] text-white text-lg font-semibold"
+              className="w-full h-14 rounded-xl bg-gradient-to-r from-success to-muted-teal-balanced hover:from-muted-teal-balanced hover:to-[#5A8F72] text-white text-lg font-semibold"
             >
               {submitting ? (
                 <>

src/pages/BecomeMember.js

@@ -29,13 +29,13 @@ const BecomeMember = () => {
       <div className="relative bg-gray-50 pt-20 px-6 pb-16">
         <div className="max-w-7xl mx-auto text-center">
           <h1
-            className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.96px]"
+            className="text-3xl sm:text-4xl md:text-5xl font-bold text-foreground mb-6 sm:mb-8 leading-[1.2] tracking-[-0.96px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Become a Member
           </h1>
           <p
-            className="text-base sm:text-lg font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
+            className="text-base sm:text-lg font-medium text-foreground max-w-2xl mx-auto leading-[1.6]"
             style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
           >
             Become a member to receive our monthly newsletter and find out about all the activities LOAF has planned each month. LOAF hosts over 40 social activities each year and occasionally covers the costs for members only
@@ -55,13 +55,13 @@ const BecomeMember = () => {
           </div>
           <div className="flex-1 bg-[#eeebf4] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
             <h3
-              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-foreground mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
               style={{ fontFamily: "'Poppins', sans-serif" }}
             >
               Annual Administrative Fees
             </h3>
             <p
-              className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
+              className="text-base sm:text-lg font-medium text-foreground leading-[1.6]"
               style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
             >
               Annual Administrative Fees for all members are $30 per person. These fees help cover general business expenses (website, advertising, e-newsletter).
@@ -82,13 +82,13 @@ const BecomeMember = () => {
         </div>
         <div className="max-w-7xl mx-auto px-6 mb-24 text-center">
           <h2
-            className="text-2xl sm:text-3xl md:text-[40px] font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
+            className="text-2xl sm:text-3xl md:text-[40px] font-bold text-foreground mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Membership Process
           </h2>
           <p
-            className="text-base sm:text-lg md:text-xl lg:text-2xl lg:font-semibold font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
+            className="text-base sm:text-lg md:text-xl lg:text-2xl lg:font-semibold font-medium text-foreground max-w-2xl mx-auto leading-[1.6]"
             style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
           >
             Becoming a member is easy, but for the safety and privacy of our membership, there are a few steps:
@@ -108,13 +108,13 @@ const BecomeMember = () => {
             </div>
             <div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
-                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-foreground mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
               >
                 Step 1: Application & Email Confirmation
               </h3>
               <p
-                className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
+                className="text-base sm:text-lg font-medium text-foreground leading-[1.6]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
               >
                 Complete the online application form and submit it. Check your email for a confirmation link and use it to verify your email. You will then begin to receive LOAF's monthly e-newsletter where all of the social events are listed. Your application will remain pending, and you won't be able to log into the Members Only section of the website until step 2 is complete and you are validated by an admin.
@@ -138,13 +138,13 @@ const BecomeMember = () => {
             </div>
             <div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
-                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-foreground mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
               >
                 Step 2: Attend an event and meet us!
               </h3>
               <p
-                className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
+                className="text-base sm:text-lg font-medium text-foreground leading-[1.6]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
               >
                 You have 3 months to attend a LOAF event and introduce yourself to a board member. If you do not attend an event within 3 months, you will no longer receive the e-newsletter. (This step can be skipped if you have been referred from a current member and list her on your registration form).
@@ -167,13 +167,13 @@ const BecomeMember = () => {
             </div>
             <div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
-                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-foreground mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
               >
                 Step 3: Login and pay the annual fee
               </h3>
               <p
-                className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
+                className="text-base sm:text-lg font-medium text-foreground leading-[1.6]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
               >
                 Once we know that you are indeed you, an admin will validate your application and you will receive an email prompting you to login to your user profile and pay the annual administrative fee.
@@ -195,7 +195,7 @@ const BecomeMember = () => {
                 className="w-full h-full object-contain"
               />
             </div>
-            <div className="flex-1 bg-gradient-to-r from-[#48286e] to-muted-foreground rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+            <div className="flex-1 bg-gradient-to-r from-foreground to-muted-foreground rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
                 className="text-xl sm:text-2xl md:text-[32px] font-semibold text-white mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
@@ -216,14 +216,14 @@ const BecomeMember = () => {
       <div className="relative bg-gray-50 py-16 ">
         <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-center gap-12 text-center">
           <h2
-            className="text-2xl sm:text-3xl md:text-[40px] content-center font-bold text-[#48286e]  leading-[1.2] tracking-[-0.8px]"
+            className="text-2xl sm:text-3xl md:text-[40px] content-center font-bold text-foreground  leading-[1.2] tracking-[-0.8px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Ready to Join Us?
           </h2>
           <Link to="/register">
             <Button
-              className="bg-muted-foreground text-white hover:bg-[#48286e] rounded-[35px] px-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-[19px] sm:text-lg font-medium tracking-[-0.09px] leading-5 h-auto"
+              className="bg-muted-foreground text-white hover:bg-foreground rounded-[35px] px-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-[19px] sm:text-lg font-medium tracking-[-0.09px] leading-5 h-auto"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Register Now!

src/pages/BoardOfDirectors.js

@@ -25,7 +25,7 @@ const BoardOfDirectors = () => {
         <div className="mx-auto bg-background rounded-3xl p-10 shadow-lg h-full">
           {title && (
             <h2
-              className="text-2xl sm:text-4xl font-bold text-[#48286e] text-center mb-8"
+              className="text-2xl sm:text-4xl font-bold text-foreground text-center mb-8"
               style={{ fontFamily: "'Poppins', sans-serif" }}
             >
               {title}
@@ -43,10 +43,10 @@ const BoardOfDirectors = () => {
                 <Card
                   key={`${name}-${index}`}
                   style={{ fontFamily: "'Poppins', sans-serif" }}
-                  className="bg-[#eeebf4] text-[#48286e] text-center px-6 py-5 rounded-3xl border border-white/70 shadow-sm"
+                  className="bg-[#eeebf4] text-foreground text-center px-6 py-5 rounded-3xl border border-white/70 shadow-sm"
                 >
                   <div className="min-h-16">
-                    <p className="text-xl font-bold text-[#48286e]">
+                    <p className="text-xl font-bold text-foreground">
                       {name}
                     </p>
 
@@ -73,7 +73,7 @@ const BoardOfDirectors = () => {
         {/* Hero Section  */}
         <section className=" pt-16 pb-4 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
           <div className="max-w-5xl mx-auto text-center px-8">
-            <h1 className="text-2xl sm:text-3xl md:text-[40px] leading-[1.2] text-[#48286e] font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-2xl sm:text-3xl md:text-[40px] leading-[1.2] text-foreground font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               LOAF Board of Directors 2025
             </h1>
 
@@ -81,7 +81,7 @@ const BoardOfDirectors = () => {
         </section>
         {/* Contact Info */}
         <section className="flex justify-center mt-4 mb-8">
-          <div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-muted-foreground to-[#48286e] max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">
+          <div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-muted-foreground to-foreground max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">
 
             <p className="text-white text-xl font-bold " style={{ fontFamily: "'Poppins', sans-serif" }}>
               For any questions or inquiries please email us at{' '}
@@ -105,19 +105,19 @@ const BoardOfDirectors = () => {
         <section className="py-12 bg-background mt-12 ">
           {/* content containter */}
           <div className="w-full mx-auto flex flex-col px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
-            <h2 className="text-xl mx-auto  sm:text-2xl md:text-4xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <h2 className="text-xl mx-auto  sm:text-2xl md:text-4xl font-bold text-foreground text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
               Join the Board of Directors
             </h2>
-            <p className="lg:text-2xl text-md md:text-lg max-w-4xl mx-auto justify-center font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="lg:text-2xl text-md md:text-lg max-w-4xl mx-auto justify-center font-bold text-foreground text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Our elections take place at our December holiday social. Here are some things to know if you are thinking about serving on the Board of Directors.
             </p>
             {/* card */}
             <Card className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg mx-auto border border-white/70">
-              <ol className="list-decimal list-inside space-y-4 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <ol className="list-decimal list-inside space-y-4 text-lg text-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <li>
                   Nominations are due by November 1. Nomination Form:{' '}
                   <a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer"
-                    className="text-muted-foreground underline hover:text-[#48286e] transition-colors">
+                    className="text-muted-foreground underline hover:text-foreground transition-colors">
                     Click Here
                   </a>
                 </li>
@@ -139,7 +139,7 @@ const BoardOfDirectors = () => {
                     href="https://loaftx.org/bylaws/"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-[#48286e] underline"
+                    className="text-foreground underline"
                   >
                     https://loaftx.org/bylaws/
                   </a>

src/pages/ChangePasswordRequired.js

@@ -89,7 +89,7 @@ const ChangePasswordRequired = () => {
       <div className="max-w-md mx-auto px-6 py-12">
         <Card className="p-8 md:p-12 bg-background rounded-2xl border border-chart-6 shadow-lg">
           <div className="mb-8 text-center">
-            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#FFEBEE] mb-4">
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-lavender-blush mb-4">
               <AlertTriangle className="h-8 w-8 text-orange-500" />
             </div>
             <h1 className="text-4xl md:text-5xl font-semibold text-primary mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>

src/pages/ContactUs.js

@@ -104,7 +104,7 @@ const ContactUs = () => {
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
             {/* Contact Form */}
             <Card className="p-8 bg-background rounded-2xl">
-              <h1 className="text-2xl sm:text-[28px] leading-5 font-bold text-[#48286e] mb-12" style={{ fontFamily: "'Poppins', sans-serif" }}>
+              <h1 className="text-2xl sm:text-[28px] leading-5 font-bold text-foreground mb-12" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 Contact Form
               </h1>
 
@@ -112,7 +112,7 @@ const ContactUs = () => {
                 {/* First Name & Last Name */}
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <Label htmlFor="firstName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <Label htmlFor="firstName" className="text-foreground font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                       First Name <span className="text-red-500">*</span>
                     </Label>
                     <Input
@@ -126,7 +126,7 @@ const ContactUs = () => {
                     />
                   </div>
                   <div>
-                    <Label htmlFor="lastName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <Label htmlFor="lastName" className="text-foreground font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Last Name <span className="text-red-500">*</span>
                     </Label>
                     <Input
@@ -143,7 +143,7 @@ const ContactUs = () => {
 
                 {/* Email */}
                 <div>
-                  <Label htmlFor="email" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="email" className="text-foreground font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Email <span className="text-red-500">*</span>
                   </Label>
                   <Input
@@ -160,7 +160,7 @@ const ContactUs = () => {
 
                 {/* Subject */}
                 <div>
-                  <Label htmlFor="subject" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="subject" className="text-foreground font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Subject <span className="text-red-500">*</span>
                   </Label>
                   <Input
@@ -176,7 +176,7 @@ const ContactUs = () => {
 
                 {/* Message */}
                 <div>
-                  <Label htmlFor="message" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="message" className="text-foreground font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Your Message <span className="text-red-500">*</span>
                   </Label>
                   <Textarea
@@ -198,7 +198,7 @@ const ContactUs = () => {
                     onCheckedChange={handleConsentChange}
                     className="mt-1 border-2 border-chart-6 data-[state=checked]:bg-muted-foreground data-[state=checked]:border-muted-foreground"
                   />
-                  <Label htmlFor="consent" className="text-[#48286e] text-sm font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Label htmlFor="consent" className="text-foreground text-sm font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     I consent to LOAF storing my submitted information so they can respond to my inquiry <span className="text-red-500">*</span>
                   </Label>
                 </div>
@@ -207,7 +207,7 @@ const ContactUs = () => {
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="w-full bg-muted-foreground hover:bg-[#48286e] text-white rounded-full py-6 text-lg font-semibold disabled:opacity-50"
+                  className="w-full bg-muted-foreground hover:bg-foreground text-white rounded-full py-6 text-lg font-semibold disabled:opacity-50"
                   style={{ fontFamily: "'Inter', sans-serif" }}
                 >
                   {loading ? (
@@ -225,7 +225,7 @@ const ContactUs = () => {
             {/* Contact Information */}
             <div className="space-y-6">
               {/* Message Card */}
-              <Card className="p-8 bg-gradient-to-r from-muted-foreground to-[#48286e] rounded-2xl shadow-lg text-white">
+              <Card className="p-8 bg-gradient-to-r from-muted-foreground to-foreground rounded-2xl shadow-lg text-white">
                 <p className="text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
                   If you have questions, or are interested in joining, we would love hearing from you.
                 </p>
@@ -240,7 +240,7 @@ const ContactUs = () => {
                   <div>
                     <a
                       href="mailto:info@loaftx.org"
-                      className="text-[#865edf] text-xl font-semibold hover:text-[#48286e] transition-colors"
+                      className="text-[#865edf] text-xl font-semibold hover:text-foreground transition-colors"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       info@loaftx.org
@@ -256,10 +256,10 @@ const ContactUs = () => {
                     <PiMapTrifoldBold className="size-12 text-muted-foreground" />
                   </div>
                   <div>
-                    <p className="text-[#48286e] text-[28px] font-semibold mb-1" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                    <p className="text-foreground text-[28px] font-semibold mb-1" style={{ fontFamily: "'Poppins', sans-serif" }}>
                       LOAF
                     </p>
-                    <p className="text-[#48286e] text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                    <p className="text-foreground text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
                       P.O. Box 7207<br />
                       Houston, Texas 77248-7207
                     </p>

src/pages/Dashboard.js

@@ -74,9 +74,9 @@ const Dashboard = () => {
     const statusConfig = {
       pending_email: { icon: Clock, label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
       pending_validation: { icon: Clock, label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { icon: CheckCircle, label: 'Pre-Validated', className: 'bg-[#81B29A] text-white' },
+      pre_validated: { icon: CheckCircle, label: 'Pre-Validated', className: 'bg-success text-white' },
       payment_pending: { icon: AlertCircle, label: 'Payment Pending', className: 'bg-orange-500 text-white' },
-      active: { icon: CheckCircle, label: 'Active', className: 'bg-[#81B29A] text-white' },
+      active: { icon: CheckCircle, label: 'Active', className: 'bg-success text-white' },
       inactive: { icon: AlertCircle, label: 'Inactive', className: 'bg-gray-400 text-white' },
       canceled: { icon: AlertCircle, label: 'Canceled', className: 'bg-red-100 text-red-700' },
       expired: { icon: Clock, label: 'Expired', className: 'bg-red-500 text-white' },
@@ -342,8 +342,8 @@ const Dashboard = () => {
                 </Card>
                 <Card className="p-6 bg-background rounded-2xl border border-chart-6">
                   <div className="flex items-center gap-4">
-                    <div className="bg-[#81B29A]/20 p-4 rounded-lg">
+                    <div className="bg-success/20 p-4 rounded-lg">
-                      <CheckCircle className="h-8 w-8 text-[#81B29A]" />
+                      <CheckCircle className="h-8 w-8 text-success" />
                     </div>
                     <div>
                       <p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Events Attended</p>
@@ -375,7 +375,7 @@ const Dashboard = () => {
                               <p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
                             </div>
                             <Badge className={
-                              event.rsvp_status === 'yes' ? 'bg-[#81B29A] text-white' :
+                              event.rsvp_status === 'yes' ? 'bg-success text-white' :
                                 event.rsvp_status === 'maybe' ? 'bg-orange-100 text-orange-700' :
                                   'bg-gray-200 text-gray-700'
                             }>
@@ -408,7 +408,7 @@ const Dashboard = () => {
                             </p>
                           </div>
                           <div className="flex flex-col items-end gap-2">
-                            <Badge className={event.attended ? 'bg-[#81B29A] text-white' : 'bg-gray-200 text-gray-700'}>
+                            <Badge className={event.attended ? 'bg-success text-white' : 'bg-gray-200 text-gray-700'}>
                               {event.attended ? 'Attended' : 'Did not attend'}
                             </Badge>
                             {event.attended && event.attended_at && (

src/pages/Donate.js

@@ -65,10 +65,10 @@ const Donate = () => {
             <div className="flex justify-center mb-4">
               <img src={loafHearts} alt="Hearts" className="w-32 h-auto" onError={(e) => e.target.style.display = 'none'} />
             </div>
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-foreground mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Donate
             </h1>
-            <p className="text-xl text-[#48286e] font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <p className="text-xl text-foreground font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
               We really appreciate your donations. You can make your donation online
               or send a check by mail.
             </p>
@@ -85,7 +85,7 @@ const Donate = () => {
                 <Card className="p-8 bg-background rounded-3xl w-full h-full content-center">
                   <div className="flex items-center gap-4 mb-6">
                     <CreditCard className="size-24 text-muted-foreground" />
-                    <h2 className="text-3xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <h2 className="text-3xl font-bold text-foreground" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Select Your Donation Amount
                     </h2>
                   </div>
@@ -97,7 +97,7 @@ const Donate = () => {
                         key={amount}
                         onClick={() => handleDonateAmount(amount * 100)}
                         disabled={processingAmount === amount * 100}
-                        className="bg-muted-foreground hover:bg-[#48286e] text-white text-xl py-8 rounded-full disabled:opacity-50"
+                        className="bg-muted-foreground hover:bg-foreground text-white text-xl py-8 rounded-full disabled:opacity-50"
                       >
                         {processingAmount === amount * 100 ? (
                           <Loader2 className="h-6 w-6 animate-spin" />
@@ -112,7 +112,7 @@ const Donate = () => {
                   <Button
                     onClick={() => setCustomAmountDialogOpen(true)}
                     disabled={processingAmount !== null}
-                    className="w-full bg-muted-foreground hover:bg-[#48286e] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
+                    className="w-full bg-muted-foreground hover:bg-foreground text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
                   >
                     <Heart className="h-6 w-6" />
                     Donate Any Amount
@@ -134,10 +134,10 @@ const Donate = () => {
                     <Mail className="size-24 text-muted-foreground" />
 
                     <div>
-                      <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <h3 className="text-2xl font-bold text-foreground mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                         Mail a Check
                       </h3>
-                      <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-lg text-foreground leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Our mailing address for checks:<br />
                         <span className="font-semibold">LOAF</span><br />
                         P.O. Box 7207<br />
@@ -153,14 +153,14 @@ const Donate = () => {
                     </div>
 
                     <div>
-                      <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <h3 className="text-2xl font-bold text-foreground mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                         Pay with Zelle
                       </h3>
-                      <p className="text-lg text-[#48286e] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-lg text-foreground leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         If your bank allows the use of Zelle, please feel free to send money to:
                       </p>
                       <a href="mailto:LOAFHoustonTX@gmail.com"
-                        className="text-muted-foreground text-lg font-bold underline hover:text-[#48286e] transition-colors"
+                        className="text-muted-foreground text-lg font-bold underline hover:text-foreground transition-colors"
                         style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         LOAFHoustonTX@gmail.com
                       </a>
@@ -239,7 +239,7 @@ const Donate = () => {
             <Button
               type="button"
               onClick={handleCustomDonate}
-              className="bg-muted-foreground text-white hover:bg-[#48286e] rounded-full"
+              className="bg-muted-foreground text-white hover:bg-foreground rounded-full"
             >
               Continue to Payment
             </Button>

src/pages/DonationSuccess.js

@@ -26,8 +26,8 @@ const DonationSuccess = () => {
                 onError={(e) => e.target.style.display = 'none'}
               />
             </div>
-            <div className="inline-flex items-center justify-center w-20 h-20 bg-[#81B29A]/10 rounded-full mb-6">
+            <div className="inline-flex items-center justify-center w-20 h-20 bg-success/10 rounded-full mb-6">
-              <CheckCircle className="h-12 w-12 text-[#81B29A]" />
+              <CheckCircle className="h-12 w-12 text-success" />
             </div>
 
             {/* Title */}

src/pages/EventDetails.js

@@ -84,7 +84,7 @@ const EventDetails = () => {
               {event.user_rsvp_status && (
                 <Badge
                   className={`px-4 py-2 rounded-full text-sm ${event.user_rsvp_status === 'yes'
-                    ? 'bg-[#81B29A] text-white'
+                    ? 'bg-success text-white'
                     : event.user_rsvp_status === 'no'
                       ? 'bg-gray-400 text-white'
                       : 'bg-orange-100 text-orange-700'
@@ -154,7 +154,7 @@ const EventDetails = () => {
                 onClick={() => handleRSVP('yes')}
                 disabled={rsvpLoading}
                 className={`rounded-full px-8 py-6 flex items-center gap-2 ${event.user_rsvp_status === 'yes'
-                  ? 'bg-[#81B29A] text-white'
+                  ? 'bg-success text-white'
                   : 'bg-chart-6 text-primary hover:bg-background'
                   }`}
                 data-testid="rsvp-yes-button"

src/pages/Events.js

@@ -30,7 +30,7 @@ const Events = () => {
     if (!rsvpStatus) return null;
 
     const config = {
-      yes: { label: 'Going', className: 'bg-[#81B29A] text-white' },
+      yes: { label: 'Going', className: 'bg-success text-white' },
       no: { label: 'Not Going', className: 'bg-gray-400 text-white' },
       maybe: { label: 'Maybe', className: 'bg-orange-100 text-orange-700' }
     };

src/pages/History.js

@@ -23,13 +23,13 @@ const CardSection = ({ children, className = '', arrow = true }) => (
 );
 
 const Title = ({ children }) => (
-  <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+  <h2 className="text-3xl font-bold text-foreground mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
     {children}
   </h2>
 );
 
 const Paragragh = ({ children }) => (
-  <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+  <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
     {children}
   </p>
 );
@@ -50,11 +50,11 @@ const History = () => {
         {/* Hero Section */}
         <section className="py-12">
           <div className="max-w-3xl mx-auto flex justify-around mb-12 flex-col gap-6 items-center lg:flex-row">
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-[#48286e] "
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground "
               style={{ fontFamily: "'Poppins', sans-serif" }}>
               History of LOAF
             </h1>
-            <div className="flex items-center justify-center gap-6 text-[#48286e]">
+            <div className="flex items-center justify-center gap-6 text-foreground">
               <Pen className="size-7" />
               <p className="text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 By Arden Eversmeyer
@@ -69,19 +69,19 @@ const History = () => {
             <div className="md:w-1/3 ">
               <img src={ardenCharlotteImg} alt="Arden Eversmeyer and Charlotte Avery"
                 className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
-              <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-foreground mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Arden Eversmeyer and Charlotte Avery
               </p>
             </div>
             <div className="md:w-2/3">
               <Title>Part 1</Title>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In 1985 my life partner of 33 years died. For many years we had been part of a large “friendship group”, many of whom had been together longer than we had. But I was the first to lose a partner. After a few months I began to feel the need to explore community. Already retired, the necessity of being closeted was gone. I soon discovered there was no group for mid-life an old lesbians in Houston, and began the search for such groups around the U.S.
               </p>
-              <p className="text-md mb-4 text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md mb-4 text-foreground leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In April of 1987 I loaded my camper and headed for California. I started in San Diego, and worked my way up the coast to San Francisco finding and visiting senior LGBT groups. I came home with much information, and some suggestions about organizing. One fact that was consistent with all the groups was that if the group was for both men and women - the women dropped out. The recommendation was to start a group for women only.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>I had become friends with some young lesbians here in Houston who knew the Gay community. We started meeting and brainstorming, and the group now known as LOAF was born.</p>
+              <p className="text-md text-foreground leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>I had become friends with some young lesbians here in Houston who knew the Gay community. We started meeting and brainstorming, and the group now known as LOAF was born.</p>
             </div>
           </div>
         </CardSection>
@@ -90,13 +90,13 @@ const History = () => {
         {/* Part 2 */}
         <CardSection >
           <Title>Part 2</Title>
-          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             The Founding Mothers of LOAF are Ruth Sathre (nurse), JoAnn Beene (psychologist), Delores Nason (business woman), JoAnn Loulan (psychologist and writer, now living in Guerneville, CA), and Judy Peyton (social worker). We decided to form a group for Lesbians Over Fifty and began the search for others "like us."
           </p>
-          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             In 1993, we advertised in OutSmart Magazine, the Houston gay magazine, and invited interested women to join us at a local restaurant. Founding mothers and 19 other women came to that first meeting. Since then the group has gone through many evolutions.
           </p>
-          <ul className="list-disc ml-6 mt-4 space-y-2 text-md text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <ul className="list-disc ml-6 mt-4 space-y-2 text-md text-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <li>AGE OF PARTICIPANTS - We launched as LOAFF (Lesbians Over Age Fifty-Five) and quickly lowered the entry age to fifty so more women could join.</li>
             <li>NAME FOR THE GROUP - The acronym began as LOAFF, then we streamlined it to the now-familiar LOAF.</li>
             <li>AMOUNT OF STRUCTURING - Too many rules can smother a grassroots group, so we kept things loose and let participating women guide direction as needs evolved.</li>
@@ -119,13 +119,13 @@ const History = () => {
             </div>
             <div className="">
               <Title>Part 3</Title>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The first meeting of LOAF was the third Sunday of October 1987 at Womynspace. There were six women besides myself at that first meeting. attending were Betty Rudnick, Billie Carter, Josephine Jones, Sylvia Porter, Marjorie Fulp, and Charlotte Avery. Of those six women, only Sylvia Porter and Charlotte Avery are still alive.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Much that we discussed that day is still the heart of the group today - decisions by consensus at monthly meetings and activities governed by needs and wishes of participating women. It was soon decided to make the age requirement for membership age 50, and we became LOAF.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-foreground leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In 1989 member Jo Stewart, social worker at Methodist Hospital, started urging LOAF to incorporate as a non-profit. The work began in 1990 with Moore & Hunt (Debbie Hunt) as our Corporate Attorneys. Jo died of cancer in 1990. The work for application of our 501(c)3 was done by Floi Ewing, Arden&apos;s sister, and our non-profit status was granted in January 1991. Loaf incorporated as a social networking and support group without a membership roll to protect the anonymity of the women in LOAF.
               </p>
             </div>
@@ -137,7 +137,7 @@ const History = () => {
         <CardSection>
           <div className=" ">
             <Title>Part 4</Title>
-            <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Third Sunday meeting places have changed over the years. We moved from Womynspace to Autrey House near Rice University. We were there from November 1987 until May 1990 when the new Bishop dis-invited all GLBT groups because of homophobia. We spent a couple months at Montrose Counseling Center (on Lovett), and then moved to the Metropolitan Multi- Service Center on W. Gray. We met there from August 1990 until January 1993. We left because the city started closing the centers on Sunday, and we were not willing to change our meeting day. From February through June we met at Inklings Book Store . In July we started our long occupancy with Houston Mission Church, and met there until the church dissolved in April 2001. We then met at the Hollyfield Center for seven months. From there we went to the GLBT Community Center on Hawthorne where we stayed until July 2003. Attendance was dropping off, and some of the women were not comfortable in a gay identified place. So Third Sunday Meetings moved to Charlotte and Arden&apos;s home - and we met there from August 2003 until April 2011. Membership had grown until the meetings had reached critical mass and parking was a problem. So a team of board members started researching for a new home. And on the third Sunday of May 2011 LOAF started meeting at the Montrose Counseling Center. A new era had started.
             </p>
           </div>
@@ -155,16 +155,16 @@ const History = () => {
 
             <div className="w-full lg:w-1/2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <Title>Part 5</Title>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" >
+              <p className="text-md text-foreground leading-relaxed mb-4" >
                 The activities of the monthly meetings were decided by the participating women. Rules were very limited, and decisions were made monthly by the women attending. We soon decided to set up a quarterly meeting schedule of pot-luck, speaker, and games. We followed this schedule for at least ten years. New ideas/programs were added as time allowed. Our first speaker was Pokey Anderson, an icon in the GLBT community. She provided much information about our history in Houston. We also decided to ask Deb Hunt to talk to us about documents, and she has done this periodically over the years. She spoke to us well before we decided to incorporate, and she then became our Corporate Attorney.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In November 1988 we instituted our annual Benevolent Project. We collected items to contribute to Stone Soup Kitchen - a GLBT food pantry. We have done this every year since, and have contributed to groups such as Omega House, The Rose, Battered Women, local lesbian organizations, and some individuals.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In June 1989 we entered our first Pride Parade. That year we had a convertible and a walking group. Several of the LOAF women participate with other groups in the parade, but we have participated every year since 1989. In 2010 we entered our first float and won a trophy for best representation of the theme.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 All of these decisions were made by the women at the Third Sunday meetings. There have never been rules instigated by the Board of Directors. Because many women don&apos;t want to attend meetings, we changed Third Sunday Meeting to Meet &apos;N Greet several years ago. And that is what we do - take care of any necessary business. But greet newcomers and socialize with our friends.
               </p>
             </div>
@@ -176,23 +176,23 @@ const History = () => {
         {/* Part 6 */}
         <CardSection >
 
-          <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+          <h2 className="text-3xl font-bold text-foreground mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
             Part 6
           </h2>
 
-          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Socials have always been a big part of the activities for LOAF, and having a social as well as the monthly “Third Sunday” meeting was always on the calendar. Pot lucks topped the list for many years, and they were hosted by women in their homes. That is more difficult now because of the size of the membership. Bev and Sandy have hosted a potluck since 1995, and Eva Geer for several years.
           </p>
 
-          <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-foreground leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             The ice cream socials started in 1989. There are still women who have never cranked or eaten home made ice cream.The “picnic in the park” started in 2000. We have held picnics in a couple State Parks as well as Tom Bass Park in recent years.In 1988 we started attending the TUTS Broadway Musical at Miller Theater in July. We bring a snack supper and a chair and sit on the hill.In 2000 we started eating at Sudie's Catfish House in January. A breather from a busy party season, but a good way to connect.From 1987 to 1994 we had “Second Tuesday Dancing”. First at The Ranch, and then at Ms B&apos;s, it was our way to celebrate birthdays of the month. It was well attended.
           </p>
 
-          <p className="text-md text-[#48286e] leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-foreground leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             From 1989 to 1993 we had a five day Thanksgiving camp-out at a State Park. We roasted turkey and women came for potluck on Thanksgiving Day.We had from 10 to 20 campers, and maybe 25 for dinner.We have had a Christmas party every year since 1987.We have had several Port of Houston tours on the Sam Houston; several Houston Zoo tours; museum tours; and out-of town tours for bluebonnets, miniature horses, and Blue Bell ice cream. And occasionally, for lack of inspiration for an event social, we simply met for lunch at a local restaurant.
           </p>
 
-          <p className="text-md text-[#48286e] leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-foreground leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             LOAF has always been a social group. We have never had support groups or counseling. We are a place to meet other lesbians over fifty, make friends, and have fun.
           </p>
 
@@ -208,13 +208,13 @@ const History = () => {
 
             </div>
             <div className="md:w-2/3">
-              <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+              <h2 className="text-3xl font-bold text-foreground mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 Part 7
               </h2>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The LOAF Library has been an important part of the offering to the women. It started about 1987 when Arden discovered there were books - both fiction and non-fiction - about lesbians. We had one bookstore then -” Wilde &apos;N Stein” - that had a limited selection of lesbian books. Then Arden discovered Womencraft Books, a mail order book company. This began the collection now in the library. Over the years women have donated books. At one time we took duplicate titles to our book stores (Inkilngs and Book Woman) and traded them for titles we didn&apos;t have on the shelf. When the last book store closed we started donating duplicate copies to HATCH, and they are building their library. We have a collection that includes feminist, fantasy/sci-fi, poetry, non-fiction, as well as fiction books. We have a collection of out-of-print periodicals, women&apos;s music, and a video library. We have some beautiful “coffee table” books. We have copies of many of the “pulp” books.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-foreground leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 LOAF also was gifted with a beautiful pianola player piano and about 150 piano rolls. Marie Mariano donated it several years ago. It was in the “Allison” flood, and when it was restored Arden was told it was a beautiful instrument, and quite valuable.
               </p>
             </div>
@@ -225,16 +225,16 @@ const History = () => {
         {/* Part 8 */}
         <CardSection arrow={false} >
 
-          <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+          <h2 className="text-3xl font-bold text-foreground mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
             Part 8
           </h2>
-          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             LOAF has become a unique organization in that it is the oldest lesbian organization in Houston, and the only one of its kind in Texas. Over the years there has been quite a bit of exposure and promotion for LOAF.
           </p>
-          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-foreground leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             For 17 consecutive years, from 1987 to 2004, we had a Texas Lesbian Conference that rotated between Houston, San Antonio, Austin, and Dallas. LOAF presented workshops at five of these conferences. LOAF did a workshop at the National Lesbian Conference in Atlanta in 1991. We did a workshop at at the PFLAG “Healing the Hurt” conference in 1994. We did a program at the Silver Threads conference in St Petersburg, FL. We have done programs at three OLOC conferences. Charlotte and Arden participated in a live TV show about senior GLBT persons in Dallas. We participated in a documentary on GLBT seniors produced in Canada. And another documentary for Golden Threads at Cape Cod. We participated on a panel for the Women’s Studies Department at the University of Houston for their “Living archive” series. We have done several programs for the Women’s Group in Houston, and appeared on the After Hours radio show on KPFT several times.
           </p>
-          <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-foreground leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             All of these appearances are documented and part of the LOAF Archives located at the University of Houston Special Collections Library. One result of these workshops and programs has been the formation of similar groups for mid-life and old lesbians throughout the country. But most important is the connection with other lesbians of our generation and avoiding isolation..
           </p>
 
@@ -243,32 +243,32 @@ const History = () => {
       </main>
 
       {/* CTA Section */}
-      <section className="py-20 bg-[#48286e] mx-0">
+      <section className="py-20 bg-foreground mx-0">
         <div className="max-w-7xl mx-auto px-8">
           <div className="flex gap-8 md:flex-row flex-col">
             <Card className="p-8 text-center bg-background rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
-              <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+              <h3 className="text-2xl font-bold text-foreground mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 A Life Remembered
               </h3>
-              <p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-foreground mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Check out "A Life Remembered", a tribute dedicated to Arden Eversmeyer, one of the founding mothers of LOAF.
               </p>
               <a href="https://www.oldlesbianhistory.org/arden-eversmeyer" target="_blank" rel="noopener noreferrer">
-                <Button className="bg-muted-foreground hover:bg-[#48286e] text-white rounded-full px-6 py-3">
+                <Button className="bg-muted-foreground hover:bg-foreground text-white rounded-full px-6 py-3">
                   View Arden's Tribute
                 </Button>
               </a>
             </Card>
 
             <Card className="p-8 text-center bg-background rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
-              <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+              <h3 className="text-2xl font-bold text-foreground mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 The Old Lesbian Oral Herstory Project
               </h3>
-              <p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-foreground mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Arden Eversmeyer was also involved with The Old Lesbian Oral Herstory Project, preserving the stories of old lesbians.
               </p>
               <a href="https://www.olohp.org" target="_blank" rel="noopener noreferrer">
-                <Button className="bg-muted-foreground hover:bg-[#48286e] text-white rounded-full px-6 py-3">
+                <Button className="bg-muted-foreground hover:bg-foreground text-white rounded-full px-6 py-3">
                   Learn More About OLOHP
                 </Button>
               </a>

src/pages/Landing.js

@@ -24,7 +24,7 @@ const Landing = () => {
         />
       </div>
       <div className="p-6 flex flex-col pt-10 gap-4.5 w-full">
-        <h5 className="text-[#48286e] text-[28px] leading-10 pb-10 font-semibold text-center" style={{ fontFamily: "'Poppins', sans-serif" }}>
+        <h5 className="text-foreground text-[28px] leading-10 pb-10 font-semibold text-center" style={{ fontFamily: "'Poppins', sans-serif" }}>
           {infoTitle}
         </h5>
         {description}
@@ -37,7 +37,7 @@ const Landing = () => {
       iconSrc: iconMeetGreet,
       infoTitle: 'Meet and Greet',
       description: (
-        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-foreground text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           The MEET and GREETs provide opportunities for prospective members to get acquainted with LOAF, have conversations
           with members, and ask the board of directors questions. They are held the 3rd Sunday of the month and usually
           take place at a restaurant or other fun places conducive to its purpose. Please email{' '}
@@ -49,7 +49,7 @@ const Landing = () => {
       iconSrc: iconSocials,
       infoTitle: 'Socials',
       description: (
-        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-foreground text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Our social events provide opportunities for members to explore Houston and connect with other lesbians. Past
           social events include bowling, museums, painting lessons, sporting events, Miller Outdoor Theater, bingo and board
           games, pool parties, putt putt golf, camping and holiday get togethers. No matter your age or ability, there is
@@ -61,7 +61,7 @@ const Landing = () => {
       iconSrc: iconActive,
       infoTitle: 'Active LOAFers',
       description: (
-        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-foreground text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           ActiveLOAFers events provide members with opportunities to be physically active. Past activities have included
           hiking/walking in the park, swimming (or floating), pickleball, kayaking, bike riding, axe throwing, and strolling
           through the botanic gardens or the Arboretum.
@@ -75,7 +75,7 @@ const Landing = () => {
       <PublicNavbar />
 
       {/* Hero Section */}
-      <section className="relative bg-gradient-to-b from-[#48286e] to-muted-foreground  py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center w-full">
+      <section className="relative bg-gradient-to-b from-foreground to-muted-foreground  py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center w-full">
         {/* Friendships background image */}
         <div className="absolute inset-0 z-0 flex overflow-hidden top-[-32rem]  lg:-top-32">
           <img src={friendships} alt="Friendships" className="lg:max-w-screen opacity-15  max-w-full max-h-full object-contain" />
@@ -107,7 +107,7 @@ const Landing = () => {
       {/* About Section */}
       <section id="about" className="bg-gradient-to-b pb-10 lg:pb-44 from-white to-muted px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-4 sm:pt-16 md:pt-20 lg:pt-30 flex flex-col">
         <div className="flex flex-col items-center pt-4">
-          <h3 className="text-[#48286e] px-4 pb-6 md:py-8 text-4xl leading-[60px] md:text-5xl lg:text-6xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h3 className="text-foreground px-4 pb-6 md:py-8 text-4xl leading-[60px] md:text-5xl lg:text-6xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF
           </h3>
         </div>
@@ -125,7 +125,7 @@ const Landing = () => {
       </section>
 
       {/* CTA Section */}
-      <section className="bg-gradient-to-b from-[#644c9f] to-[#48286e] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex items-center justify-center">
+      <section className="bg-gradient-to-b from-dusty-grape to-foreground px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex items-center justify-center">
         <div className="flex flex-col-reverse md:flex-col lg:flex-row gap-8 sm:gap-10 md:gap-12 items-center justify-center w-full max-w-6xl">
           <Link to="/register" className="w-full sm:w-auto flex items-center justify-center">
             <Button className="bg-chart-6 hover:bg-background text-primary rounded-full

src/pages/MissionValues.js

@@ -14,7 +14,7 @@ const MissionValues = () => {
         <div className="max-w-[1400px] mx-auto">
           <div className="flex md:flex-row flex-col gap-10 items-stretch">
             {/* Left Card - Mission (Purple Gradient) */}
-            <Card className=" bg-gradient-to-br from-muted-foreground to-[#48286e] p-16 rounded-2xl shadow-lg flex flex-col items-center justify-between  flex-1 w-full md:w-1/2 ">
+            <Card className=" bg-gradient-to-br from-muted-foreground to-foreground p-16 rounded-2xl shadow-lg flex flex-col items-center justify-between  flex-1 w-full md:w-1/2 ">
               <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white text-center mb-6"
                 style={{ fontFamily: "'Poppins', sans-serif" }}>
                 LOAF Mission
@@ -30,11 +30,11 @@ const MissionValues = () => {
 
             {/* Right Card - Values */}
             <Card className="bg-background p-16 rounded-2xl shadow-lg flex-1  w-full md:w-1/2 ">
-              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] text-center mb-6"
+              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-foreground text-center mb-6"
                 style={{ fontFamily: "'Poppins', sans-serif" }}>
                 LOAF Values
               </h2>
-              <ol className="list-decimal list-inside space-y-8 text-lg text-[#48286e]"
+              <ol className="list-decimal list-inside space-y-8 text-lg text-foreground"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <li>Safe environments for lesbians to gather for a variety of social activities and interaction.</li>
                 <li>Social support for lesbians.</li>

src/pages/NotFound.js

@@ -8,13 +8,13 @@ const NotFound = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gradient-to-br from-bright-snow to-white flex items-center justify-center p-4">
       <Card className="w-full max-w-2xl p-12 bg-background rounded-2xl border border-chart-6 text-center">
         {/* 404 Illustration */}
         <div className="mb-8">
           <div className="relative">
             <h1
-              className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-chart-6 to-[#f9f8fb] leading-none"
+              className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-chart-6 to-bright-snow leading-none"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               404
@@ -44,7 +44,7 @@ const NotFound = () => {
           <Button
             onClick={() => navigate(-1)}
             variant="outline"
-            className="rounded-xl border-2 border-muted-foreground text-muted-foreground hover:bg-[#f9f8fb] px-6 py-6"
+            className="rounded-xl border-2 border-muted-foreground text-muted-foreground hover:bg-bright-snow px-6 py-6"
           >
             <ArrowLeft className="h-5 w-5 mr-2" />
             Go Back

src/pages/PaymentSuccess.js

@@ -27,7 +27,7 @@ const PaymentSuccess = () => {
         <div className="text-center mb-12">
           {/* Success Icon */}
           <div className="mb-8">
-            <div className="bg-[#81B29A] rounded-full w-24 h-24 mx-auto flex items-center justify-center">
+            <div className="bg-success rounded-full w-24 h-24 mx-auto flex items-center justify-center">
               <CheckCircle className="h-12 w-12 text-white" />
             </div>
           </div>
@@ -54,25 +54,25 @@ const PaymentSuccess = () => {
               </h3>
               <ul className="space-y-3">
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                  <CheckCircle className="h-5 w-5 text-success flex-shrink-0 mt-0.5" />
                   <span className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Your membership is now active and you have full access to all member benefits
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                  <CheckCircle className="h-5 w-5 text-success flex-shrink-0 mt-0.5" />
                   <span className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You can now RSVP and attend members-only events
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                  <CheckCircle className="h-5 w-5 text-success flex-shrink-0 mt-0.5" />
                   <span className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Access the community directory and connect with other members
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                  <CheckCircle className="h-5 w-5 text-success flex-shrink-0 mt-0.5" />
                   <span className="text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You'll receive our newsletter with exclusive updates and announcements
                   </span>

src/pages/Plans.js

@@ -311,19 +311,19 @@ const Plans = () => {
                   {/* Features */}
                   <div className="space-y-3 mb-8">
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                      <CheckCircle className="h-5 w-5 text-success flex-shrink-0 mt-0.5" />
                       <span className="text-sm text-primary" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Access to all member events</span>
                     </div>
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                      <CheckCircle className="h-5 w-5 text-success flex-shrink-0 mt-0.5" />
                       <span className="text-sm text-primary" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Community directory access</span>
                     </div>
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                      <CheckCircle className="h-5 w-5 text-success flex-shrink-0 mt-0.5" />
                       <span className="text-sm text-primary" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Exclusive member benefits</span>
                     </div>
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
+                      <CheckCircle className="h-5 w-5 text-success flex-shrink-0 mt-0.5" />
                       <span className="text-sm text-primary" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Newsletter subscription</span>
                     </div>
                   </div>
@@ -423,7 +423,7 @@ const Plans = () => {
 
             {/* Breakdown Display */}
             {breakdown && breakdown.total >= breakdown.base && (
-              <Card className="p-4 bg-[#f9f5ff] border border-chart-6">
+              <Card className="p-4 bg-lavender-mist border border-chart-6">
                 <div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <div className="flex justify-between text-primary">
                     <span>Membership Fee:</span>

src/pages/PrivacyPolicy.js

@@ -7,7 +7,7 @@ export default function PrivacyPolicy() {
   return (
     <>
       <PublicNavbar />
-      <main className="bg-gradient-to-bl from-[#F9FAFB] to-chart-6 text-[#48286E]">
+      <main className="bg-gradient-to-bl from-[#F9FAFB] to-chart-6 text-foreground">
         <div className="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
           <header className="border-b pb-6">
             <h1 className="text-3xl sm:text-4xl font-bold tracking-tight" style={{ fontFamily: 'Poppins' }}>
@@ -15,7 +15,7 @@ export default function PrivacyPolicy() {
             </h1>
           </header>
 
-          <div className="prose text-[#48286E] max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
+          <div className="prose text-foreground max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
             <section className="mt-8">
               <p>
                 This Privacy Policy ("Policy") applies to Membership Applications, and LOAFers, Inc. ("Company") and
@@ -31,7 +31,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="user-data" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">What User Data We Collect</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">What User Data We Collect</h2>
               <p>When you visit the Site, we may collect the following data:</p>
               <ul className="list-disc pl-6 space-y-1">
                 <li>Your IP address.</li>
@@ -63,7 +63,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="why-collect" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Why We Collect Your Data</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">Why We Collect Your Data</h2>
               <ul className="list-disc pl-6 space-y-1">
                 <li>
                   To send you announcement emails containing the information about our events and information we think you
@@ -75,7 +75,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="third-parties" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Sharing Information with Third Parties</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">Sharing Information with Third Parties</h2>
               <p>The Company does not sell, rent, or lease personal data to third parties.</p>
               <p>
                 The Company may share data with trusted partners to help perform statistical analysis, provide customer
@@ -89,7 +89,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="safeguarding" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Safeguarding and Securing the Data</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">Safeguarding and Securing the Data</h2>
               <p>
                 LOAFers, Inc. is committed to securing your data and keeping it confidential. LOAFers, Inc. has done all
                 in its power to prevent data theft, unauthorized access, and disclosure by implementing the latest
@@ -98,7 +98,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="cookies" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Our Cookie Policy</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">Our Cookie Policy</h2>
               <p>
                 Once you agree to allow our blog to use cookies, you also agree to use the data it collects regarding your
                 online behavior (analyze web traffic, web pages you visit and spend the most time on).
@@ -123,7 +123,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="other-sites" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Links to Other Websites</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">Links to Other Websites</h2>
               <p>
                 Our blog contains links that lead to other websites. If you click on these links LOAFers, Inc. is not held
                 responsible for your data and privacy protection. Visiting those websites is not governed by this privacy
@@ -133,7 +133,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="restricting" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">
                 Restricting the Collection of your Personal Data
               </h2>
               <p>
@@ -150,12 +150,12 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="children" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Children Under Thirteen</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">Children Under Thirteen</h2>
               <p>The Company does not knowingly collect information from children under the age of 13.</p>
             </section>
 
             <section id="changes" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Changes to this Statement</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">Changes to this Statement</h2>
               <p>
                 The Company may make changes to this Policy. When this occurs the effective date of this policy will be
                 updated.
@@ -163,7 +163,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="contact" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Contact Information</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">Contact Information</h2>
               <p>If you have any question, please contact LOAFers, Inc. at:</p>
               <div className="not-prose mt-4">
                 <p className="font-semibold mb-2">LOAFers, Inc.</p>

src/pages/Profile.js

@@ -487,7 +487,7 @@ const Profile = () => {
             {/* Section 3: Newsletter Preferences */}
             <div className="pt-8 mt-8 border-t border-chart-6">
               <h2 className="text-2xl font-semibold text-primary mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Mail className="h-6 w-6 text-[#81B29A]" />
+                <Mail className="h-6 w-6 text-success" />
                 Newsletter Preferences
               </h2>
               <p className="text-muted-foreground mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -590,7 +590,7 @@ const Profile = () => {
               </p>
 
               <div className="space-y-6">
-                <div className="flex items-center gap-3 p-4 bg-[#f9f5ff] rounded-lg">
+                <div className="flex items-center gap-3 p-4 bg-lavender-mist rounded-lg">
                   <input
                     type="checkbox"
                     id="show_in_directory"

src/pages/Resources.js

@@ -103,7 +103,7 @@ const Resources = () => {
       <main className="bg-gradient-to-b from-white via-muted to-[#e8e0f5] px-6 py-16">
         {/* Header Section */}
         <section className="max-w-7xl mx-auto mb-12">
-          <h1 className="text-[28px] font-bold text-[#48286e] text-center mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-[28px] font-bold text-foreground text-center mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
             Tap or click on each purple tab below to open and read its contents
           </h1>
 
@@ -116,7 +116,7 @@ const Resources = () => {
               <div key={categoryIndex} className="space-y-6">
                 {/* Category Title */}
                 <div className="flex justify-center text-4xl text-[#664ea2]">{category.icon}</div>
-                <h2 className="text-[32px] leading-6 font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                <h2 className="text-[32px] leading-6 font-bold text-foreground text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
                   {category.title}
                 </h2>
 
@@ -130,7 +130,7 @@ const Resources = () => {
                         {/* Accordion Button */}
                         <button
                           onClick={() => toggleAccordion(categoryIndex, resourceIndex)}
-                          className={`w-full bg-gradient-to-tr from-[#48286E] to-muted-foreground hover:bg-[#5a4290] text-white px-6 py-4 rounded-3xl flex items-center justify-between transition-all  ${isExpanded ? 'rounded-b-none rounded-t-3xl' : ''}`
+                          className={`w-full bg-gradient-to-tr from-foreground to-muted-foreground hover:bg-[#5a4290] text-white px-6 py-4 rounded-3xl flex items-center justify-between transition-all  ${isExpanded ? 'rounded-b-none rounded-t-3xl' : ''}`
 
                           }
                         >
@@ -150,7 +150,7 @@ const Resources = () => {
                         >
                           <Card className="p-6 bg-background rounded-b-2xl rounded-t-none border-none ">
                             {/* Description */}
-                            <p className="text-[#48286e] mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <p className="text-foreground mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {resource.description}
                             </p>
 
@@ -178,7 +178,7 @@ const Resources = () => {
                                         <Phone className="size-4" />
                                         <a
                                           href={`tel:${resource.phone.replace(/[^0-9]/g, '')}`}
-                                          className="text-sm hover:text-[#48286e] transition-colors"
+                                          className="text-sm hover:text-foreground transition-colors"
                                           style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                                         >
                                           {resource.phone}
@@ -190,7 +190,7 @@ const Resources = () => {
                                         <Mail className="h-4 w-4" />
                                         <a
                                           href={`mailto:${resource.email}`}
-                                          className="text-sm hover:text-[#48286e] transition-colors"
+                                          className="text-sm hover:text-foreground transition-colors"
                                           style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                                         >
                                           {resource.email}
@@ -228,7 +228,7 @@ const Resources = () => {
 
         {/* Additional Help Section */}
         <section className="max-w-4xl mx-auto mt-16">
-          <Card className="p-8 bg-gradient-to-r from-muted-foreground to-[#48286e] rounded-2xl shadow-xl text-center">
+          <Card className="p-8 bg-gradient-to-r from-muted-foreground to-foreground rounded-2xl shadow-xl text-center">
             <h3 className="text-2xl font-bold text-white mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Need Additional Support?
             </h3>
@@ -237,7 +237,7 @@ const Resources = () => {
             </p>
             <a
               href="mailto:support@loaf.org"
-              className="inline-block bg-background text-[#48286e] px-8 py-3 rounded-full font-semibold hover:bg-muted transition-colors shadow-lg"
+              className="inline-block bg-background text-foreground px-8 py-3 rounded-full font-semibold hover:bg-muted transition-colors shadow-lg"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Contact Us

src/pages/TermsOfService.js

@@ -8,7 +8,7 @@ export default function TermsOfService() {
   return (
     <>
       <PublicNavbar />
-      <main className="bg-gradient-to-bl from-[#F9FAFB] to-chart-6 text-[#48286E]">
+      <main className="bg-gradient-to-bl from-[#F9FAFB] to-chart-6 text-foreground">
         <div className="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
           {/* Title */}
           <header className="border-b pb-6">
@@ -21,10 +21,10 @@ export default function TermsOfService() {
           </header>
 
           {/* Body */}
-          <div className="prose text-[#48286E] max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
+          <div className="prose text-foreground max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
             {/* AGREEMENT */}
             <section aria-labelledby="agreement" className="mt-8">
-              <h2 id="agreement" className="text-xl sm:text-2xl text-[#48286E] font-bold ">
+              <h2 id="agreement" className="text-xl sm:text-2xl text-foreground font-bold ">
                 AGREEMENT TO OUR LEGAL TERMS
               </h2>
 
@@ -68,37 +68,37 @@ export default function TermsOfService() {
             </section>
 
             {/* TABLE OF CONTENTS */}
-            <section aria-labelledby="toc" className="text-[#48286E]">
+            <section aria-labelledby="toc" className="text-foreground">
-              <h2 id="toc" className="text-lg sm:text-xl font-bold text-[#48286E] m-0">
+              <h2 id="toc" className="text-lg sm:text-xl font-bold text-foreground m-0">
                 TABLE OF CONTENTS
               </h2>
 
-              <ol className="mt-4 list-decimal no-prose text-[#48286E] pl-5 space-y-1">
+              <ol className="mt-4 list-decimal no-prose text-foreground pl-5 space-y-1">
-                <li><a className="text-[#48286E]" href="#our-services">OUR SERVICES</a></li>
+                <li><a className="text-foreground" href="#our-services">OUR SERVICES</a></li>
-                <li><a className="text-[#48286E]" href="#ipr">INTELLECTUAL PROPERTY RIGHTS</a></li>
+                <li><a className="text-foreground" href="#ipr">INTELLECTUAL PROPERTY RIGHTS</a></li>
-                <li><a className="text-[#48286E]" href="#user-representations">USER REPRESENTATIONS</a></li>
+                <li><a className="text-foreground" href="#user-representations">USER REPRESENTATIONS</a></li>
-                <li><a className="text-[#48286E]" href="#prohibited-activities">PROHIBITED ACTIVITIES</a></li>
+                <li><a className="text-foreground" href="#prohibited-activities">PROHIBITED ACTIVITIES</a></li>
-                <li><a className="text-[#48286E]" href="#ugc">USER GENERATED CONTRIBUTIONS</a></li>
+                <li><a className="text-foreground" href="#ugc">USER GENERATED CONTRIBUTIONS</a></li>
-                <li><a className="text-[#48286E]" href="#contribution-license">CONTRIBUTION LICENSE</a></li>
+                <li><a className="text-foreground" href="#contribution-license">CONTRIBUTION LICENSE</a></li>
-                <li><a className="text-[#48286E]" href="#services-management">SERVICES MANAGEMENT</a></li>
+                <li><a className="text-foreground" href="#services-management">SERVICES MANAGEMENT</a></li>
-                <li><a className="text-[#48286E]" href="#term-termination">TERM AND TERMINATION</a></li>
+                <li><a className="text-foreground" href="#term-termination">TERM AND TERMINATION</a></li>
-                <li><a className="text-[#48286E]" href="#modifications">MODIFICATIONS AND INTERRUPTIONS</a></li>
+                <li><a className="text-foreground" href="#modifications">MODIFICATIONS AND INTERRUPTIONS</a></li>
-                <li><a className="text-[#48286E]" href="#governing-law">GOVERNING LAW</a></li>
+                <li><a className="text-foreground" href="#governing-law">GOVERNING LAW</a></li>
-                <li><a className="text-[#48286E]" href="#dispute-resolution">DISPUTE RESOLUTION</a></li>
+                <li><a className="text-foreground" href="#dispute-resolution">DISPUTE RESOLUTION</a></li>
-                <li><a className="text-[#48286E]" href="#corrections">CORRECTIONS</a></li>
+                <li><a className="text-foreground" href="#corrections">CORRECTIONS</a></li>
-                <li><a className="text-[#48286E]" href="#disclaimer">DISCLAIMER</a></li>
+                <li><a className="text-foreground" href="#disclaimer">DISCLAIMER</a></li>
-                <li><a className="text-[#48286E]" href="#limitations-liability">LIMITATIONS OF LIABILITY</a></li>
+                <li><a className="text-foreground" href="#limitations-liability">LIMITATIONS OF LIABILITY</a></li>
-                <li><a className="text-[#48286E]" href="#indemnification">INDEMNIFICATION</a></li>
+                <li><a className="text-foreground" href="#indemnification">INDEMNIFICATION</a></li>
-                <li><a className="text-[#48286E]" href="#user-data">USER DATA</a></li>
+                <li><a className="text-foreground" href="#user-data">USER DATA</a></li>
-                <li><a className="text-[#48286E]" href="#electronic-comms">ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES</a></li>
+                <li><a className="text-foreground" href="#electronic-comms">ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES</a></li>
-                <li><a className="text-[#48286E]" href="#miscellaneous">MISCELLANEOUS</a></li>
+                <li><a className="text-foreground" href="#miscellaneous">MISCELLANEOUS</a></li>
-                <li><a className="text-[#48286E]" href="#contact-us">CONTACT US</a></li>
+                <li><a className="text-foreground" href="#contact-us">CONTACT US</a></li>
               </ol>
             </section>
 
             {/* 1. OUR SERVICES */}
             <section id="our-services" className="scroll-mt-24">
-              <h2 className="text-xl text-[#48286E] sm:text-2xl font-bold ">1. OUR SERVICES</h2>
+              <h2 className="text-xl text-foreground sm:text-2xl font-bold ">1. OUR SERVICES</h2>
               <p>
                 The information provided when using the Services is not intended for distribution to or use by any person
                 or entity in any jurisdiction or country where such distribution or use would be contrary to law or
@@ -111,7 +111,7 @@ export default function TermsOfService() {
 
             {/* 2. INTELLECTUAL PROPERTY RIGHTS */}
             <section id="ipr" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E] ">2. INTELLECTUAL PROPERTY RIGHTS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground ">2. INTELLECTUAL PROPERTY RIGHTS</h2>
 
               <h3 className="text-lg font-semibold ">Our intellectual property</h3>
               <p>
@@ -124,7 +124,7 @@ export default function TermsOfService() {
                 internal business purpose only.
               </p>
 
-              <h3 className="text-lg font-semibold text-[#48286E]">Your use of our Services</h3>
+              <h3 className="text-lg font-semibold text-foreground">Your use of our Services</h3>
               <p>
                 Subject to your compliance with these Legal Terms, including the "PROHIBITED ACTIVITIES" section below, we
                 grant you a non-exclusive, non-transferable, revocable license to:
@@ -160,7 +160,7 @@ export default function TermsOfService() {
                 right to use our Services will terminate immediately.
               </p>
 
-              <h3 className="text-lg font-semibold text-[#48286E]">Your submissions</h3>
+              <h3 className="text-lg font-semibold text-foreground">Your submissions</h3>
               <p>
                 Please review this section and the "PROHIBITED ACTIVITIES" section carefully prior to using our Services to
                 understand the (a) rights you give us and (b) obligations you have when you post or upload any content
@@ -225,7 +225,7 @@ export default function TermsOfService() {
 
             {/* 4. PROHIBITED ACTIVITIES */}
             <section id="prohibited-activities" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">4. PROHIBITED ACTIVITIES</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">4. PROHIBITED ACTIVITIES</h2>
 
               <p>
                 You may not access or use the Services for any purpose other than that for which we make the Services
@@ -261,7 +261,7 @@ export default function TermsOfService() {
 
             {/* 5. USER GENERATED CONTRIBUTIONS */}
             <section id="ugc" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">5. USER GENERATED CONTRIBUTIONS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">5. USER GENERATED CONTRIBUTIONS</h2>
               <p>
                 The Services does not offer users to submit or post content. We may provide you with the opportunity to
                 create, submit, post, display, transmit, perform, publish, distribute, or broadcast content and materials
@@ -274,7 +274,7 @@ export default function TermsOfService() {
 
             {/* 6. CONTRIBUTION LICENSE */}
             <section id="contribution-license" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">6. CONTRIBUTION LICENSE</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">6. CONTRIBUTION LICENSE</h2>
               <p>
                 You and Services agree that we may access, store, process, and use any information and personal data that
                 you provide and your choices (including settings).
@@ -295,7 +295,7 @@ export default function TermsOfService() {
 
             {/* 7. SERVICES MANAGEMENT */}
             <section id="services-management" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">7. SERVICES MANAGEMENT</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">7. SERVICES MANAGEMENT</h2>
               <p>
                 We reserve the right, but not the obligation, to: (1) monitor the Services for violations of these Legal
                 Terms; (2) take appropriate legal action against anyone who, in our sole discretion, violates the law or
@@ -311,7 +311,7 @@ export default function TermsOfService() {
 
             {/* 8. TERM AND TERMINATION */}
             <section id="term-termination" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">8. TERM AND TERMINATION</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">8. TERM AND TERMINATION</h2>
               <p>
                 These Legal Terms shall remain in full force and effect while you use the Services.{" "}
                 <strong>
@@ -334,7 +334,7 @@ export default function TermsOfService() {
 
             {/* 9. MODIFICATIONS AND INTERRUPTIONS */}
             <section id="modifications" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">9. MODIFICATIONS AND INTERRUPTIONS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">9. MODIFICATIONS AND INTERRUPTIONS</h2>
               <p>
                 We reserve the right to change, modify, or remove the contents of the Services at any time or for any
                 reason at our sole discretion without notice. However, we have no obligation to update any information on
@@ -357,7 +357,7 @@ export default function TermsOfService() {
 
             {/* 10. GOVERNING LAW */}
             <section id="governing-law" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">10. GOVERNING LAW</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">10. GOVERNING LAW</h2>
               <p>
                 These Legal Terms shall be governed by and defined following the laws of Texas. LOAFers, Inc. and yourself
                 irrevocably consent that the courts of Houston shall have exclusive jurisdiction to resolve any dispute
@@ -367,7 +367,7 @@ export default function TermsOfService() {
 
             {/* 11. DISPUTE RESOLUTION */}
             <section id="dispute-resolution" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">11. DISPUTE RESOLUTION</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">11. DISPUTE RESOLUTION</h2>
 
               <h3 className="text-lg font-semibold ">Informal Negotiations</h3>
               <p>
@@ -378,7 +378,7 @@ export default function TermsOfService() {
                 arbitration. Such informal negotiations commence upon written notice from one Party to the other Party.
               </p>
 
-              <h3 className="text-lg font-semibold text-[#48286E]">Binding Arbitration</h3>
+              <h3 className="text-lg font-semibold text-foreground">Binding Arbitration</h3>
               <p>
                 Any dispute arising out of or in connection with these Legal Terms, including any question regarding its
                 existence, validity, or termination, shall be referred to and finally resolved by the Disputy Resolution
@@ -393,7 +393,7 @@ export default function TermsOfService() {
                 </a>
               </p>
 
-              <h3 className="text-lg font-semibold text-[#48286E]">Restrictions</h3>
+              <h3 className="text-lg font-semibold text-foreground">Restrictions</h3>
               <p>
                 The Parties agree that any arbitration shall be limited to the Dispute between the Parties individually.
                 To the full extent permitted by law, (a) no arbitration shall be joined with any other proceeding; (b)
@@ -402,7 +402,7 @@ export default function TermsOfService() {
                 representative capacity on behalf of the general public or any other persons.
               </p>
 
-              <h3 className="text-lg font-semibold text-[#48286E]">Exceptions to Informal Negotiations and Arbitration</h3>
+              <h3 className="text-lg font-semibold text-foreground">Exceptions to Informal Negotiations and Arbitration</h3>
               <p>
                 The Parties agree that the following Disputes are not subject to the above provisions concerning informal
                 negotiations binding arbitration: (a) any Disputes seeking to enforce or protect, or concerning the validity
@@ -420,7 +420,7 @@ export default function TermsOfService() {
 
             {/* 12. CORRECTIONS */}
             <section id="corrections" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">12. CORRECTIONS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">12. CORRECTIONS</h2>
               <p>
                 There may be information on the Services that contains typographical errors, inaccuracies, or omissions,
                 including descriptions, pricing, availability, and various other information. We reserve the right to
@@ -431,7 +431,7 @@ export default function TermsOfService() {
 
             {/* 13. DISCLAIMER */}
             <section id="disclaimer" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">13. DISCLAIMER</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">13. DISCLAIMER</h2>
               <p className="font-semibold">
                 THE SERVICES ARE PROVIDED ON AN AS-IS AND AS-AVAILABLE BASIS. YOU AGREE THAT YOUR USE OF THE SERVICES WILL
                 BE AT YOUR SOLE RISK. TO THE FULLEST EXTENT PERMITTED BY LAW, WE DISCLAIM ALL WARRANTIES, EXPRESS OR
@@ -462,7 +462,7 @@ export default function TermsOfService() {
 
             {/* 14. LIMITATIONS OF LIABILITY */}
             <section id="limitations-liability" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">14. LIMITATIONS OF LIABILITY</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">14. LIMITATIONS OF LIABILITY</h2>
               <p className="font-semibold">
                 IN NO EVENT WILL WE OR OUR DIRECTORS, EMPLOYEES, OR AGENTS BE LIABLE TO YOU OR ANY THIRD PARTY FOR ANY
                 DIRECT, INDIRECT, CONSEQUENTIAL, EXEMPLARY, INCIDENTAL, SPECIAL, OR PUNITIVE DAMAGES, INCLUDING LOST
@@ -483,7 +483,7 @@ export default function TermsOfService() {
 
             {/* 15. INDEMNIFICATION */}
             <section id="indemnification" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">15. INDEMNIFICATION</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">15. INDEMNIFICATION</h2>
               <p>
                 You agree to defend, indemnify, and hold us harmless, including our subsidiaries, affiliates, and all of
                 our respective officers, agents, partners, and employees, from and against any loss, damage, liability,
@@ -503,7 +503,7 @@ export default function TermsOfService() {
 
             {/* 16. USER DATA */}
             <section id="user-data" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">16. USER DATA</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">16. USER DATA</h2>
               <p>
                 We will maintain certain data that you transmit to the Services for the purpose of managing the performance
                 of the Services, as well as data relating to your use of the Services. Although we perform regular routine
@@ -516,7 +516,7 @@ export default function TermsOfService() {
 
             {/* 17. ELECTRONIC COMMUNICATIONS */}
             <section id="electronic-comms" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">
                 17. ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES
               </h2>
               <p>
@@ -539,7 +539,7 @@ export default function TermsOfService() {
 
             {/* 18. MISCELLANEOUS */}
             <section id="miscellaneous" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">18. MISCELLANEOUS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">18. MISCELLANEOUS</h2>
               <p>
                 These Legal Terms and any policies or operating rules posted by us on the Services or in respect to the
                 Services constitute the entire agreement and understanding between you and us. Our failure to exercise or
@@ -567,7 +567,7 @@ export default function TermsOfService() {
 
             {/* 19. CONTACT US */}
             <section id="contact-us" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">19. CONTACT US</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-foreground">19. CONTACT US</h2>
               <p>
                 In order to resolve a complaint regarding the Services or to receive further information regarding use of
                 the Services, please contact us at:

src/pages/VerifyEmail.js

@@ -64,7 +64,7 @@ const VerifyEmail = () => {
 
           {status === 'success' && (
             <>
-              <CheckCircle className="h-20 w-20 text-[#81B29A] mx-auto mb-6" />
+              <CheckCircle className="h-20 w-20 text-success mx-auto mb-6" />
               <h1 className="text-3xl font-semibold text-primary mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Email Verified Successfully!
               </h1>

src/pages/admin/AdminBylaws.js

@@ -210,7 +210,7 @@ const AdminBylaws = () => {
                   {currentBylaws.title}
                 </h3>
                 <div className="flex items-center gap-2 mt-1">
-                  <Badge className="bg-[#81B29A] text-white">
+                  <Badge className="bg-success text-white">
                     <Check className="h-3 w-3 mr-1" />
                     Current Version
                   </Badge>

src/pages/admin/AdminDashboard.js

@@ -91,8 +91,8 @@ const AdminDashboard = () => {
 
         <Card className="p-6 bg-background rounded-2xl border border-chart-6" data-testid="stat-pending-validations">
           <div className="flex items-center justify-between mb-4">
-            <div className="bg-orange-100 p-3 rounded-lg">
+            <div className="bg-accent/10 p-3 rounded-lg">
-              <Clock className="h-6 w-6 text-orange-600" />
+              <Clock className="h-6 w-6 text-accent" />
             </div>
           </div>
           <p className="text-3xl font-semibold text-primary mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -103,8 +103,8 @@ const AdminDashboard = () => {
 
         <Card className="p-6 bg-background rounded-2xl border border-chart-6" data-testid="stat-active-members">
           <div className="flex items-center justify-between mb-4">
-            <div className="bg-[#81B29A]/20 p-3 rounded-lg">
+            <div className="bg-success/20 p-3 rounded-lg">
-              <CheckCircle className="h-6 w-6 text-[#81B29A]" />
+              <CheckCircle className="h-6 w-6 text-success" />
             </div>
           </div>
           <p className="text-3xl font-semibold text-primary mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>

src/pages/admin/AdminDonations.js

@@ -167,7 +167,7 @@ const AdminDonations = () => {
   };
 
   const getTypeBadgeColor = (type) => {
-    return type === 'member' ? 'bg-[#81B29A]' : 'bg-muted-foreground';
+    return type === 'member' ? 'bg-success' : 'bg-muted-foreground';
   };
 
   if (loading) {
@@ -214,12 +214,12 @@ const AdminDonations = () => {
               <p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Member Donations
               </p>
-              <p className="text-3xl font-bold text-[#81B29A] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-success mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.member_donations || 0}
               </p>
             </div>
-            <div className="p-3 bg-[#81B29A]/10 rounded-full">
+            <div className="p-3 bg-success/10 rounded-full">
-              <Users className="h-6 w-6 text-[#81B29A]" />
+              <Users className="h-6 w-6 text-success" />
             </div>
           </div>
         </Card>
@@ -276,7 +276,7 @@ const AdminDonations = () => {
                 <DropdownMenuTrigger asChild>
                   <Button
                     disabled={exporting}
-                    className="bg-[#81B29A] text-white hover:bg-[#6a9680] rounded-full px-6 py-3 flex items-center gap-2"
+                    className="bg-success text-white hover:bg-muted-teal-dark rounded-full px-6 py-3 flex items-center gap-2"
                   >
                     <Download className="h-4 w-4" />
                     {exporting ? 'Exporting...' : 'Export'}
@@ -401,7 +401,7 @@ const AdminDonations = () => {
                 </tr>
               ) : (
                 filteredDonations.map((donation) => (
-                  <tr key={donation.id} className="hover:bg-[#f9f5ff] transition-colors">
+                  <tr key={donation.id} className="hover:bg-lavender-mist transition-colors">
                     <td className="px-6 py-4">
                       <div>
                         <p className="font-medium text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -453,7 +453,7 @@ const AdminDonations = () => {
 
       {/* This Month Summary */}
       {stats.this_month_count > 0 && (
-        <Card className="p-6 bg-gradient-to-r from-[#f9f5ff] to-muted rounded-2xl border-2 border-chart-6">
+        <Card className="p-6 bg-gradient-to-r from-lavender-mist to-muted rounded-2xl border-2 border-chart-6">
           <div className="flex items-center justify-between">
             <div>
               <p className="text-muted-foreground font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>

src/pages/admin/AdminEventAttendance.js

@@ -254,7 +254,7 @@ const AdminEventAttendance = () => {
         </div>
         <Button
           onClick={exportToCSV}
-          className="bg-[#81B29A] hover:bg-[#6a9a83] text-white rounded-xl"
+          className="bg-success hover:bg-[#6a9a83] text-white rounded-xl"
           style={{ fontFamily: "'Inter', sans-serif" }}
         >
           <Download className="h-4 w-4 mr-2" />
@@ -282,7 +282,7 @@ const AdminEventAttendance = () => {
               )}
             </div>
           </div>
-          <Badge className={`${event.published ? 'bg-[#81B29A]' : 'bg-chart-6'} text-white px-3 py-1`}>
+          <Badge className={`${event.published ? 'bg-success' : 'bg-chart-6'} text-white px-3 py-1`}>
             {event.published ? 'Published' : 'Draft'}
           </Badge>
         </div>
@@ -302,7 +302,7 @@ const AdminEventAttendance = () => {
 
         <Card className="p-4 bg-background border-chart-6 rounded-xl">
           <div className="flex items-center gap-3">
-            <UserCheck className="h-8 w-8 text-[#81B29A]" />
+            <UserCheck className="h-8 w-8 text-success" />
             <div>
               <p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
               <p className="text-2xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.yesCount}</p>
@@ -312,7 +312,7 @@ const AdminEventAttendance = () => {
 
         <Card className="p-4 bg-background border-chart-6 rounded-xl">
           <div className="flex items-center gap-3">
-            <UserX className="h-8 w-8 text-[#E07A5F]" />
+            <UserX className="h-8 w-8 text-burnt-peach" />
             <div>
               <p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No</p>
               <p className="text-2xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.noCount}</p>
@@ -322,7 +322,7 @@ const AdminEventAttendance = () => {
 
         <Card className="p-4 bg-background border-chart-6 rounded-xl">
           <div className="flex items-center gap-3">
-            <HelpCircle className="h-8 w-8 text-[#F2CC8F]" />
+            <HelpCircle className="h-8 w-8 text-apricot-cream" />
             <div>
               <p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Maybe</p>
               <p className="text-2xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.maybeCount}</p>
@@ -361,7 +361,7 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('yes')}
               variant={activeTab === 'yes' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'yes'
-                ? 'bg-[#81B29A] hover:bg-[#6a9a83] text-white'
+                ? 'bg-success hover:bg-[#6a9a83] text-white'
                 : 'border-chart-6 text-muted-foreground hover:bg-chart-7'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
@@ -372,7 +372,7 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('no')}
               variant={activeTab === 'no' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'no'
-                ? 'bg-[#E07A5F] hover:bg-[#d16b54] text-white'
+                ? 'bg-burnt-peach hover:bg-[#d16b54] text-white'
                 : 'border-chart-6 text-muted-foreground hover:bg-chart-7'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
@@ -383,7 +383,7 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('maybe')}
               variant={activeTab === 'maybe' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'maybe'
-                ? 'bg-[#F2CC8F] hover:bg-[#e8bf7a] text-primary'
+                ? 'bg-apricot-cream hover:bg-[#e8bf7a] text-primary'
                 : 'border-chart-6 text-muted-foreground hover:bg-chart-7'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
@@ -414,7 +414,7 @@ const AdminEventAttendance = () => {
                 <Button
                   onClick={() => handleBulkAttendance(true)}
                   disabled={saving}
-                  className="bg-[#81B29A] hover:bg-[#6a9a83] text-white rounded-xl"
+                  className="bg-success hover:bg-[#6a9a83] text-white rounded-xl"
                   style={{ fontFamily: "'Inter', sans-serif" }}
                 >
                   <Check className="h-4 w-4 mr-1" />
@@ -423,7 +423,7 @@ const AdminEventAttendance = () => {
                 <Button
                   onClick={() => handleBulkAttendance(false)}
                   disabled={saving}
-                  className="bg-[#E07A5F] hover:bg-[#d16b54] text-white rounded-xl"
+                  className="bg-burnt-peach hover:bg-[#d16b54] text-white rounded-xl"
                   style={{ fontFamily: "'Inter', sans-serif" }}
                 >
                   <X className="h-4 w-4 mr-1" />
@@ -483,10 +483,10 @@ const AdminEventAttendance = () => {
                     <td className="px-4 py-3">
                       <Badge
                         className={`${rsvp.rsvp_status === 'yes'
-                          ? 'bg-[#81B29A]'
+                          ? 'bg-success'
                           : rsvp.rsvp_status === 'no'
-                            ? 'bg-[#E07A5F]'
+                            ? 'bg-burnt-peach'
-                            : 'bg-[#F2CC8F] text-primary'
+                            : 'bg-apricot-cream text-primary'
                           } text-white text-xs px-2 py-1`}
                       >
                         {rsvp.rsvp_status.toUpperCase()}
@@ -498,7 +498,7 @@ const AdminEventAttendance = () => {
                           onClick={() => handleIndividualAttendance(rsvp.user_id, false)}
                           disabled={saving}
                           size="sm"
-                          className="bg-[#81B29A] hover:bg-[#6a9a83] text-white rounded-lg min-w-[120px]"
+                          className="bg-success hover:bg-[#6a9a83] text-white rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <Check className="h-3 w-3 mr-1" />
@@ -510,7 +510,7 @@ const AdminEventAttendance = () => {
                           disabled={saving}
                           size="sm"
                           variant="outline"
-                          className="border-chart-6 text-muted-foreground hover:bg-[#81B29A] hover:text-white hover:border-[#81B29A] rounded-lg min-w-[120px]"
+                          className="border-chart-6 text-muted-foreground hover:bg-success hover:text-white hover:border-success rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <X className="h-3 w-3 mr-1" />

src/pages/admin/AdminEvents.js

@@ -298,7 +298,7 @@ const AdminEvents = () => {
                 </div>
                 <Badge
                   className={`${event.published
-                    ? 'bg-[#81B29A] text-white'
+                    ? 'bg-success text-white'
                     : 'bg-gray-400 text-white'
                     } px-3 py-1 rounded-full`}
                 >
@@ -345,7 +345,7 @@ const AdminEvents = () => {
                   onClick={() => navigate(`/admin/events/${event.id}/attendance`)}
                   variant="outline"
                   size="sm"
-                  className="w-full border-[#81B29A] text-[#81B29A] hover:bg-[#81B29A] hover:text-white"
+                  className="w-full border-success text-success hover:bg-success hover:text-white"
                   data-testid={`mark-attendance-${event.id}`}
                 >
                   <Users className="h-4 w-4 mr-2" />

src/pages/admin/AdminMembers.js

@@ -203,9 +203,9 @@ const AdminMembers = () => {
     const config = {
       pending_email: { label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
       pending_validation: { label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { label: 'Pre-Validated', className: 'bg-[#81B29A] text-white' },
+      pre_validated: { label: 'Pre-Validated', className: 'bg-success text-white' },
       payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' },
-      active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
+      active: { label: 'Active', className: 'bg-success text-white' },
       inactive: { label: 'Inactive', className: 'bg-gray-400 text-white' },
       canceled: { label: 'Canceled', className: 'bg-red-100 text-red-700' },
       expired: { label: 'Expired', className: 'bg-red-500 text-white' },
@@ -288,7 +288,7 @@ const AdminMembers = () => {
             {hasPermission('users.import') && (
               <Button
                 onClick={() => setImportDialogOpen(true)}
-                className="bg-[#81B29A] hover:bg-[#6DA085] text-white rounded-xl h-12 px-6"
+                className="bg-success hover:bg-muted-teal-balanced text-white rounded-xl h-12 px-6"
               >
                 <Upload className="h-5 w-5 mr-2" />
                 Import
@@ -308,7 +308,7 @@ const AdminMembers = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setCreateDialogOpen(true)}
-                className="bg-[#81B29A] hover:bg-[#6DA085] text-white rounded-xl h-12 px-6"
+                className="bg-success hover:bg-muted-teal-balanced text-white rounded-xl h-12 px-6"
               >
                 <UserPlus className="h-5 w-5 mr-2" />
                 Create Member

src/pages/admin/AdminPermissions.js

@@ -187,7 +187,7 @@ const AdminPermissions = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      admin: { label: 'Admin', color: 'bg-[#81B29A]', icon: Shield },
+      admin: { label: 'Admin', color: 'bg-success', icon: Shield },
       member: { label: 'Member', color: 'bg-muted-foreground', icon: Shield },
       guest: { label: 'Guest', color: 'bg-gray-400', icon: Shield }
     };
@@ -326,7 +326,7 @@ const AdminPermissions = () => {
                         {perms.map(perm => (
                           <div
                             key={perm.code}
-                            className="flex items-start gap-4 p-4 rounded-xl hover:bg-[#F9F8FB] transition-colors border border-transparent hover:border-chart-6"
+                            className="flex items-start gap-4 p-4 rounded-xl hover:bg-bright-snow transition-colors border border-transparent hover:border-chart-6"
                           >
                             <Checkbox
                               checked={selectedPermissions[role].includes(perm.code)}
@@ -377,7 +377,7 @@ const AdminPermissions = () => {
           <Button
             onClick={handleSave}
             disabled={saving}
-            className="h-14 px-8 bg-[#81B29A] hover:bg-[#6DA085] text-white rounded-full shadow-lg text-lg font-semibold"
+            className="h-14 px-8 bg-success hover:bg-muted-teal-balanced text-white rounded-full shadow-lg text-lg font-semibold"
           >
             <Save className="h-5 w-5 mr-2" />
             {saving ? 'Saving...' : 'Save Changes'}
@@ -401,7 +401,7 @@ const AdminPermissions = () => {
             <AlertDialogCancel className="rounded-xl">Cancel</AlertDialogCancel>
             <AlertDialogAction
               onClick={confirmSave}
-              className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+              className="rounded-xl bg-success hover:bg-muted-teal-balanced text-white"
             >
               Confirm
             </AlertDialogAction>

src/pages/admin/AdminPlans.js

@@ -229,7 +229,7 @@ const AdminPlans = () => {
               <div className="flex flex-wrap gap-2 mb-4">
                 <Badge
                   className={`${plan.active
-                    ? 'bg-[#81B29A] text-white'
+                    ? 'bg-success text-white'
                     : 'bg-gray-400 text-white'
                     }`}
                 >

src/pages/admin/AdminStaff.js

@@ -100,7 +100,7 @@ const AdminStaff = () => {
   const getRoleBadge = (role) => {
     const config = {
       superadmin: { label: 'Superadmin', className: 'bg-muted-foreground text-white' },
-      admin: { label: 'Admin', className: 'bg-[#81B29A] text-white' },
+      admin: { label: 'Admin', className: 'bg-success text-white' },
       moderator: { label: 'Moderator', className: 'bg-chart-6 text-primary' },
       staff: { label: 'Staff', className: 'bg-gray-200 text-gray-700' },
       media: { label: 'Media', className: 'bg-gray-400 text-white' }
@@ -117,7 +117,7 @@ const AdminStaff = () => {
 
   const getStatusBadge = (status) => {
     const config = {
-      active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
+      active: { label: 'Active', className: 'bg-success text-white' },
       inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
     };
 
@@ -154,7 +154,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setCreateDialogOpen(true)}
-                className="bg-[#81B29A] hover:bg-[#6DA085] text-white rounded-xl h-12 px-6"
+                className="bg-success hover:bg-muted-teal-balanced text-white rounded-xl h-12 px-6"
               >
                 <UserPlus className="h-5 w-5 mr-2" />
                 Create Staff

src/pages/admin/AdminSubscriptions.js

@@ -318,12 +318,12 @@ Proceed with activation?`;
               <p className="text-sm text-muted-foreground" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Active Members
               </p>
-              <p className="text-3xl font-bold text-[#81B29A] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-success mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.active || 0}
               </p>
             </div>
-            <div className="p-3 bg-[#81B29A]/10 rounded-full">
+            <div className="p-3 bg-success/10 rounded-full">
-              <TrendingUp className="h-6 w-6 text-[#81B29A]" />
+              <TrendingUp className="h-6 w-6 text-success" />
             </div>
           </div>
         </Card>
@@ -419,7 +419,7 @@ Proceed with activation?`;
               <DropdownMenuTrigger asChild>
                 <Button
                   disabled={exporting}
-                  className="bg-[#81B29A] text-white hover:bg-[#6a9680] rounded-full px-6 py-2 flex items-center gap-2"
+                  className="bg-success text-white hover:bg-muted-teal-dark rounded-full px-6 py-2 flex items-center gap-2"
                 >
                   <Download className="h-4 w-4" />
                   {exporting ? 'Exporting...' : 'Export'}
@@ -452,7 +452,7 @@ Proceed with activation?`;
         <div className="md:hidden p-4 space-y-4">
           {filteredSubscriptions.length > 0 ? (
             filteredSubscriptions.map((sub) => (
-              <Card key={sub.id} className="p-4 border border-chart-6 bg-[#f9f5ff]/30">
+              <Card key={sub.id} className="p-4 border border-chart-6 bg-lavender-mist/30">
                 <div className="space-y-3">
                   {/* Member Info */}
                   <div className="flex justify-between items-start border-b border-chart-6 pb-3">
@@ -574,7 +574,7 @@ Proceed with activation?`;
             <tbody>
               {filteredSubscriptions.length > 0 ? (
                 filteredSubscriptions.map((sub) => (
-                  <tr key={sub.id} className="border-b border-chart-6 hover:bg-[#f9f5ff] transition-colors">
+                  <tr key={sub.id} className="border-b border-chart-6 hover:bg-lavender-mist transition-colors">
                     <td className="p-4">
                       <div className="font-medium text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {sub.user.first_name} {sub.user.last_name}
@@ -766,7 +766,7 @@ Proceed with activation?`;
               type="button"
               onClick={handleSaveSubscription}
               disabled={isUpdating}
-              className="bg-[#81B29A] text-white hover:bg-[#6FA087] rounded-full"
+              className="bg-success text-white hover:bg-[#6FA087] rounded-full"
             >
               {isUpdating ? (
                 <>

src/pages/admin/AdminUserView.js

@@ -303,7 +303,7 @@ const AdminUserView = () => {
             onClick={() => fileInputRef.current?.click()}
             disabled={uploadingPhoto}
             variant="outline"
-            className="border-2 border-[#81B29A] text-[#81B29A] hover:bg-[#E8F5E9] rounded-full px-4 py-2 disabled:opacity-50"
+            className="border-2 border-success text-success hover:bg-[#E8F5E9] rounded-full px-4 py-2 disabled:opacity-50"
           >
             <Upload className="h-4 w-4 mr-2" />
             {uploadingPhoto ? 'Uploading...' : 'Upload Photo'}
@@ -401,7 +401,7 @@ const AdminUserView = () => {
                       </p>
                     </div>
                     <Badge className={
-                      sub.status === 'active' ? 'bg-[#81B29A] text-white' :
+                      sub.status === 'active' ? 'bg-success text-white' :
                         sub.status === 'expired' ? 'bg-red-500 text-white' :
                           'bg-gray-400 text-white'
                     }>

src/pages/admin/AdminValidations.js

@@ -239,7 +239,7 @@ const AdminValidations = () => {
     const config = {
       pending_email: { label: 'Awaiting Email', className: 'bg-orange-100 text-orange-700' },
       pending_validation: { label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { label: 'Pre-Validated', className: 'bg-[#81B29A] text-white' },
+      pre_validated: { label: 'Pre-Validated', className: 'bg-success text-white' },
       payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' },
       rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' }
     };
@@ -415,7 +415,7 @@ const AdminValidations = () => {
                             onClick={() => handleReactivateUser(user)}
                             disabled={actionLoading === user.id}
                             size="sm"
-                            className="bg-[#81B29A] text-white hover:bg-[#6FA087]"
+                            className="bg-success text-white hover:bg-[#6FA087]"
                           >
                             {actionLoading === user.id ? 'Reactivating...' : 'Reactivate'}
                           </Button>
@@ -476,7 +476,7 @@ const AdminValidations = () => {
                                 onClick={() => handleValidateRequest(user)}
                                 disabled={actionLoading === user.id}
                                 size="sm"
-                                className="bg-[#81B29A] text-white hover:bg-[#6FA087]"
+                                className="bg-success text-white hover:bg-[#6FA087]"
                               >
                                 {actionLoading === user.id ? 'Validating...' : 'Validate'}
                               </Button>

src/pages/members/Bylaws.js

@@ -89,7 +89,7 @@ export default function Bylaws() {
                   <h2 className="text-2xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {currentBylaws.title}
                   </h2>
-                  <Badge className="bg-[#81B29A] text-white">
+                  <Badge className="bg-success text-white">
                     <Check className="h-3 w-3 mr-1" />
                     Current Version
                   </Badge>

src/pages/members/MemberCalendar.js

@@ -156,7 +156,7 @@ export default function MemberCalendar() {
 
             <div className="flex gap-4 ml-auto">
               <div className="flex items-center gap-2">
-                <div className="w-4 h-4 rounded bg-[#81B29A]"></div>
+                <div className="w-4 h-4 rounded bg-success"></div>
                 <span className="text-sm text-muted-foreground">Going</span>
               </div>
               <div className="flex items-center gap-2">
@@ -206,7 +206,7 @@ export default function MemberCalendar() {
                     {selectedEvent.user_rsvp_status && (
                       <Badge
                         className={`px-3 py-1 rounded-full text-sm ${selectedEvent.user_rsvp_status === 'yes'
-                          ? 'bg-[#81B29A] text-white'
+                          ? 'bg-success text-white'
                           : selectedEvent.user_rsvp_status === 'no'
                             ? 'bg-gray-400 text-white'
                             : 'bg-orange-400 text-white'
@@ -276,7 +276,7 @@ export default function MemberCalendar() {
                         disabled={rsvpLoading}
                         size="sm"
                         className={`rounded-full px-6 flex items-center gap-2 ${selectedEvent.user_rsvp_status === 'yes'
-                          ? 'bg-[#81B29A] text-white hover:bg-[#66927e]'
+                          ? 'bg-success text-white hover:bg-[#66927e]'
                           : 'bg-chart-6 text-primary hover:bg-[#c4bed8]'
                           }`}
                       >

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))',
@@ -54,25 +58,57 @@ module.exports = {
 					'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))',
+				},
+
+				/* ==================================
+				   Additional Colors (AI generated)
+				   ================================== */
+				'tangerine-dream': 'hsl(var(--tangerine-dream))',
+				'rebecca-purple': 'hsl(var(--rebecca-purple))',
+
+				'muted-teal-base': 'hsl(var(--muted-teal-base))',
+				'muted-teal-balanced': 'hsl(var(--muted-teal-balanced))',
+				'muted-teal-dark': 'hsl(var(--muted-teal-dark))',
+				'muted-teal-light': 'hsl(var(--muted-teal-light))',
+
+				'bright-snow': 'hsl(var(--bright-snow))',
+				'slate-grey': 'hsl(var(--slate-grey))',
+				'coral-glow': 'hsl(var(--coral-glow))',
+				'lavender-mist': 'hsl(var(--lavender-mist))',
+				'almond-cream': 'hsl(var(--almond-cream))',
+				'lavender-blush': 'hsl(var(--lavender-blush))',
+				'burnt-peach': 'hsl(var(--burnt-peach))',
+				'apricot-cream': 'hsl(var(--apricot-cream))',
+				'ghost-white': 'hsl(var(--ghost-white))',
+				'dusty-grape': 'hsl(var(--dusty-grape))',
 			},
 			keyframes: {
 				'accordion-down': {
-					from: {
+					from: { height: '0' },
-						height: '0'
+					to: { height: 'var(--radix-accordion-content-height)' }
-					},
-					to: {
-						height: 'var(--radix-accordion-content-height)'
-					}
 				},
 				'accordion-up': {
-					from: {
+					from: { height: 'var(--radix-accordion-content-height)' },
-						height: 'var(--radix-accordion-content-height)'
+					to: { height: '0' }
-					},
-					to: {
-						height: '0'
-					}
 				}
 			},
 			animation: {
@@ -81,6 +117,7 @@ module.exports = {
 			}
 		}
 	},
+
 	plugins: [
 		require("tailwindcss-animate"),
 		require("@tailwindcss/typography")