wy86rbj5i: Load Manrope and Cormorant Garamond and add type classes

src/app/globals.css

@@ -56,6 +56,10 @@
 }
 
 @layer base {
-  body { color: var(--ink); background: var(--bg); }
+  body {
+    color: var(--ink);
+    background: var(--bg);
+    font-family: var(--font-sans), system-ui, sans-serif;
+  }
   :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
 }

src/app/layout.tsx

@@ -1,11 +1,25 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
-import { Roboto } from "next/font/google";
+import { Cormorant_Garamond, Manrope } from "next/font/google";
 import { DEFAULT_THEME, THEME_SCRIPT } from "@/lib/theme";
 import "./globals.css";
+import "../styles/type.css";
 import "../styles/legacy.css";
 
-const roboto = Roboto({ subsets: ["latin"], weight: ["400", "500", "700"] });
+const manrope = Manrope({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700", "800"],
+  variable: "--font-sans",
+  display: "swap",
+});
+
+const cormorant = Cormorant_Garamond({
+  subsets: ["latin"],
+  weight: ["500", "600"],
+  style: ["normal", "italic"],
+  variable: "--font-serif",
+  display: "swap",
+});
 
 export const metadata: Metadata = {
   title: "Minnect feed browser",
@@ -14,7 +28,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={roboto.className} data-theme={DEFAULT_THEME} suppressHydrationWarning>
+    <html lang="en" className={`${manrope.variable} ${cormorant.variable}`} data-theme={DEFAULT_THEME} suppressHydrationWarning>
       <head>
         {/* Applies the stored theme before first paint (ADR 0001, section 5). */}
         <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />