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} />

apps/website/src/app/globals.css

@@ -1,21 +1,30 @@
 @import "tailwindcss";
 
 @theme {
-  --color-brand-primary: #FF6B6B;
-  --color-brand-primary-hover: #FF4500;
-  --color-brand-accent: #FFF200;
-  --color-brand-warm: #FFA07A;
-  --color-brand-cool: #E0FFFF;
-  --color-brand-success: #98FB98;
-  --color-brand-soft: #D8BFD8;
-  --color-surface-page: #FFF0F5;
-  --color-surface-nav-rest: #F9F8F5;
+  /* Quiet Luxury Palette — HOM AROMA Brand Reference */
+  --color-brand-primary: #B8956A;
+  --color-brand-primary-hover: #A07D3A;
+  --color-brand-accent: #D4B97A;
+  --color-brand-warm: #D4785A;
+  --color-brand-cool: #EDE6DD;
+  --color-brand-success: #5B9A4D;
+  --color-brand-soft: #DABE7E;
+  --color-surface-page: #F5F0EB;
+  --color-surface-nav-rest: #FDFAF7;
   --color-surface-card: #FFFFFF;
-  --color-text-main: #333333;
-  --color-muted-text: #666666;
+  --color-text-main: #3A2F28;
+  --color-muted-text: #7A6E63;
   --color-line-primary: #00B900;
   --color-line-primary-hover: #009900;
 
+  /* New tokens — extended Quiet Luxury system */
+  --color-caption-text: #B0A396;
+  --color-border-color: #E8E0D8;
+  --color-surface-muted: #EDE6DD;
+  --radius-base: 8px;
+  --radius-card: 16px;
+
+  /* pop-* aliases — used by apps/spa ThemeInjector */
   --color-pop-pink: var(--color-brand-primary);
   --color-pop-yellow: var(--color-brand-accent);
   --color-pop-orange: var(--color-brand-warm);
@@ -25,12 +34,16 @@
   --color-pop-purple: var(--color-brand-soft);
   --color-pop-bg: var(--color-surface-page);
   --color-pop-black: var(--color-text-main);
+  --color-pop-caption: var(--color-caption-text);
+  --color-pop-border: var(--color-border-color);
+  --color-pop-muted-bg: var(--color-surface-muted);
 
-  /* Serif font — mirrors apps/spa font-serif token */
+  /* Serif font — Playfair Display for Quiet Luxury headings */
+  --font-playfair: var(--font-playfair, "Playfair Display"), ui-serif, Georgia, serif;
   --font-serif: var(--font-serif-locale, ui-serif), Georgia, Cambria, "Times New Roman", Times, serif;
 
-  --shadow-card: 0 10px 25px rgba(0,0,0,0.05);
-  --shadow-card-hover: 0 20px 40px rgba(0,0,0,0.1);
+  --shadow-card: 0 1px 4px rgba(0,0,0,0.04);
+  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.06);
   --shadow-brutal: var(--shadow-card);
   --shadow-brutal-hover: var(--shadow-card-hover);