feat(client): redesign frontend with TailwindCSS v4

Replace inline styles with TailwindCSS, implementing a cohesive Japanese-inspired
design system with custom colors (cream, teal primary), typography (Fraunces,
DM Sans), and animations. Update all pages and components with consistent styling,
improve accessibility by adding aria-hidden to decorative SVGs, and configure
Biome for Tailwind CSS syntax support.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

1 files changed, 8 insertions, 7 deletions

diff --git a/src/client/pages/LoginPage.test.tsx b/src/client/pages/LoginPage.test.tsx
index 724f433..e4dac95 100644
--- a/src/client/pages/LoginPage.test.tsx
+++ b/src/client/pages/LoginPage.test.tsx
@@ -55,10 +55,11 @@ describe("LoginPage", () => {
 	it("renders login form", async () => {
 		renderWithProviders();
 
-		expect(screen.getByRole("heading", { name: "Login" })).toBeDefined();
+		expect(screen.getByRole("heading", { name: "Kioku" })).toBeDefined();
+		expect(screen.getByRole("heading", { name: "Welcome back" })).toBeDefined();
 		expect(screen.getByLabelText("Username")).toBeDefined();
 		expect(screen.getByLabelText("Password")).toBeDefined();
-		expect(screen.getByRole("button", { name: "Login" })).toBeDefined();
+		expect(screen.getByRole("button", { name: "Sign in" })).toBeDefined();
 	});
 
 	it("submits form and logs in successfully", async () => {
@@ -74,7 +75,7 @@ describe("LoginPage", () => {
 
 		await user.type(screen.getByLabelText("Username"), "testuser");
 		await user.type(screen.getByLabelText("Password"), "password123");
-		await user.click(screen.getByRole("button", { name: "Login" }));
+		await user.click(screen.getByRole("button", { name: "Sign in" }));
 
 		await waitFor(() => {
 			expect(apiClient.login).toHaveBeenCalledWith("testuser", "password123");
@@ -92,7 +93,7 @@ describe("LoginPage", () => {
 
 		await user.type(screen.getByLabelText("Username"), "testuser");
 		await user.type(screen.getByLabelText("Password"), "wrongpassword");
-		await user.click(screen.getByRole("button", { name: "Login" }));
+		await user.click(screen.getByRole("button", { name: "Sign in" }));
 
 		await waitFor(() => {
 			expect(screen.getByRole("alert").textContent).toBe("Invalid credentials");
@@ -107,7 +108,7 @@ describe("LoginPage", () => {
 
 		await user.type(screen.getByLabelText("Username"), "testuser");
 		await user.type(screen.getByLabelText("Password"), "password123");
-		await user.click(screen.getByRole("button", { name: "Login" }));
+		await user.click(screen.getByRole("button", { name: "Sign in" }));
 
 		await waitFor(() => {
 			expect(screen.getByRole("alert").textContent).toBe(
@@ -126,10 +127,10 @@ describe("LoginPage", () => {
 
 		await user.type(screen.getByLabelText("Username"), "testuser");
 		await user.type(screen.getByLabelText("Password"), "password123");
-		await user.click(screen.getByRole("button", { name: "Login" }));
+		await user.click(screen.getByRole("button", { name: "Sign in" }));
 
 		await waitFor(() => {
-			const button = screen.getByRole("button", { name: "Logging in..." });
+			const button = screen.getByRole("button", { name: /Signing in/ });
 			expect(button.hasAttribute("disabled")).toBe(true);
 		});
 		expect(