Inconsistent error state colors between Input and Select/Textarea components

[fouteox]

Description

There's an inconsistency in error state styling between form components in Catalyst:

• Input component: Uses red-500 for both light and dark modes
• Select and Textarea components: Use red-500 in light mode but red-600 in dark mode

Expected Behavior

All form components should use consistent error colors:

• Light mode: red-500
• Dark mode: red-600 (better visibility on dark backgrounds)

Current Behavior

Input (input.tsx)

// Border: Only red-500 for both modes
'data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-500 dark:data-invalid:data-hover:border-red-500'

// Shadow: Only red-500 for both modes
'has-data-invalid:before:shadow-red-500/10'

Select (select.tsx) and Textarea (textarea.tsx)

// Border: Different colors per mode
'data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-600 dark:data-invalid:data-hover:border-red-600'

Suggested Fix

Update the Input component to match Select/Textarea pattern for dark mode:

// Border
'data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:border-red-600 dark:data-invalid:data-hover:border-red-600'

// Shadow
'has-data-invalid:before:shadow-red-500/10 dark:has-data-invalid:before:shadow-red-600/10'

This would ensure consistent visual feedback across all form components and better accessibility in dark mode.

---

Question: Is the difference between error border colors (red-500/red-600) and error text colors (fieldset.tsx) (inverse pattern) intentional for visual hierarchy, or should they match?