add signup page

phd-advisor-frontend/src/components/Signup.js

@@ -0,0 +1,407 @@
+import React, { useState } from 'react';
+import { Eye, EyeOff, Mail, Lock, User, ArrowRight, BookOpen, Phone, GraduationCap } from 'lucide-react';
+import '../styles/Signup.css';
+
+const Signup = ({ onNavigateToLogin, onNavigateToHome }) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+    academicStage: '',
+    researchArea: ''
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+
+  const academicStages = [
+    { value: '', label: 'Select your stage' },
+    { value: 'prospective', label: 'Prospective PhD Student' },
+    { value: 'first-year', label: 'First Year PhD' },
+    { value: 'coursework', label: 'Coursework Phase' },
+    { value: 'qualifying', label: 'Qualifying Exams' },
+    { value: 'dissertation', label: 'Dissertation Phase' },
+    { value: 'writing', label: 'Writing & Defense' },
+    { value: 'postdoc', label: 'Postdoc' },
+    { value: 'faculty', label: 'Faculty/Researcher' }
+  ];
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+    // Clear error when user starts typing
+    if (errors[name]) {
+      setErrors(prev => ({
+        ...prev,
+        [name]: ''
+      }));
+    }
+  };
+
+  const validateForm = () => {
+    const newErrors = {};
+    
+    if (!formData.firstName.trim()) {
+      newErrors.firstName = 'First name is required';
+    }
+    
+    if (!formData.lastName.trim()) {
+      newErrors.lastName = 'Last name is required';
+    }
+    
+    if (!formData.email) {
+      newErrors.email = 'Email is required';
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = 'Please enter a valid email address';
+    }
+    
+    if (!formData.password) {
+      newErrors.password = 'Password is required';
+    } else if (formData.password.length < 8) {
+      newErrors.password = 'Password must be at least 8 characters';
+    } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(formData.password)) {
+      newErrors.password = 'Password must contain uppercase, lowercase, and number';
+    }
+    
+    if (!formData.confirmPassword) {
+      newErrors.confirmPassword = 'Please confirm your password';
+    } else if (formData.password !== formData.confirmPassword) {
+      newErrors.confirmPassword = 'Passwords do not match';
+    }
+    
+    if (!formData.academicStage) {
+      newErrors.academicStage = 'Please select your academic stage';
+    }
+    
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!validateForm()) return;
+    
+    setIsLoading(true);
+    
+    try {
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      
+      // For demo purposes, we'll just navigate to home
+      // In real implementation, handle user registration here
+      console.log('Signup attempt:', formData);
+      onNavigateToHome?.();
+      
+    } catch (error) {
+      console.error('Signup error:', error);
+      setErrors({ submit: 'Registration failed. Please try again.' });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleGoogleSignUp = () => {
+    console.log('Google Sign Up clicked');
+    // Future Google Auth integration will go here
+  };
+
+  const handlePhoneSignUp = () => {
+    console.log('Phone Sign Up clicked');
+    // Future Phone Auth integration will go here
+  };
+
+  return (
+    <div className="signup-page">
+      <div className="signup-container">
+        {/* Header */}
+        <div className="signup-header">
+          <div className="logo-container">
+            <BookOpen className="logo-icon" />
+          </div>
+          <h1 className="signup-title">Join Our Community</h1>
+          <p className="signup-subtitle">
+            Create your account to get personalized PhD guidance from expert advisors
+          </p>
+        </div>
+
+        {/* Main Signup Form */}
+        <div className="signup-form-container">
+          <form onSubmit={handleSubmit} className="signup-form">
+            
+            {/* Name Fields Row */}
+            <div className="form-row">
+              <div className="form-group">
+                <label htmlFor="firstName" className="form-label">
+                  First Name
+                </label>
+                <div className="input-container">
+                  <User className="input-icon" />
+                  <input
+                    type="text"
+                    id="firstName"
+                    name="firstName"
+                    value={formData.firstName}
+                    onChange={handleInputChange}
+                    className={`form-input ${errors.firstName ? 'error' : ''}`}
+                    placeholder="First name"
+                    disabled={isLoading}
+                  />
+                </div>
+                {errors.firstName && (
+                  <span className="error-message">{errors.firstName}</span>
+                )}
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="lastName" className="form-label">
+                  Last Name
+                </label>
+                <div className="input-container">
+                  <User className="input-icon" />
+                  <input
+                    type="text"
+                    id="lastName"
+                    name="lastName"
+                    value={formData.lastName}
+                    onChange={handleInputChange}
+                    className={`form-input ${errors.lastName ? 'error' : ''}`}
+                    placeholder="Last name"
+                    disabled={isLoading}
+                  />
+                </div>
+                {errors.lastName && (
+                  <span className="error-message">{errors.lastName}</span>
+                )}
+              </div>
+            </div>
+
+            {/* Email Field */}
+            <div className="form-group">
+              <label htmlFor="email" className="form-label">
+                Email Address
+              </label>
+              <div className="input-container">
+                <Mail className="input-icon" />
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleInputChange}
+                  className={`form-input ${errors.email ? 'error' : ''}`}
+                  placeholder="Enter your email"
+                  disabled={isLoading}
+                />
+              </div>
+              {errors.email && (
+                <span className="error-message">{errors.email}</span>
+              )}
+            </div>
+
+            {/* Password Fields Row */}
+            <div className="form-row">
+              <div className="form-group">
+                <label htmlFor="password" className="form-label">
+                  Password
+                </label>
+                <div className="input-container">
+                  <Lock className="input-icon" />
+                  <input
+                    type={showPassword ? 'text' : 'password'}
+                    id="password"
+                    name="password"
+                    value={formData.password}
+                    onChange={handleInputChange}
+                    className={`form-input ${errors.password ? 'error' : ''}`}
+                    placeholder="Create password"
+                    disabled={isLoading}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="password-toggle"
+                    disabled={isLoading}
+                  >
+                    {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                  </button>
+                </div>
+                {errors.password && (
+                  <span className="error-message">{errors.password}</span>
+                )}
+              </div>
+
+              <div className="form-group">
+                <label htmlFor="confirmPassword" className="form-label">
+                  Confirm Password
+                </label>
+                <div className="input-container">
+                  <Lock className="input-icon" />
+                  <input
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    value={formData.confirmPassword}
+                    onChange={handleInputChange}
+                    className={`form-input ${errors.confirmPassword ? 'error' : ''}`}
+                    placeholder="Confirm password"
+                    disabled={isLoading}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    className="password-toggle"
+                    disabled={isLoading}
+                  >
+                    {showConfirmPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                  </button>
+                </div>
+                {errors.confirmPassword && (
+                  <span className="error-message">{errors.confirmPassword}</span>
+                )}
+              </div>
+            </div>
+
+            {/* Academic Stage */}
+            <div className="form-group">
+              <label htmlFor="academicStage" className="form-label">
+                Academic Stage
+              </label>
+              <div className="input-container">
+                <GraduationCap className="input-icon" />
+                <select
+                  id="academicStage"
+                  name="academicStage"
+                  value={formData.academicStage}
+                  onChange={handleInputChange}
+                  className={`form-select ${errors.academicStage ? 'error' : ''}`}
+                  disabled={isLoading}
+                >
+                  {academicStages.map(stage => (
+                    <option key={stage.value} value={stage.value}>
+                      {stage.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              {errors.academicStage && (
+                <span className="error-message">{errors.academicStage}</span>
+              )}
+            </div>
+
+            {/* Research Area (Optional) */}
+            <div className="form-group">
+              <label htmlFor="researchArea" className="form-label">
+                Research Area <span className="optional">(Optional)</span>
+              </label>
+              <div className="input-container">
+                <BookOpen className="input-icon" />
+                <input
+                  type="text"
+                  id="researchArea"
+                  name="researchArea"
+                  value={formData.researchArea}
+                  onChange={handleInputChange}
+                  className="form-input"
+                  placeholder="e.g., Computer Science, Biology, Psychology..."
+                  disabled={isLoading}
+                />
+              </div>
+            </div>
+
+            {/* Terms and Privacy */}
+            <div className="terms-section">
+              <p className="terms-text">
+                By creating an account, you agree to our{' '}
+                <button type="button" className="link-btn">Terms of Service</button>
+                {' '}and{' '}
+                <button type="button" className="link-btn">Privacy Policy</button>
+              </p>
+            </div>
+
+            {/* Submit Error */}
+            {errors.submit && (
+              <div className="submit-error">
+                {errors.submit}
+              </div>
+            )}
+
+            {/* Submit Button */}
+            <button 
+              type="submit" 
+              className={`submit-btn ${isLoading ? 'loading' : ''}`}
+              disabled={isLoading}
+            >
+              {isLoading ? (
+                <>
+                  <div className="loading-spinner"></div>
+                  Creating Account...
+                </>
+              ) : (
+                <>
+                  Create Account
+                  <ArrowRight size={16} />
+                </>
+              )}
+            </button>
+          </form>
+
+          {/* Divider */}
+          <div className="divider">
+            <span>or sign up with</span>
+          </div>
+
+          {/* Social Signup Options */}
+          <div className="social-signup">
+            <button 
+              type="button" 
+              className="google-btn"
+              onClick={handleGoogleSignUp}
+              disabled={isLoading}
+            >
+              <svg className="google-icon" viewBox="0 0 24 24">
+                <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+              </svg>
+              Continue with Google
+            </button>
+
+            <button 
+              type="button" 
+              className="phone-btn"
+              onClick={handlePhoneSignUp}
+              disabled={isLoading}
+            >
+              <Phone size={16} />
+              Continue with Phone
+            </button>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="signup-footer">
+          <p>
+            Already have an account?{' '}
+            <button 
+              type="button" 
+              className="link-btn"
+              onClick={onNavigateToLogin}
+            >
+              Sign in here
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Signup;

phd-advisor-frontend/src/styles/Signup.css

@@ -0,0 +1,594 @@
+/* Signup.css */
+
+.signup-page {
+  min-height: 100vh;
+  background: var(--bg-gradient);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 16px;
+}
+
+.signup-container {
+  width: 100%;
+  max-width: 520px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 20px;
+  box-shadow: var(--shadow-xl);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  overflow: hidden;
+  animation: fadeInUp 0.6s ease-out;
+}
+
+[data-theme="dark"] .signup-container {
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+}
+
+/* Header Section */
+.signup-header {
+  text-align: center;
+  padding: 40px 32px 32px 32px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.logo-container {
+  width: 56px;
+  height: 56px;
+  background: var(--accent-gradient);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px auto;
+  box-shadow: var(--shadow-md);
+}
+
+.logo-icon {
+  width: 28px;
+  height: 28px;
+  color: #FFFFFF;
+}
+
+.signup-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 8px 0;
+  line-height: 1.2;
+}
+
+.signup-subtitle {
+  font-size: 16px;
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* Form Container */
+.signup-form-container {
+  padding: 32px;
+}
+
+.signup-form {
+  margin-bottom: 24px;
+}
+
+/* Form Groups and Rows */
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.form-row .form-group {
+  margin-bottom: 0;
+}
+
+.form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.optional {
+  font-weight: 400;
+  color: var(--text-tertiary);
+  font-size: 13px;
+}
+
+/* Input Container */
+.input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-icon {
+  position: absolute;
+  left: 16px;
+  width: 16px;
+  height: 16px;
+  color: var(--text-tertiary);
+  z-index: 1;
+  transition: color 0.2s ease;
+}
+
+.form-input,
+.form-select {
+  width: 100%;
+  padding: 16px 16px 16px 48px;
+  border: 1px solid var(--border-secondary);
+  border-radius: 12px;
+  background: var(--input-bg);
+  color: var(--text-primary);
+  font-size: 16px;
+  transition: all 0.2s ease;
+  outline: none;
+}
+
+.form-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.form-select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 12px center;
+  background-repeat: no-repeat;
+  background-size: 16px;
+  padding-right: 48px;
+}
+
+[data-theme="dark"] .form-select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%9ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+}
+
+.form-input:focus,
+.form-select:focus {
+  border-color: var(--accent-primary);
+  box-shadow: var(--input-focus-shadow);
+}
+
+.form-input:focus + .input-icon,
+.form-select:focus + .input-icon,
+.input-container:focus-within .input-icon {
+  color: var(--accent-primary);
+}
+
+.form-input.error,
+.form-select.error {
+  border-color: var(--error-text);
+  background: var(--error-bg);
+}
+
+/* Password Toggle */
+.password-toggle {
+  position: absolute;
+  right: 16px;
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+.password-toggle:hover {
+  color: var(--text-primary);
+  background: var(--bg-secondary);
+}
+
+/* Terms Section */
+.terms-section {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+}
+
+.terms-text {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: 1.5;
+  text-align: center;
+}
+
+/* Error Messages */
+.error-message {
+  display: block;
+  color: var(--error-text);
+  font-size: 13px;
+  margin-top: 6px;
+  font-weight: 500;
+}
+
+.submit-error {
+  background: var(--error-bg);
+  border: 1px solid var(--error-border);
+  border-radius: 8px;
+  padding: 12px 16px;
+  margin-bottom: 20px;
+  color: var(--error-text);
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Submit Button */
+.submit-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: var(--accent-gradient);
+  color: #FFFFFF;
+  border: none;
+  padding: 16px 24px;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-md);
+  margin-bottom: 24px;
+}
+
+.submit-btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.submit-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.submit-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.submit-btn.loading {
+  pointer-events: none;
+}
+
+/* Loading Spinner */
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: 2px solid #FFFFFF;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Divider */
+.divider {
+  position: relative;
+  text-align: center;
+  margin: 24px 0;
+}
+
+.divider::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: var(--border-secondary);
+}
+
+.divider span {
+  background: var(--bg-primary);
+  color: var(--text-tertiary);
+  font-size: 13px;
+  font-weight: 500;
+  padding: 0 16px;
+  position: relative;
+  z-index: 1;
+}
+
+/* Social Signup */
+.social-signup {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.google-btn,
+.phone-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 14px 20px;
+  border: 1px solid var(--border-secondary);
+  border-radius: 12px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.google-btn:hover:not(:disabled),
+.phone-btn:hover:not(:disabled) {
+  border-color: var(--border-primary);
+  background: var(--bg-secondary);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.google-btn:disabled,
+.phone-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.google-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+/* Footer */
+.signup-footer {
+  text-align: center;
+  padding: 24px 32px 32px 32px;
+  border-top: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+}
+
+.signup-footer p {
+  color: var(--text-secondary);
+  font-size: 14px;
+  margin: 0;
+}
+
+.link-btn {
+  background: none;
+  border: none;
+  color: var(--accent-primary);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color 0.2s ease;
+}
+
+.link-btn:hover {
+  color: var(--accent-secondary);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Mobile Responsive */
+@media (max-width: 640px) {
+  .signup-page {
+    padding: 16px 12px;
+  }
+  
+  .signup-container {
+    max-width: 100%;
+    border-radius: 16px;
+  }
+  
+  .signup-header {
+    padding: 32px 24px 24px 24px;
+  }
+  
+  .signup-title {
+    font-size: 24px;
+  }
+  
+  .signup-subtitle {
+    font-size: 15px;
+  }
+  
+  .signup-form-container {
+    padding: 24px;
+  }
+  
+  /* Stack form rows on mobile */
+  .form-row {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  
+  .form-row .form-group {
+    margin-bottom: 0;
+  }
+  
+  .form-input,
+  .form-select {
+    font-size: 16px; /* Prevents zoom on iOS */
+    padding: 14px 14px 14px 44px;
+  }
+  
+  .submit-btn {
+    padding: 14px 20px;
+    font-size: 15px;
+  }
+  
+  .google-btn,
+  .phone-btn {
+    padding: 12px 16px;
+    font-size: 14px;
+  }
+  
+  .signup-footer {
+    padding: 20px 24px 24px 24px;
+  }
+  
+  .terms-section {
+    padding: 14px;
+  }
+  
+  .terms-text {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 480px) {
+  .signup-container {
+    max-width: 100%;
+  }
+  
+  .form-row {
+    gap: 16px;
+  }
+  
+  .form-input,
+  .form-select {
+    padding: 12px 12px 12px 40px;
+  }
+  
+  .input-icon {
+    left: 14px;
+    width: 14px;
+    height: 14px;
+  }
+  
+  .password-toggle {
+    right: 14px;
+  }
+}
+
+/* Focus and Accessibility */
+.submit-btn:focus-visible,
+.google-btn:focus-visible,
+.phone-btn:focus-visible,
+.link-btn:focus-visible,
+.password-toggle:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+.form-input:focus-visible,
+.form-select:focus-visible {
+  outline: none; /* Handled by border and shadow */
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .signup-container {
+    border-width: 2px;
+  }
+  
+  .form-input,
+  .form-select {
+    border-width: 2px;
+  }
+  
+  .submit-btn {
+    border: 2px solid var(--accent-primary);
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .signup-container,
+  .submit-btn,
+  .google-btn,
+  .phone-btn,
+  .form-input,
+  .form-select,
+  .password-toggle,
+  .link-btn {
+    transition: none;
+  }
+  
+  .loading-spinner {
+    animation: none;
+  }
+  
+  .fadeInUp {
+    animation: none;
+  }
+}
+
+/* Password Strength Indicator (Optional Enhancement) */
+.password-strength {
+  margin-top: 8px;
+  display: flex;
+  gap: 4px;
+}
+
+.strength-bar {
+  height: 3px;
+  flex: 1;
+  background: var(--border-tertiary);
+  border-radius: 2px;
+  transition: background-color 0.2s ease;
+}
+
+.strength-bar.weak {
+  background: #EF4444;
+}
+
+.strength-bar.medium {
+  background: #F59E0B;
+}
+
+.strength-bar.strong {
+  background: #10B981;
+}
+
+.strength-text {
+  font-size: 12px;
+  margin-top: 4px;
+  font-weight: 500;
+}
+
+.strength-text.weak {
+  color: #EF4444;
+}
+
+.strength-text.medium {
+  color: #F59E0B;
+}
+
+.strength-text.strong {
+  color: #10B981;
+}