planmymeal/app/layout.tsx

import type { Metadata, Viewport } from "next";
import { Inter, JetBrains_Mono } from "next/font/google";
import "./globals.css";

// BoardUI's theme reads --font-inter (sans) and --font-mono-source (mono).
const inter = Inter({ variable: "--font-inter", subsets: ["latin"], axes: ["opsz"] });
const jetbrainsMono = JetBrains_Mono({ variable: "--font-mono-source", subsets: ["latin"] });

export const metadata: Metadata = {
  // Pages set just their own name ("Recipes"); the template adds the app name.
  title: { default: "Plan my Meals: Budget Meal Planner", template: "%s · Plan my Meals" },
  description: "Plan a week of meals around your grocery budget and the appliances you actually own.",
};

export const viewport: Viewport = {
  themeColor: [
    { media: "(prefers-color-scheme: light)", color: "#ffffff" },
    { media: "(prefers-color-scheme: dark)", color: "#0d1219" },
  ],
};

// Runs before paint so the BoardUI `.dark` class is set without a flash.
const THEME_INIT_SCRIPT = `(function(){try{if(localStorage.getItem("boardui:theme")==="dark")document.documentElement.classList.add("dark");}catch(e){}})();`;

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en" suppressHydrationWarning className={`${inter.variable} ${jetbrainsMono.variable} antialiased`}>
      <head>
        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
      </head>
      <body className="min-h-dvh bg-background-full font-sans text-text-primary">{children}</body>
    </html>
  );
}