Updated font colors in style.css

style.css

@@ -1,12 +1,12 @@
 :root {
   --title-font-size: clamp(1.5rem, 6vw, 3rem);
   --subtitle-font-size: clamp(1rem, 2vw, 1.2rem);
-  --title-color: #FF0000;       /* Bright red for title */
-  --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 */
+  --title-color: #FF0000;       /* Bright red title */
+  --primary-color: #333333;     /* Dark gray */
+  --secondary-color: #4A4A4A;   /* Medium gray */
+  --accent-color: #666666;      /* Light gray */
+  --text-color: #2B2B2B;        /* Near black for text */
+  --light-accent: #E0E0E0;      /* Very light gray */
 }
 
 h1 {
@@ -20,7 +20,7 @@ h2 {
   text-align: center;
   font-size: 2rem;
   display: block;
-  color: var(--secondary-color);
+  color: var(--primary-color);
 }
 
 p {
@@ -61,14 +61,14 @@ p {
 
 #title {
   font-size: var(--title-font-size);
-  color: var(--title-color);    /* Bright red title */
+  color: var(--title-color);
   font-family: 'Helvetica Neue', sans-serif;
   text-transform: uppercase;
   background: transparent;
 }
 
 #title span {
-  background: linear-gradient(45deg, #EF4E4E, #b42828);  /* Keeping bright red gradient */
+  background: linear-gradient(45deg, #EF4E4E, #b42828);
   background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
@@ -128,4 +128,61 @@ li {
 ::selection {
   background: var(--light-accent);
   color: var(--primary-color);
+}
+
+/* Form elements */
+select, input[type="text"], input[type="number"], textarea {
+  border: 1px solid var(--accent-color);
+  padding: 8px;
+  border-radius: 4px;
+  color: var(--text-color);
+  background-color: white;
+}
+
+select:focus, input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
+  border-color: var(--primary-color);
+  outline: none;
+  box-shadow: 0 0 3px var(--accent-color);
+}
+
+/* Tables if needed */
+table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1rem 0;
+}
+
+th, td {
+  border: 1px solid var(--accent-color);
+  padding: 8px;
+  text-align: left;
+  color: var(--text-color);
+}
+
+th {
+  background-color: var(--light-accent);
+  color: var(--primary-color);
+}
+
+/* Code blocks if needed */
+code {
+  background-color: var(--light-accent);
+  padding: 2px 4px;
+  border-radius: 3px;
+  color: var(--primary-color);
+}
+
+/* Alert messages if needed */
+.alert {
+  padding: 1rem;
+  margin: 1rem 0;
+  border-radius: 4px;
+  border: 1px solid var(--accent-color);
+  background-color: var(--light-accent);
+  color: var(--text-color);
+}
+
+/* Loading indicators if needed */
+.loading {
+  color: var(--secondary-color);
 }