feat: Update text colors for improved accessibility and consistency across login and registration forms

src/app/globals.css

@@ -9,6 +9,12 @@
   --color-brand-header: #0F172A;
   --color-brand-text: #4A4A4A;
   --color-brand-background: #FFFFFF;
+  
+  /* Text Colors - Better contrast */
+  --color-text-primary: #0F172A;     /* Dark slate for main text */
+  --color-text-secondary: #334155;   /* Slate 700 for secondary text */
+  --color-text-muted: #64748B;       /* Slate 500 for muted text */
+  --color-text-subtle: #94A3B8;      /* Slate 400 for subtle text */
 }
 
 /* Theme variables moved to :root for compatibility */
@@ -34,6 +40,49 @@ html, body {
   overflow-x: hidden;
 }
 
+/* Better text color utilities */
+.text-primary {
+  color: var(--color-text-primary) !important;
+}
+
+.text-secondary {
+  color: var(--color-text-secondary) !important;
+}
+
+.text-muted {
+  color: var(--color-text-muted) !important;
+}
+
+.text-subtle {
+  color: var(--color-text-subtle) !important;
+}
+
+/* Override problematic gray colors */
+.text-gray-500 {
+  color: var(--color-text-muted) !important;
+}
+
+.text-gray-400 {
+  color: var(--color-text-subtle) !important;
+}
+
+.text-gray-300 {
+  color: var(--color-text-subtle) !important;
+}
+
+/* Fix placeholder colors for better contrast */
+.placeholder-gray-400::placeholder {
+  color: var(--color-text-muted) !important;
+}
+
+.placeholder-gray-300::placeholder {
+  color: var(--color-text-muted) !important;
+}
+
+input::placeholder, textarea::placeholder {
+  color: var(--color-text-muted) !important;
+}
+
 #__next {
   height: 100%;
 }

src/app/login/components/LoginForm.tsx

