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,24 +21,23 @@ 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 onSubmit={handleSubmit} className="space-y-4">
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-5">
           <div>
-              <label className="block text-sm text-text-2 mb-2">البريد الإلكتروني</label>
+            <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-bg-3 border border-white/12 rounded-md text-text-1 placeholder:text-text-3 focus:outline-none focus:border-cyan transition-colors"
+              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
@@ -46,12 +45,12 @@ export function LoginPage() {
           </div>
 
           <div>
-              <label className="block text-sm text-text-2 mb-2">كلمة المرور</label>
+            <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-bg-3 border border-white/12 rounded-md text-text-1 placeholder:text-text-3 focus:outline-none focus:border-cyan transition-colors"
+              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
@@ -59,19 +58,19 @@ export function LoginPage() {
           </div>
 
           {error && (
-              <p className="text-error text-sm">{error}</p>
+            <p className="text-error text-xs bg-error/10 border border-error/20 rounded-lg px-3 py-2">{error}</p>
           )}
 
           <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"
+            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>
 
-          <p className="text-center text-sm text-text-2 mt-4">
+        <p className="text-center text-sm text-text-3 mt-6">
           ليس لديك حساب؟{' '}
           <Link to="/register" className="text-cyan font-medium">
             سجّل الآن
@@ -79,6 +78,5 @@ export function LoginPage() {
         </p>
       </div>
     </div>
-    </div>
   );
 }