chore: sync first auth step styles with new design

src/app/globals.css

@@ -4,12 +4,17 @@
 @theme {
   --font-irancell: "Irancell";
 
-  --color-background: #FFFFFF;
-  --color-primary: #C39854;
+  --color-background: #F4F5F9;
+  --color-container: #FFFFFF;
+  --color-primary: #000000;
+  --color-border: #E5E5E5;
+  --color-invalid: red;
+  --color-valid: #439C46;
   --color-foreground: #333333;
-  --color-disabled: #999999;
+  --color-disabled: #FFFFFF61;
   --radius-normal: 10px;
   --text-sm2: 13px;
+  --radius-container: 30px;
 }
 
 * {

src/components/input/InputField.tsx

@@ -11,9 +11,9 @@ type Props = {
 
 function InputField({ onChange, htmlFor, labelText, children, valid = true, className, ...inputProps }: Props) {
     return (
-        <div className={`${className} ${valid ? 'border-[#E5E5E5]' : 'border-[red]'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border focus-within:border-primary`}>
+        <div className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border focus-within:border-primary`}>
             <label
-                className='absolute right-2 -top-3 px-2 bg-background text-[12px] text-foreground'
+                className='absolute right-2 -top-3 px-2 bg-container text-[12px] text-foreground'
                 htmlFor={htmlFor}>
                 {labelText}
             </label>

src/features/auth/components/StepEnterNumber.tsx

@@ -12,18 +12,17 @@ type Props = {
 
 function StepEnterNumber({ onSubmit, onChange, value }: Props) {
     return (
-        <form onSubmit={onSubmit} className='p-6 h-full'>
-            <div className='h-full flex flex-col lg:flex-row justify-between'>
+        <form onSubmit={onSubmit} className='p-6 lg:py-[75px] w-full flex items-center justify-center py-4 lg:items-center lg:px-10 px-4 drop-shadow-black h-full'>
+            <div className='h-full w-full px-4 sm:px-6 lg:p-0 flex flex-col max-h-[812px] max-w-[1200px] bg-container rounded-container overflow-clip lg:flex-row justify-between'>
                 <Image  
-                    className='object-cover w-full max-h-full md:max-h-1/2 lg:max-h-full lg:w-1/2'
-                    objectFit=''
+                    className='object-cover w-full h-full max-h-1/2 lg:max-h-full lg:w-1/2'
                     src={'/assets/images/login-banner.png'} 
                     alt='login banner'
                     width={100}
                     height={100}
                     unoptimized={true}
                     />
-                <div className='w-full lg:max-w-1/2 h-full lg:px-9 lg:py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
+                <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
                     <div className='w-full'>
                         <div className='pt-4' dir='rtl'>
                             <h6 className='text-lg font-bold'>ورود به سیستم</h6>