diff --git a/src/routes/layout.css b/src/routes/layout.css
index d4b5078..9a76bbe 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -1 +1,57 @@
 @import 'tailwindcss';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@theme {
+	/* Colors - e-ink inspired palette */
+	--color-ink: #1a1a1a;
+	--color-paper: #fafafa;
+	--color-grey-50: #f5f5f5;
+	--color-grey-100: #e8e8e8;
+	--color-grey-200: #d4d4d4;
+	--color-grey-300: #a3a3a3;
+	--color-grey-400: #737373;
+	--color-grey-500: #525252;
+	--color-accent: #2563eb;
+	--color-accent-hover: #1d4ed8;
+	--color-error: #dc2626;
+	--color-error-light: #fef2f2;
+	--color-success: #16a34a;
+
+	/* Typography */
+	--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+	--font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+	/* Shadows */
+	--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
+	--shadow-card-hover: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
+	--shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+	/* Border radius */
+	--radius-sm: 0.375rem;
+	--radius-md: 0.5rem;
+	--radius-lg: 0.75rem;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	@apply bg-paper text-ink font-sans antialiased;
+}
+
+/* Hero e-reader floating animation */
+@keyframes float {
+	0%,
+	100% {
+		transform: translateY(0) rotate(3deg);
+	}
+	50% {
+		transform: translateY(-8px) rotate(3deg);
+	}
+}
+
+.animate-float {
+	animation: float 4s ease-in-out infinite;
+}