Description 📝

• Fixed low-contrast text colors in feedback component that were making content difficult to read
• Resolved dark background input fields appearing in light mode
• Improved dark mode textarea visibility by adding proper contrast

Previously, the feedback section was using hardcoded neutral colors that created accessibility issues:

.form h3 {
  color: var(--primary-neutral-200); /* Too light */
}

.form input,
.form textarea {
  color: var(--primary-neutral-200);
  background-color: var(--primary-dark); /* Black bg in light mode */
}

.textAreaLabel p {
  color: var(--primary-neutral-300); /* Very light gray */
}

Light Mode

Dark Mode

Now we're using semantic color variables that adapt properly to both themes:

.form h3 {
  color: var(--heading-color); /* Theme-aware heading color */
}

.form input,
.form textarea {
  color: var(--heading-color);
  background-color: var(--main-bg-color); /* White in light, dark in dark */
}

html[data-theme='dark'] .form input,
html[data-theme='dark'] .form textarea {
  border: 1px solid var(--primary-neutral-600);
  background-color: var(--primary-neutral-800);
  color: var(--primary-neutral-200);
}

Light Mode

Dark Mode

The changes ensure proper contrast ratios for accessibility compliance while maintaining visual hierarchy. Text inputs now have appropriate backgrounds in both light and dark modes, and all text elements use semantic color variables that provide sufficient contrast against their backgrounds. You know, like they should.