chore: improve tailwind colors

apps/web/app/app.css

@@ -2,8 +2,18 @@
 
 @layer theme, base, components, utilities;
 
+@theme {
+  --color-white-100: #ffffff;
+  --color-white-200: #f8feff;
+  --color-white-300: #f2ece6;
+  --color-orange-300: #e5b99b;
+  --color-blue-300: #97cbd2;
+  --color-purple-300: #a38aba;
+}
+
 @layer theme {
   :root {
-    --font-sans: '"Inter"', ui-sans-serif, system-ui, sans-serif;
+    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+    --font-serif: "Playfair Display", ui-sans-serif, system-ui, sans-serif;
   }
 }

apps/web/app/root.tsx

@@ -21,6 +21,10 @@ export const links: Route.LinksFunction = () => [
     rel: 'stylesheet',
     href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
   },
+  {
+    rel: 'stylesheet',
+    href: 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playwrite+US+Modern:[email protected]&display=swap',
+  },
   { rel: 'stylesheet', href: stylesheet },
 ];
 

apps/web/app/routes/_index.tsx

@@ -15,5 +15,5 @@ export async function loader() {
 }
 
 export default function Home({ loaderData }: Route.ComponentProps) {
-  return <h1 className="font-sans text-2xl">{loaderData?.data?.id ?? 4}</h1>;
+  return <h1 className="font-serif text-2xl">{loaderData?.data?.id ?? 4}</h1>;
 }

apps/web/app/server/index.ts

@@ -1,5 +1,5 @@
 import { createTRPCClient, httpBatchLink } from '@trpc/client';
-import type { AppRouter } from '../../../server/src';
+import type { AppRouter } from '../../../server/src/router';
 
 export const client = createTRPCClient<AppRouter>({
   links: [