src/index.css

@@ -4,16 +4,16 @@
 @import "./styles/animations.css";
 
 :root {
-  /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f6f0e9;
-  --card: #efe7dd;
-  --foreground: #2b180a;
-  --primary-cta: #2b180a;
-  --primary-cta-text: #f6f0e9;
-  --secondary-cta: #efe7dd;
-  --secondary-cta-text: #2b180a;
-  --accent: #94877c;
-  --background-accent: #afa094;
+  /* @colorThemes/magentaTheme */
+  --background: #FCE4EC; /* Very light pinkish-magenta */
+  --card: #F8BBD0;     /* Slightly darker pinkish-magenta */
+  --foreground: #880E4F; /* Dark, rich magenta */
+  --primary-cta: #C2185B; /* Vibrant magenta */
+  --primary-cta-text: #FFFFFF; /* White, for contrast with dark primary-cta */
+  --secondary-cta: #F48FB1; /* Lighter magenta */
+  --secondary-cta-text: #880E4F; /* Dark magenta, for contrast with light secondary-cta */
+  --accent: #AD1457;   /* A slightly darker accent magenta */
+  --background-accent: #E91E63; /* A more saturated background accent magenta */
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;
@@ -197,4 +197,4 @@ h6 {
      is always visible — when --secondary-cta is white-ish on a near-white page
      bg, a same-color border is invisible and the button disappears. */
   border: 1px solid color-mix(in srgb, var(--color-foreground) 18%, transparent);
-}
+}