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>

src/app/(auth)/login/page.tsx

@@ -2,13 +2,17 @@ import { LoginForm } from "./login-form";
 
 export default function LoginPage() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-amber-50">
-      <div className="w-full max-w-md">
+    <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: "var(--background)" }}>
+      <div className="w-full max-w-sm">
         <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold text-amber-900">Second Brain</h1>
-          <p className="text-amber-700 mt-2">Войдите в свой аккаунт</p>
+          <h1 className="text-2xl font-bold tracking-wide" style={{ color: "var(--foreground)" }}>
+            Second Brain
+          </h1>
+          <p className="mt-1 text-sm uppercase tracking-widest" style={{ color: "var(--muted-foreground)", fontSize: "0.65rem" }}>
+            Образовательная платформа
+          </p>
         </div>
-        <div className="bg-white rounded-2xl shadow-sm border border-amber-100 p-8">
+        <div className="card-aubade p-8">
           <LoginForm />
         </div>
       </div>