feat(auth): implement email/password login form

apps/web/src/index.css

@@ -1 +1,162 @@
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap');
 @import "tailwindcss";
+
+@theme {
+    --color-background: hsl(var(--background));
+    --color-foreground: hsl(var(--foreground));
+
+    --color-card: hsl(var(--card));
+    --color-card-foreground: hsl(var(--card-foreground));
+
+    --color-popover: hsl(var(--popover));
+    --color-popover-foreground: hsl(var(--popover-foreground));
+
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+    --color-muted: hsl(var(--muted));
+    --color-muted-foreground: hsl(var(--muted-foreground));
+
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+
+    --color-destructive: hsl(var(--destructive));
+    --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+    --color-border: hsl(var(--border));
+    --color-input: hsl(var(--input));
+    --color-ring: hsl(var(--ring));
+
+    --color-primary-text: hsl(var(--text-primary));
+    --color-secondary-text: hsl(var(--text-secondary));
+    --color-muted-text: hsl(var(--text-muted));
+
+    --radius-lg: var(--radius);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-sm: calc(var(--radius) - 4px);
+
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+}
+
+@layer base {
+    :root {
+        --background: 220 20% 98%;
+        --foreground: 226 30% 12%;
+        --card: 220 20% 98%;
+        --card-foreground: 226 30% 10%;
+        --popover: 220 20% 98%;
+        --popover-foreground: 226 30% 10%;
+        --primary: 226 91% 45%;
+        --primary-foreground: 210 40% 98%;
+        --secondary: 220 15% 95%;
+        --secondary-foreground: 226 30% 25%;
+        --muted: 220 15% 95%;
+        --muted-foreground: 220 9% 45%;
+        --accent: 53 94% 62%;
+        --accent-foreground: 53 94% 15%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 220 15% 90%;
+        --input: 220 15% 90%;
+        --ring: 226 91% 45%;
+        --radius: 0.75rem;
+
+        --text-primary: 226 30% 12%;
+        --text-secondary: 226 20% 35%;
+        --text-muted: 226 15% 55%;
+    }
+
+    .dark {
+        --background: 226 30% 5%;
+        --foreground: 210 40% 98%;
+        --card: 226 30% 7%;
+        --card-foreground: 210 40% 98%;
+        --popover: 226 30% 5%;
+        --popover-foreground: 210 40% 98%;
+        --primary: 226 91% 55%;
+        --primary-foreground: 220 20% 10%;
+        --secondary: 226 30% 15%;
+        --secondary-foreground: 210 40% 98%;
+        --muted: 226 30% 15%;
+        --muted-foreground: 220 9% 65%;
+        --accent: 53 94% 62%;
+        --accent-foreground: 53 94% 15%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+        --border: 226 30% 15%;
+        --input: 226 30% 15%;
+        --ring: 226 91% 55%;
+
+        --text-primary: 210 40% 98%;
+        --text-secondary: 220 9% 80%;
+        --text-muted: 220 9% 65%;
+    }
+}
+
+@layer base {
+    * {
+        border-color: hsl(var(--border));
+    }
+
+    body {
+        background-color: hsl(var(--background));
+        color: hsl(var(--foreground));
+        font-family: 'Instrument Sans', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+}
+
+@layer utilities {
+    .glass {
+        background: rgba(255, 255, 255, 0.5);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .dark .glass {
+        background: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border: 1px solid rgba(255, 255, 255, 0.05);
+    }
+
+    .animate-in {
+        animation: fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+
+    .animate-in-slide-up {
+        animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+
+    @keyframes fade-in {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes slide-up {
+        from {
+            opacity: 0;
+            transform: translateY(15px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
+
+.transition-premium {
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}