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, 10 insertions, 10 deletions

diff --git a/src/client/components/CreateCardModal.test.tsx b/src/client/components/CreateCardModal.test.tsx
index 6b429c8..7244824 100644
--- a/src/client/components/CreateCardModal.test.tsx
+++ b/src/client/components/CreateCardModal.test.tsx
@@ -84,7 +84,7 @@ describe("CreateCardModal", () => {
 		expect(screen.getByLabelText("Front")).toBeDefined();
 		expect(screen.getByLabelText("Back")).toBeDefined();
 		expect(screen.getByRole("button", { name: "Cancel" })).toBeDefined();
-		expect(screen.getByRole("button", { name: "Create" })).toBeDefined();
+		expect(screen.getByRole("button", { name: "Create Card" })).toBeDefined();
 	});
 
 	it("disables create button when front is empty", async () => {
@@ -93,7 +93,7 @@ describe("CreateCardModal", () => {
 
 		await user.type(screen.getByLabelText("Back"), "Answer");
 
-		const createButton = screen.getByRole("button", { name: "Create" });
+		const createButton = screen.getByRole("button", { name: "Create Card" });
 		expect(createButton).toHaveProperty("disabled", true);
 	});
 
@@ -103,7 +103,7 @@ describe("CreateCardModal", () => {
 
 		await user.type(screen.getByLabelText("Front"), "Question");
 
-		const createButton = screen.getByRole("button", { name: "Create" });
+		const createButton = screen.getByRole("button", { name: "Create Card" });
 		expect(createButton).toHaveProperty("disabled", true);
 	});
 
@@ -114,7 +114,7 @@ describe("CreateCardModal", () => {
 		await user.type(screen.getByLabelText("Front"), "Question");
 		await user.type(screen.getByLabelText("Back"), "Answer");
 
-		const createButton = screen.getByRole("button", { name: "Create" });
+		const createButton = screen.getByRole("button", { name: "Create Card" });
 		expect(createButton).toHaveProperty("disabled", false);
 	});
 
@@ -181,7 +181,7 @@ describe("CreateCardModal", () => {
 
 		await user.type(screen.getByLabelText("Front"), "What is 2+2?");
 		await user.type(screen.getByLabelText("Back"), "4");
-		await user.click(screen.getByRole("button", { name: "Create" }));
+		await user.click(screen.getByRole("button", { name: "Create Card" }));
 
 		await waitFor(() => {
 			expect(
@@ -213,7 +213,7 @@ describe("CreateCardModal", () => {
 
 		await user.type(screen.getByLabelText("Front"), "  Question  ");
 		await user.type(screen.getByLabelText("Back"), "  Answer  ");
-		await user.click(screen.getByRole("button", { name: "Create" }));
+		await user.click(screen.getByRole("button", { name: "Create Card" }));
 
 		await waitFor(() => {
 			expect(
@@ -241,7 +241,7 @@ describe("CreateCardModal", () => {
 
 		await user.type(screen.getByLabelText("Front"), "Question");
 		await user.type(screen.getByLabelText("Back"), "Answer");
-		await user.click(screen.getByRole("button", { name: "Create" }));
+		await user.click(screen.getByRole("button", { name: "Create Card" }));
 
 		expect(screen.getByRole("button", { name: "Creating..." })).toBeDefined();
 		expect(screen.getByRole("button", { name: "Creating..." })).toHaveProperty(
@@ -271,7 +271,7 @@ describe("CreateCardModal", () => {
 
 		await user.type(screen.getByLabelText("Front"), "Question");
 		await user.type(screen.getByLabelText("Back"), "Answer");
-		await user.click(screen.getByRole("button", { name: "Create" }));
+		await user.click(screen.getByRole("button", { name: "Create Card" }));
 
 		await waitFor(() => {
 			expect(screen.getByRole("alert").textContent).toContain(
@@ -291,7 +291,7 @@ describe("CreateCardModal", () => {
 
 		await user.type(screen.getByLabelText("Front"), "Question");
 		await user.type(screen.getByLabelText("Back"), "Answer");
-		await user.click(screen.getByRole("button", { name: "Create" }));
+		await user.click(screen.getByRole("button", { name: "Create Card" }));
 
 		await waitFor(() => {
 			expect(screen.getByRole("alert").textContent).toContain(
@@ -358,7 +358,7 @@ describe("CreateCardModal", () => {
 		// Create a card
 		await user.type(screen.getByLabelText("Front"), "Question");
 		await user.type(screen.getByLabelText("Back"), "Answer");
-		await user.click(screen.getByRole("button", { name: "Create" }));
+		await user.click(screen.getByRole("button", { name: "Create Card" }));
 
 		await waitFor(() => {
 			expect(onClose).toHaveBeenCalled();