@@ -248,7 +248,7 @@ export default function LoginForm() {
                 autoComplete="email"
                 value={formData.email}
                 onChange={handleInputChange}
-                className="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
+                className="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
                 style={{
                   fontSize: isMobile ? '0.875rem' : undefined,
                   padding: isMobile ? '0.4rem 0.75rem' : undefined,
@@ -278,7 +278,7 @@ export default function LoginForm() {
                   autoComplete="current-password"
                   value={formData.password}
                   onChange={handleInputChange}
-                  className="appearance-none block w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
+                  className="appearance-none block w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition"
                   style={{
                     fontSize: isMobile ? '0.875rem' : undefined,
                     padding: isMobile ? '0.4rem 2.5rem 0.4rem 0.75rem' : '0.75rem 3rem 0.75rem 1rem',
@@ -292,9 +292,9 @@ export default function LoginForm() {
                   className="absolute inset-y-0 right-0 pr-3 flex items-center"
                 >
                   {showPassword ? (
-                    <EyeSlashIcon className="h-5 w-5 text-gray-400 hover:text-[#8D6B1D] transition-colors" />
+                    <EyeSlashIcon className="h-5 w-5 text-slate-500 hover:text-[#8D6B1D] transition-colors" />
                   ) : (
-                    <EyeIcon className="h-5 w-5 text-gray-400 hover:text-[#8D6B1D] transition-colors" />
+                    <EyeIcon className="h-5 w-5 text-slate-500 hover:text-[#8D6B1D] transition-colors" />
                   )}
                 </button>
               </div>
@@ -310,7 +310,7 @@ export default function LoginForm() {
                     onChange={handleInputChange}
                     className="h-4 w-4 text-[#8D6B1D] border-2 border-gray-300 rounded focus:ring-[#8D6B1D] focus:ring-2"
                   />
-                  <label htmlFor="rememberMe" className="ml-2 text-sm text-[#4A4A4A]">
+                  <label htmlFor="rememberMe" className="ml-2 text-sm text-slate-700">
                     Angemeldet bleiben
                   </label>
                 </div>
@@ -322,7 +322,7 @@ export default function LoginForm() {
                     checked={showPassword}
                     onChange={(e) => setShowPassword(e.target.checked)}
                   />
-                  <label htmlFor="show-password" className="ml-2 text-sm text-[#4A4A4A]">
+                  <label htmlFor="show-password" className="ml-2 text-sm text-slate-700">
                     Passwort anzeigen
                   </label>
                 </div>
@@ -401,7 +401,7 @@ export default function LoginForm() {
               }}
             >
               <p
-                className="text-base text-[#4A4A4A]"
+                className="text-base text-slate-700"
                 style={{
                   fontSize: isMobile ? '0.8rem' : undefined,
                 }}

src/app/login/page.tsx

@@ -34,7 +34,7 @@ export default function LoginPage() {
         <div className="min-h-screen flex items-center justify-center">
           <div className="text-center">
             <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#8D6B1D] mx-auto mb-4"></div>
-            <p className="text-[#4A4A4A]">You are already logged in. Redirecting...</p>
+            <p className="text-slate-700">You are already logged in. Redirecting...</p>
           </div>
         </div>
       </PageLayout>
@@ -52,7 +52,7 @@ export default function LoginPage() {
         
         {/* Footer for mobile */}
         <div className="relative z-10 md:hidden">
-          <div className="text-center py-4 text-sm text-[#4A4A4A]">
+          <div className="text-center py-4 text-sm text-slate-700">
             © 2024 Profit Planet. Alle Rechte vorbehalten.
           </div>
         </div>

src/app/register/components/RegisterForm.tsx

@@ -240,10 +240,10 @@ export default function RegisterForm({
     
     return (
       <div className="mt-2">
-        <div className="text-sm text-[#4A4A4A] mb-2">Passwort-Anforderungen:</div>
+        <div className="text-sm text-slate-700 mb-2">Passwort-Anforderungen:</div>
         <ul className="text-sm space-y-1">
-          {rules.map((rule, index) => (
+                {rules.map((rule, index) => (
-            <li key={index} className={`flex items-center gap-2 ${rule.test ? 'text-green-600' : 'text-gray-500'}`}>
+            <li key={index} className={`flex items-center gap-2 ${rule.test ? 'text-green-600' : 'text-slate-600'}`}>
               <span>{rule.test ? '✓' : '○'}</span>
               <span>{rule.text}</span>
             </li>
@@ -274,7 +274,7 @@ export default function RegisterForm({
             className={`px-6 py-2 rounded-md font-semibold text-sm transition-all duration-200 ${
               mode === 'personal'
                 ? 'bg-[#8D6B1D] text-white shadow-sm'
-                : 'bg-transparent text-[#4A4A4A] hover:text-[#8D6B1D]'
+                : 'bg-transparent text-slate-700 hover:text-[#8D6B1D]'
             }`}
             onClick={() => setMode('personal')}
             type="button"
@@ -285,7 +285,7 @@ export default function RegisterForm({
             className={`px-6 py-2 rounded-md font-semibold text-sm transition-all duration-200 ${
               mode === 'company'
                 ? 'bg-[#8D6B1D] text-white shadow-sm'
-                : 'bg-transparent text-[#4A4A4A] hover:text-[#8D6B1D]'
+                : 'bg-transparent text-slate-700 hover:text-[#8D6B1D]'
             }`}
             onClick={() => setMode('company')}
             type="button"
@@ -317,7 +317,7 @@ export default function RegisterForm({
                   name="firstName"
                   value={personalForm.firstName}
                   onChange={handlePersonalChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -332,7 +332,7 @@ export default function RegisterForm({
                   name="lastName"
                   value={personalForm.lastName}
                   onChange={handlePersonalChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -349,7 +349,7 @@ export default function RegisterForm({
                   name="email"
                   value={personalForm.email}
                   onChange={handlePersonalChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -364,7 +364,7 @@ export default function RegisterForm({
                   name="confirmEmail"
                   value={personalForm.confirmEmail}
                   onChange={handlePersonalChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -380,7 +380,7 @@ export default function RegisterForm({
                 name="phoneNumber"
                 value={personalForm.phoneNumber}
                 onChange={handlePersonalChange}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                 placeholder="+49 123 456 7890"
               />
             </div>
@@ -397,7 +397,7 @@ export default function RegisterForm({
                     name="password"
                     value={personalForm.password}
                     onChange={handlePersonalChange}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                     required
                   />
                   <button
@@ -406,9 +406,9 @@ export default function RegisterForm({
                     className="absolute inset-y-0 right-0 pr-3 flex items-center"
                   >
                     {showPersonalPassword ? (
-                      <EyeSlashIcon className="h-4 w-4 text-gray-400" />
+                      <EyeSlashIcon className="h-4 w-4 text-slate-600" />
                     ) : (
-                      <EyeIcon className="h-4 w-4 text-gray-400" />
+                      <EyeIcon className="h-4 w-4 text-slate-600" />
                     )}
                   </button>
                 </div>
@@ -425,7 +425,7 @@ export default function RegisterForm({
                   name="confirmPassword"
                   value={personalForm.confirmPassword}
                   onChange={handlePersonalChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -463,7 +463,7 @@ export default function RegisterForm({
                   name="companyName"
                   value={companyForm.companyName}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -478,7 +478,7 @@ export default function RegisterForm({
                   name="contactPersonName"
                   value={companyForm.contactPersonName}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -495,7 +495,7 @@ export default function RegisterForm({
                   name="companyEmail"
                   value={companyForm.companyEmail}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -510,7 +510,7 @@ export default function RegisterForm({
                   name="confirmCompanyEmail"
                   value={companyForm.confirmCompanyEmail}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -527,7 +527,7 @@ export default function RegisterForm({
                   name="companyPhone"
                   value={companyForm.companyPhone}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   placeholder="+49 123 456 7890"
                 />
               </div>
@@ -542,7 +542,7 @@ export default function RegisterForm({
                   name="contactPersonPhone"
                   value={companyForm.contactPersonPhone}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   placeholder="+49 123 456 7890"
                 />
               </div>
@@ -560,7 +560,7 @@ export default function RegisterForm({
                     name="password"
                     value={companyForm.password}
                     onChange={handleCompanyChange}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                     required
                   />
                   <button
@@ -569,9 +569,9 @@ export default function RegisterForm({
                     className="absolute inset-y-0 right-0 pr-3 flex items-center"
                   >
                     {showCompanyPassword ? (
-                      <EyeSlashIcon className="h-4 w-4 text-gray-400" />
+                      <EyeSlashIcon className="h-4 w-4 text-slate-600" />
                     ) : (
-                      <EyeIcon className="h-4 w-4 text-gray-400" />
+                      <EyeIcon className="h-4 w-4 text-slate-600" />
                     )}
                   </button>
                 </div>
@@ -588,7 +588,7 @@ export default function RegisterForm({
                   name="confirmPassword"
                   value={companyForm.confirmPassword}
                   onChange={handleCompanyChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent transition-colors text-primary"
                   required
                 />
               </div>
@@ -618,7 +618,7 @@ export default function RegisterForm({
       
       {/* Login Link */}
       <div className="mt-8 text-center">
-        <p className="text-[#4A4A4A]">
+        <p className="text-slate-700">
           Bereits registriert?{' '}
           <a 
             href="/login" 

src/app/register/page.tsx

@@ -104,7 +104,7 @@ export default function RegisterPage() {
               <h1 className="text-4xl font-semibold tracking-tight text-white sm:text-5xl">
                 Registriere dich jetzt
               </h1>
-              <p className="mt-2 text-lg/8 text-gray-300">
+              <p className="mt-2 text-lg/8 text-gray-200">
                 Erstelle dein persönliches oder Unternehmens-Konto bei Profit
                 Planet.
               </p>
@@ -132,7 +132,7 @@ export default function RegisterPage() {
                     />
                   )}
                   {registered && (
-                    <div className="mt-6 mx-auto text-center text-sm text-gray-300">
+                    <div className="mt-6 mx-auto text-center text-sm text-gray-200">
                       Registrierung erfolgreich – Weiterleitung...
                     </div>
                   )}