Apply Second Brain design: Fira Mono, Aubade cards, brand palette

src/app/(auth)/login/login-form.tsx

@@ -39,9 +39,9 @@ export function LoginForm() {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-1">
+    <form onSubmit={handleSubmit} className="space-y-5">
+      <div className="space-y-1.5">
+        <label className="block text-xs uppercase tracking-widest font-bold" style={{ color: "var(--muted-foreground)" }}>
           Email
         </label>
         <input
@@ -49,12 +49,20 @@ export function LoginForm() {
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           required
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-400"
+          className="w-full px-3 py-2 text-sm bg-transparent"
+          style={{
+            border: "2px solid var(--border)",
+            color: "var(--foreground)",
+            fontFamily: "var(--font-sans)",
+            outline: "none",
+          }}
+          onFocus={(e) => (e.target.style.borderColor = "var(--foreground)")}
+          onBlur={(e) => (e.target.style.borderColor = "var(--border)")}
           placeholder="you@example.com"
         />
       </div>
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-1">
+      <div className="space-y-1.5">
+        <label className="block text-xs uppercase tracking-widest font-bold" style={{ color: "var(--muted-foreground)" }}>
           Пароль
         </label>
         <input
@@ -62,21 +70,34 @@ export function LoginForm() {
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           required
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-400"
+          className="w-full px-3 py-2 text-sm bg-transparent"
+          style={{
+            border: "2px solid var(--border)",
+            color: "var(--foreground)",
+            fontFamily: "var(--font-sans)",
+            outline: "none",
+          }}
+          onFocus={(e) => (e.target.style.borderColor = "var(--foreground)")}
+          onBlur={(e) => (e.target.style.borderColor = "var(--border)")}
           placeholder="••••••••"
         />
       </div>
-      {error && <p className="text-red-500 text-sm">{error}</p>}
+      {error && (
+        <p className="text-sm" style={{ color: "var(--destructive)" }}>
+          {error}
+        </p>
+      )}
       <button
         type="submit"
         disabled={loading}
-        className="w-full bg-amber-500 hover:bg-amber-600 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50"
+        className="btn-aubade w-full justify-center"
+        style={loading ? { opacity: 0.6, cursor: "not-allowed" } : undefined}
       >
         {loading ? "Вход..." : "Войти"}
       </button>
-      <p className="text-center text-sm text-gray-500">
+      <p className="text-center text-xs" style={{ color: "var(--muted-foreground)" }}>
         Нет аккаунта?{" "}
-        <Link href="/register" className="text-amber-600 hover:underline">
+        <Link href="/register" className="underline" style={{ color: "var(--foreground)" }}>
           Зарегистрироваться
         </Link>
       </p>