src/components/ui/badge.jsx

@@ -28,6 +28,7 @@ const badgeVariants = cva(
         gray2: "border-transparent bg-gray-400 text-white hover:bg-gray-400/80",
         gray3:
           "border-transparent bg-gray-300 text-gray-600 hover:bg-gray-300/80",
+        purple: "bg-light-lavender",
       },
     },
     defaultVariants: {

src/components/ui/button.jsx

@@ -14,6 +14,7 @@ const buttonVariants = cva("btn", {
       accent: "btn-accent",
       destructive: "btn-destructive",
       link: "btn-link",
+      
     },
     size: {
       default: "btn-md",

src/components/ui/tabs.jsx

@@ -21,7 +21,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap hover:bg-[var(--lavender-300)] border-2 border-brand-purple  rounded-2xl px-3 py-1 text-brand-purple  text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap hover:bg-[var(--lavender-300)] border-2 border-brand-purple  rounded-2xl px-3 py-1 text-brand-purple  text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow dark:data-[state=active]:bg-brand-light-lavender dark:data-[state=active]:text-background dark:border-brand-light-lavender dark:text-brand-light-lavender",
       className
     )}
     {...props}

src/pages/Login.js

@@ -87,8 +87,8 @@ const Login = () => {
                 value={formData.email}
                 onChange={handleInputChange}
                 placeholder="your.email@example.com"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                className="h-14 rounded-xl border-2  focus:border-brand-purple "
-                data-testid="login-email-input"
+                data-testid="login-email-input "
               />
             </div>
 
@@ -114,7 +114,7 @@ const Login = () => {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              className="w-full py-6 text-lg font-medium shadow-lg hover:scale-105 disabled:opacity-50 btn-lavender"
               data-testid="login-submit-button"
             >
               {loading ? 'Logging in...' : 'Login'}

src/pages/admin/AdminBylaws.js

@@ -189,7 +189,7 @@ const AdminBylaws = () => {
         {hasPermission('bylaws.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-lavender flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Version
@@ -202,8 +202,8 @@ const AdminBylaws = () => {
         <Card className="p-6 border-2 border-brand-purple ">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
-              <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-3 rounded-xl">
+              <div className="bg-light-lavender p-3 rounded-xl">
-                <Scale className="h-6 w-6 text-white" />
+                <Scale className="h-6 w-6 " />
               </div>
               <div>
                 <h3 className="text-xl font-semibold text-[var(--purple-ink)]">
@@ -315,7 +315,7 @@ const AdminBylaws = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleDelete(bylawsDoc)}
-                        className="border-red-500 text-red-500 hover:bg-red-50"
+                        className="btn-outline-destructive"
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
@@ -482,9 +482,9 @@ const AdminBylaws = () => {
               Cancel
             </Button>
             <Button
-              variant="destructive"
+              variant="outline"
               onClick={confirmDelete}
-              className="bg-red-500 hover:bg-red-600"
+              className="btn-outline-destructive"
             >
               Delete
             </Button>

src/pages/admin/AdminDashboard.js

@@ -61,7 +61,7 @@ const AdminDashboard = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Admin Dashboard
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage users, events, and membership applications.
           </p>
         </div>
@@ -80,13 +80,13 @@ const AdminDashboard = () => {
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-total-users">
           <div className="flex items-center justify-between mb-4">
             <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-              <Users className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <Users className="h-6 w-6 text-brand-purple" />
             </div>
           </div>
           <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.totalMembers}
           </p>
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
+          <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
         </Card>
 
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-pending-validations">
@@ -98,7 +98,7 @@ const AdminDashboard = () => {
           <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.pendingValidations}
           </p>
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
+          <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
         </Card>
 
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-active-members">
@@ -110,7 +110,7 @@ const AdminDashboard = () => {
           <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.activeMembers}
           </p>
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
+          <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
         </Card>
       </div>
 
@@ -118,15 +118,15 @@ const AdminDashboard = () => {
       <div className="grid md:grid-cols-2 gap-8">
         <Link to="/admin/members">
           <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
-            <Users className="h-12 w-12 text-[var(--purple-lavender)] mb-4" />
+            <Users className="h-12 w-12 text-brand-purple mb-4" />
             <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               Manage Members
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               View and manage paying members and their subscription status.
             </p>
             <Button
-              className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
+              className="btn-lavender mt-4"
               data-testid="manage-users-button"
             >
               Go to Members
@@ -140,11 +140,11 @@ const AdminDashboard = () => {
             <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               Validation Queue
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Review and validate pending membership applications.
             </p>
             <Button
-              className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
+              className="mt-4 btn-lavender"
               data-testid="manage-validations-button"
             >
               View Validations
@@ -165,7 +165,7 @@ const AdminDashboard = () => {
                 <h3 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Members Needing Personal Outreach
                 </h3>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   These members have received multiple reminder emails. Consider calling them directly.
                 </p>
               </div>
@@ -185,7 +185,7 @@ const AdminDashboard = () => {
                             {user.totalReminders} reminder{user.totalReminders !== 1 ? 's' : ''}
                           </Badge>
                         </div>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           <p>Email: {user.email}</p>
                           <p>Phone: {user.phone || 'N/A'}</p>
                           <p className="capitalize">Status: {user.status.replace('_', ' ')}</p>
@@ -225,7 +225,7 @@ const AdminDashboard = () => {
             </div>
 
             <div className="mt-6 p-4 bg-[var(--neutral-800)]/20 rounded-lg border border-[var(--neutral-800)]">
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <strong>💡 Tip for helping older members:</strong> Many of our members are older ladies who may struggle with email.
                 A friendly phone call can help them complete the registration process and feel more welcomed to the community.
               </p>

src/pages/admin/AdminEvents.js

@@ -150,7 +150,7 @@ const AdminEvents = () => {
                   resetForm();
                   setEditingEvent(null);
                 }}
-                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
+                className="btn-lavender "
                 data-testid="create-event-button"
               >
                 <Plus className="mr-2 h-5 w-5" />

src/pages/admin/AdminFinancials.js

@@ -167,7 +167,7 @@ const AdminFinancials = () => {
         {hasPermission('financials.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-lavender flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Report
@@ -192,7 +192,7 @@ const AdminFinancials = () => {
           {reports.map(report => (
             <Card key={report.id} className="p-6">
               <div className="flex items-center gap-6">
-                <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-4 rounded-xl text-white min-w-[100px] text-center">
+                <div className="bg-light-lavender p-4 rounded-xl min-w-[100px] text-center">
                   <DollarSign className="h-6 w-6 mx-auto mb-1" />
                   <div className="text-2xl font-bold">{report.year}</div>
                 </div>

src/pages/admin/AdminGallery.js

@@ -196,7 +196,7 @@ const AdminGallery = () => {
                   </p>
                   <Link to="/admin/events">
                     <Button
-                      className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl text-sm"
+                      className="btn-lavender  text-sm"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       <Calendar className="h-4 w-4 mr-2" />
@@ -221,7 +221,7 @@ const AdminGallery = () => {
               <Button
                 onClick={() => fileInputRef.current?.click()}
                 disabled={uploading}
-                className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl"
+                className="btn-lavender "
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 {uploading ? (
@@ -251,7 +251,7 @@ const AdminGallery = () => {
             <h2 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Gallery Images
             </h2>
-            <Badge className="bg-brand-purple  text-white px-3 py-1">
+            <Badge variant="purple" className=" px-3 py-1">
               {galleryImages.length} {galleryImages.length === 1 ? 'image' : 'images'}
             </Badge>
           </div>

src/pages/admin/AdminNewsletters.js

@@ -195,7 +195,7 @@ const AdminNewsletters = () => {
         {hasPermission('newsletters.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-light-lavender flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Newsletter

src/pages/admin/AdminPlans.js

@@ -141,7 +141,7 @@ const AdminPlans = () => {
           {hasPermission('subscriptions.plans') && (
             <Button
               onClick={handleCreatePlan}
-              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
+              className="btn-lavender "
             >
               <Plus className="h-4 w-4 mr-2" />
               Create Plan

src/pages/admin/AdminRoles.js

@@ -193,7 +193,7 @@ const AdminRoles = () => {
             Create and manage custom roles with specific permissions
           </p>
         </div>
-        <Button onClick={() => setShowCreateModal(true)}>
+        <Button className="btn-lavender " onClick={() => setShowCreateModal(true)}>
           <Plus className="w-4 h-4 mr-2" />
           Create Role
         </Button>

src/pages/admin/AdminStaff.js

@@ -99,16 +99,16 @@ const AdminStaff = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-brand-purple  text-white' },
+      superadmin: { label: 'Superadmin', variant: 'purple' },
-      admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
+      admin: { label: 'Admin', variant: 'green' },
-      moderator: { label: 'Moderator', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
+      moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
-      staff: { label: 'Staff', className: 'bg-gray-200 text-gray-700' },
+      staff: { label: 'Staff', variant: 'gray' },
-      media: { label: 'Media', className: 'bg-gray-400 text-white' }
+      media: { label: 'Media', variant: 'gray2' }
     };
 
     const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
     return (
-      <Badge className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
+      <Badge variant={roleConfig.variant} className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
         <Shield className="h-3 w-3 mr-1 inline" />
         {roleConfig.label}
       </Badge>
@@ -117,13 +117,13 @@ const AdminStaff = () => {
 
   const getStatusBadge = (status) => {
     const config = {
-      active: { label: 'Active', className: 'bg-[var(--green-light)] text-white' },
+      active: { label: 'Active', variant: 'green' },
       inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
     };
 
     const statusConfig = config[status] || config.inactive;
     return (
-      <Badge className={`${statusConfig.className} px-3 py-1 rounded-full text-sm`}>
+      <Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
         {statusConfig.label}
       </Badge>
     );
@@ -145,7 +145,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
-                className="bg-brand-purple  hover:bg-[var(--purple-ink)] dark:hover:bg-brand-dark-lavender text-white rounded-xl h-12 px-6"
+                className="btn-util-purple  h-12 px-6"
               >
                 <Mail className="h-5 w-5 mr-2" />
                 Invite Staff
@@ -154,7 +154,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setCreateDialogOpen(true)}
-                className="bg-[var(--green-light)] hover:bg-[var(--green-sage)] text-white rounded-xl h-12 px-6"
+                className="btn-util-green h-12 px-6"
               >
                 <UserPlus className="h-5 w-5 mr-2" />
                 Create Staff
@@ -195,11 +195,11 @@ const AdminStaff = () => {
       {/* Tabs */}
       <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
         <TabsList className="grid w-full grid-cols-2 mb-8">
-          <TabsTrigger value="staff-list" className="text-lg py-3">
+          <TabsTrigger value="staff-list" className="text-lg  py-3">
             <UserCog className="h-5 w-5 mr-2" />
             Staff Members
           </TabsTrigger>
-          <TabsTrigger value="pending-invitations" className="text-lg py-3">
+          <TabsTrigger value="pending-invitations" className="text-lg py-3  ">
             <Mail className="h-5 w-5 mr-2" />
             Pending Invitations
           </TabsTrigger>

src/pages/admin/AdminValidations.js

@@ -450,7 +450,7 @@ const AdminValidations = () => {
                               <Button
                                 onClick={() => handleActivatePayment(user)}
                                 size="sm"
-                                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
+                                className="btn-light-lavender"
                               >
                                 <CheckCircle className="h-4 w-4 mr-1" />
                                 Activate Payment

src/styles/components.css

@@ -9,31 +9,35 @@
   }
 
   .btn-primary {
-    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6;
+    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6 transition-transform;
   }
 
   .btn-secondary {
-    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6;
+    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6 transition-transform;
   }
 
   .btn-ghost {
-    @apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6;
+    @apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6 transition-transform;
   }
 
   .btn-outline {
-    @apply border border-primary border-2 bg-white text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50  px-6;
+    @apply border border-primary border-2 text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50  px-6 transition-transform;
   }
 
   .btn-accent {
-    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50  px-6;
+    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50  px-6 transition-transform;
   }
 
   .btn-destructive {
-    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50  px-6;
+    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50  px-6 transition-transform;
+  }
+
+  .btn-outline-destructive {
+    @apply border border-destructive border-2 text-destructive shadow-sm hover:bg-destructive/10 dark:hover:bg-destructive/10 rounded-full disabled:opacity-50  px-6 transition-transform;
   }
 
   .btn-link {
-    @apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6;
+    @apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6 transition-transform;
   }
 
   .btn-sm {
@@ -52,26 +56,38 @@
     @apply h-9 w-9 rounded-full disabled:opacity-50 px-6;
   }
   .btn-util-green {
-    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white rounded-xl h-12 px-6;
+    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-xl h-12 px-6 transition-transform;
   }
 
   .btn-util-purple {
-    @apply bg-brand-purple  hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6;
+    @apply bg-[var(--purple-lavender)] transition-transform hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
   }
 
   .btn-light-orange {
-    @apply bg-brand-light-orange  hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6;
+    @apply bg-brand-light-orange  hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
   }
   .btn-pink {
-    @apply bg-brand-pink  hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6;
+    @apply bg-brand-pink  hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
   }
-.btn-lavender {
+  .btn-lavender {
-    @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender
+    @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender;
   }
+  .btn-light-lavender {
+    @apply bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender rounded-full px-6 transition-transform dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender ;
+  }
+
+  /* Badges */
+ 
   .badge {
-    @apply px-3 py-1 rounded-full text-sm font-medium ;
+    @apply px-3 py-1 rounded-full text-sm font-medium transition-transform;
   }
   .badge-green {
-    @apply bg-[var(--green-light)] text-white;
+    @apply bg-[var(--green-light)] text-white transition-transform;
   }
+ /* Backgrounds */
+    .bg-light-lavender {
+    @apply bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] text-white bg-[var(--neutral-800)] transition-transform dark:bg-brand-lavender dark:text-brand-dark-lavender;
+  }
+
+
 }

src/styles/theme.css

@@ -118,6 +118,12 @@
     --neutral-900: #ffffff;
   }
   .dark {
+    /* 
+    ==========================
+      Dark Theme Colors
+    ==========================
+    */
+
     --background: 246 28% 8%;
     --foreground: 255 30% 92%;
 
@@ -155,6 +161,14 @@
 
     --radius: 0.5rem;
 
+    /* 
+    =========================
+      Brand Colors
+    =========================
+    */
+
+    --brand-purple: 262 46% 80%;
+
     /* -------- Purples (Primary UI) -------- */
     --purple-ink: #422268; /* deepest background */
     --purple-ink: hsl(var(--brand-light-lavender)); /* deepest background */