Refactor color classes to use new success color variable across admin and member pages; update Tailwind config to include success color definition.

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%;
-    --foreground: 0 0% 98%;
+    --background: var(--brand-dark-lavender);
+    --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-foreground: 0 0% 98%;
+    --secondary: var(--brand-purple);
+    --secondary-foreground: 280 47% 27%;
     --muted: 0 0% 14.9%;
     --muted-foreground: 0 0% 63.9%;
-    /* --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%; */
-    --accent: 17 100% 73%;
+    --accent: var(--brand-lavender);
     --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);
   }
 }