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, 129 insertions, 0 deletions

diff --git a/src/client/styles.css b/src/client/styles.css
new file mode 100644
index 0000000..2c10cfe
--- /dev/null
+++ b/src/client/styles.css
@@ -0,0 +1,129 @@
+@import "tailwindcss";
+
+@theme {
+	/* Color palette - Warm minimal Japanese aesthetic */
+	--color-cream: #faf9f6;
+	--color-ivory: #f5f4f0;
+	--color-ink: #1a1a1a;
+	--color-slate: #334155;
+	--color-muted: #94a3b8;
+	--color-border: #e2e0dc;
+
+	/* Primary - Deep teal */
+	--color-primary: #1a535c;
+	--color-primary-dark: #0f3439;
+	--color-primary-light: #2a7a87;
+
+	/* Rating colors */
+	--color-again: #dc2626;
+	--color-hard: #ea580c;
+	--color-good: #16a34a;
+	--color-easy: #2563eb;
+
+	/* Semantic colors */
+	--color-success: #059669;
+	--color-warning: #d97706;
+	--color-error: #c43535;
+	--color-info: #2563eb;
+
+	/* Typography */
+	--font-display: "Fraunces", "Georgia", serif;
+	--font-body: "DM Sans", system-ui, sans-serif;
+
+	/* Border radius */
+	--radius-sm: 0.375rem;
+	--radius-md: 0.5rem;
+	--radius-lg: 0.75rem;
+	--radius-xl: 1rem;
+	--radius-2xl: 1.5rem;
+
+	/* Shadows */
+	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.03);
+	--shadow-md:
+		0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
+	--shadow-lg:
+		0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
+	--shadow-card:
+		0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
+
+	/* Animation */
+	--animate-fade-in: fade-in 0.3s ease-out;
+	--animate-slide-up: slide-up 0.3s ease-out;
+	--animate-scale-in: scale-in 0.2s ease-out;
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes slide-up {
+	from {
+		opacity: 0;
+		transform: translateY(10px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes scale-in {
+	from {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+/* Base styles */
+html {
+	font-family: var(--font-body);
+	background-color: var(--color-cream);
+	color: var(--color-slate);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	margin: 0;
+	min-height: 100vh;
+}
+
+/* Focus styles */
+:focus-visible {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 2px;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: var(--color-ivory);
+}
+
+::-webkit-scrollbar-thumb {
+	background: var(--color-border);
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--color-muted);
+}
+
+/* Selection */
+::selection {
+	background-color: var(--color-primary);
+	color: white;
+}