Updated font colors in style.css

style.css

@@ -1,33 +1,43 @@
 :root {
   --title-font-size: clamp(1.5rem, 6vw, 3rem);
   --subtitle-font-size: clamp(1rem, 2vw, 1.2rem);
+  --primary-color: #8B4049;     /* Soft burgundy */
+  --secondary-color: #A67F8E;   /* Muted mauve */
+  --accent-color: #D4A5A5;      /* Soft rose */
+  --text-color: #6D4E4E;        /* Muted brown */
+  --light-accent: #E8C5C5;      /* Light rose */
 }
 
 h1 {
   text-align: center;
   font-size: var(--title-font-size);
   display: block;
-  color: #FF4444;
+  color: var(--primary-color);
 }
 
 h2 {
   text-align: center;
   font-size: 2rem;
   display: block;
-  color: #FF4444;
+  color: var(--secondary-color);
 }
 
 p {
-  color: #800000;
+  color: var(--text-color);
 }
 
 #duplicate-button {
   display: block;
   margin: 1rem auto;
   color: #fff;
-  background: #c01515;
+  background: var(--primary-color);
   border-radius: 100vh;
   padding: 0.5rem 1rem;
+  transition: background-color 0.3s ease;
+}
+
+#duplicate-button:hover {
+  background: var(--secondary-color);
 }
 
 #component-0 {
@@ -50,14 +60,14 @@ p {
 
 #title {
   font-size: var(--title-font-size);
-  color: #FF0000;
+  color: var(--primary-color);
   font-family: 'Helvetica Neue', sans-serif;
   text-transform: uppercase;
   background: transparent;
 }
 
 #title span {
-  background: linear-gradient(45deg, #EF4E4E, #b42828);
+  background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
   background-clip: text;
   color: transparent;
 }
@@ -66,33 +76,54 @@ p {
   text-align: center;
   font-size: var(--subtitle-font-size);
   margin-top: 1rem;
-  color: #c01515;
+  color: var(--secondary-color);
 }
 
-/* Additional text elements you might want to style */
+/* Additional text elements styling */
 label {
-  color: #800000;
+  color: var(--text-color);
 }
 
 input, textarea {
-  color: #800000;
+  color: var(--text-color);
+  border: 1px solid var(--accent-color);
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+input:focus, textarea:focus {
+  border-color: var(--primary-color);
+  outline: none;
+  box-shadow: 0 0 5px var(--light-accent);
 }
 
 button {
   color: #fff;
-  background: #c01515;
+  background: var(--primary-color);
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background: var(--secondary-color);
 }
 
 /* Links styling */
 a {
-  color: #c01515;
+  color: var(--primary-color);
+  text-decoration: none;
+  transition: color 0.3s ease;
 }
 
 a:hover {
-  color: #FF4444;
+  color: var(--secondary-color);
 }
 
 /* List items styling */
 li {
-  color: #800000;
+  color: var(--text-color);
+}
+
+/* Selection styling */
+::selection {
+  background: var(--light-accent);
+  color: var(--primary-color);
 }