feat: implement modern UI/UX design system (#409)

- Add comprehensive design token system (colors, typography, spacing)
- Create 12 new UI components with Radix UI primitives
- Add layout components (PageShell, StatsCard, EmptyState, DataTable)
- Polish all pages with new component library
- Improve accessibility with WCAG 2.1 compliance
- Add dark mode support with semantic color tokens
- Update 947 tests to match new UI patterns

Closes #409

frontend/src/components/ui/Input.tsx

@@ -1,17 +1,33 @@
-import { InputHTMLAttributes, forwardRef, useState } from 'react'
-import { clsx } from 'clsx'
-import { Eye, EyeOff } from 'lucide-react'
+import * as React from 'react'
+import { Eye, EyeOff, type LucideIcon } from 'lucide-react'
+import { cn } from '../../utils/cn'
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string
   error?: string
   helperText?: string
   errorTestId?: string
+  leftIcon?: LucideIcon
+  rightIcon?: LucideIcon
 }
 
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ label, error, helperText, errorTestId, className, type, ...props }, ref) => {
-    const [showPassword, setShowPassword] = useState(false)
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      error,
+      helperText,
+      errorTestId,
+      leftIcon: LeftIcon,
+      rightIcon: RightIcon,
+      className,
+      type,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const [showPassword, setShowPassword] = React.useState(false)
     const isPassword = type === 'password'
 
     return (
@@ -19,21 +35,33 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         {label && (
           <label
             htmlFor={props.id}
-            className="block text-sm font-medium text-gray-300 mb-1.5"
+            className="block text-sm font-medium text-content-secondary mb-1.5"
           >
             {label}
           </label>
         )}
         <div className="relative">
+          {LeftIcon && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
+              <LeftIcon className="h-4 w-4 text-content-muted" />
+            </div>
+          )}
           <input
             ref={ref}
             type={isPassword ? (showPassword ? 'text' : 'password') : type}
-            className={clsx(
-              'w-full bg-gray-900 border rounded-lg px-4 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 transition-colors',
+            disabled={disabled}
+            className={cn(
+              'flex h-10 w-full rounded-lg px-4 py-2',
+              'bg-surface-base border text-content-primary',
+              'text-sm placeholder:text-content-muted',
+              'transition-colors duration-fast',
               error
-                ? 'border-red-500 focus:ring-red-500'
-                : 'border-gray-700 focus:ring-blue-500 focus:border-blue-500',
-              isPassword && 'pr-10',
+                ? 'border-error focus:ring-error/20'
+                : 'border-border hover:border-border-strong focus:border-brand-500',
+              'focus:outline-none focus:ring-2 focus:ring-brand-500/20',
+              'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border',
+              LeftIcon && 'pl-10',
+              (isPassword || RightIcon) && 'pr-10',
               className
             )}
             {...props}
@@ -42,8 +70,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             <button
               type="button"
               onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300 focus:outline-none"
+              className={cn(
+                'absolute right-3 top-1/2 -translate-y-1/2',
+                'text-content-muted hover:text-content-primary',
+                'focus:outline-none transition-colors duration-fast'
+              )}
               tabIndex={-1}
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
             >
               {showPassword ? (
                 <EyeOff className="h-4 w-4" />
@@ -52,12 +85,23 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
               )}
             </button>
           )}
+          {!isPassword && RightIcon && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+              <RightIcon className="h-4 w-4 text-content-muted" />
+            </div>
+          )}
         </div>
         {error && (
-          <p className="mt-1 text-sm text-red-400" data-testid={errorTestId}>{error}</p>
+          <p
+            className="mt-1.5 text-sm text-error"
+            data-testid={errorTestId}
+            role="alert"
+          >
+            {error}
+          </p>
         )}
         {helperText && !error && (
-          <p className="mt-1 text-sm text-gray-500">{helperText}</p>
+          <p className="mt-1.5 text-sm text-content-muted">{helperText}</p>
         )}
       </div>
     )
@@ -65,3 +109,5 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 )
 
 Input.displayName = 'Input'
+
+export { Input }