x

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);