x

apps/website/src/app/[lang]/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { Kanit, Sarabun } from 'next/font/google';
+import { Kanit, Sarabun, Playfair_Display } from 'next/font/google';
 import { notFound } from 'next/navigation';
 import '../globals.css';
 import Navbar from '@/components/Navbar';
@@ -25,6 +25,13 @@ const kanit = Kanit({
   variable: '--font-kanit',
 });
 
+const playfairDisplay = Playfair_Display({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['400', '500', '600', '700'],
+  variable: '--font-playfair',
+});
+
 export async function generateMetadata({ params }: { params: Promise<{ lang: string }> }): Promise<Metadata> {
   const { lang } = await params;
   const settings = await getStoreSettings(lang);
@@ -127,6 +134,11 @@ function buildThemeStyle(settings: StoreSettings | null): CSSProperties | undefi
     ['--font-display-active', tokens.fontDisplay],
     ['--shadow-card', tokens.shadowCard],
     ['--shadow-card-hover', tokens.shadowCardHover],
+    ['--color-caption-text', tokens.captionText],
+    ['--color-border-color', tokens.borderColor],
+    ['--color-surface-muted', tokens.surfaceMuted],
+    ['--radius-base', tokens.radiusBase],
+    ['--radius-card', tokens.radiusCard],
   ]
 
   // Add Scroll Reveal Settings
@@ -171,7 +183,7 @@ export default async function RootLayout({
   const themeStyle = buildThemeStyle(settings)
 
   return (
-    <html lang={lang} className={`${sarabun.variable} ${kanit.variable} scroll-smooth`}>
+    <html lang={lang} className={`${sarabun.variable} ${kanit.variable} ${playfairDisplay.variable} scroll-smooth`}>
       <body className="min-h-screen bg-surface-page text-text-main font-sans antialiased" style={themeStyle}>
         <ClientProviders>
           <Navbar categories={categories} initialMenu={initialMenu} settings={settings} />