fix: redesign login page + adjust dark theme color tokens

Toned down bg layers (less blue, more neutral dark), replaced
card-based login layout with a clean borderless form using
subtle transparency for inputs.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/index.css

@@ -3,9 +3,9 @@
 @theme {
   /* Background Layers */
   --color-bg-0: #071120;
-  --color-bg-1: #0D1B2A;
-  --color-bg-2: #132D4A;
-  --color-bg-3: #1A3A5C;
+  --color-bg-1: #0C1829;
+  --color-bg-2: #111F33;
+  --color-bg-3: #162638;
 
   /* Brand */
   --color-gold: #E7A832;

src/pages/LoginPage.tsx

@@ -21,63 +21,61 @@ export function LoginPage() {
   };
 
   return (
-    <div className="min-h-dvh flex flex-col items-center justify-center px-5">
-      <div className="w-full max-w-sm">
-        <div className="text-center mb-12">
-          <h1 className="text-gold font-bold text-3xl font-latin tracking-tight mb-2">EL3AB</h1>
-          <p className="text-text-2 text-sm">العب • نافس • فُز</p>
+    <div className="min-h-dvh flex flex-col items-center justify-center px-6 bg-bg-0">
+      <div className="w-full max-w-[340px]">
+        {/* Logo */}
+        <div className="text-center mb-10">
+          <h1 className="text-gold font-bold text-4xl font-latin tracking-tight mb-1">EL3AB</h1>
+          <p className="text-text-3 text-xs">العب • نافس • فُز</p>
         </div>
 
-        <div className="bg-bg-1 border border-white/6 rounded-lg p-6">
-          <h2 className="text-xl font-bold text-center mb-6">مرحباً بك</h2>
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <div>
+            <label className="block text-xs font-medium text-text-2 mb-1.5">البريد الإلكتروني</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full h-12 px-4 bg-white/[0.04] border border-white/[0.08] rounded-lg text-text-1 placeholder:text-text-3 focus:outline-none focus:border-cyan/50 focus:bg-white/[0.06] transition-all text-sm"
+              placeholder="email@example.com"
+              dir="ltr"
+              required
+            />
+          </div>
 
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label className="block text-sm text-text-2 mb-2">البريد الإلكتروني</label>
-              <input
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="w-full h-12 px-4 bg-bg-3 border border-white/12 rounded-md text-text-1 placeholder:text-text-3 focus:outline-none focus:border-cyan transition-colors"
-                placeholder="email@example.com"
-                dir="ltr"
-                required
-              />
-            </div>
+          <div>
+            <label className="block text-xs font-medium text-text-2 mb-1.5">كلمة المرور</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full h-12 px-4 bg-white/[0.04] border border-white/[0.08] rounded-lg text-text-1 placeholder:text-text-3 focus:outline-none focus:border-cyan/50 focus:bg-white/[0.06] transition-all text-sm"
+              placeholder="••••••••"
+              dir="ltr"
+              required
+            />
+          </div>
 
-            <div>
-              <label className="block text-sm text-text-2 mb-2">كلمة المرور</label>
-              <input
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full h-12 px-4 bg-bg-3 border border-white/12 rounded-md text-text-1 placeholder:text-text-3 focus:outline-none focus:border-cyan transition-colors"
-                placeholder="••••••••"
-                dir="ltr"
-                required
-              />
-            </div>
+          {error && (
+            <p className="text-error text-xs bg-error/10 border border-error/20 rounded-lg px-3 py-2">{error}</p>
+          )}
 
-            {error && (
-              <p className="text-error text-sm">{error}</p>
-            )}
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full h-12 bg-gradient-to-l from-cyan to-[#0EADD4] text-text-inverse font-bold rounded-lg active:scale-[0.97] transition-all disabled:opacity-50 shadow-[0_4px_16px_rgba(21,215,255,0.2)]"
+          >
+            {loading ? '...' : 'تسجيل الدخول'}
+          </button>
+        </form>
 
-            <button
-              type="submit"
-              disabled={loading}
-              className="w-full h-12 bg-cyan text-text-inverse font-bold rounded-md active:scale-[0.97] transition-transform disabled:opacity-50"
-            >
-              {loading ? '...' : 'تسجيل الدخول'}
-            </button>
-          </form>
-
-          <p className="text-center text-sm text-text-2 mt-4">
-            ليس لديك حساب؟{' '}
-            <Link to="/register" className="text-cyan font-medium">
-              سجّل الآن
-            </Link>
-          </p>
-        </div>
+        <p className="text-center text-sm text-text-3 mt-6">
+          ليس لديك حساب؟{' '}
+          <Link to="/register" className="text-cyan font-medium">
+            سجّل الآن
+          </Link>
+        </p>
       </div>
     </div>
   );