first commit

src/app/layout.tsx

@@ -1,33 +1,48 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type {Metadata, Viewport} from 'next';
+import {Sora, Inter} from 'next/font/google';
+import './globals.css';
+import {Providers} from './providers';
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+const sora = Sora({
+  subsets: ['latin'],
+  variable: '--font-sora',
+  display: 'swap',
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+  display: 'swap',
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: {
+    default: 'Loyaly Merchant',
+    template: '%s · Loyaly Merchant',
+  },
+  description:
+    'Footfall, campaign and LYT redemption analytics for Loyaly merchants.',
 };
 
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export const viewport: Viewport = {
+  colorScheme: 'dark',
+  themeColor: '#000000',
+};
+
+export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
+    // The theme attributes are server-rendered so the @scope rules in
+    // loyaly.css match on the very first byte — no flash from stock defaults.
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      data-theme="dark"
+      data-astryx-theme="loyaly"
+      className={`${sora.variable} ${inter.variable}`}
+      suppressHydrationWarning
     >
-      <body className="min-h-full flex flex-col">{children}</body>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }