From 466059f01a57e14593a686fcd42f35eaa8752085 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 29 Sep 2026 06:28:29 +0700
Subject: [PATCH] x

---
 apps/spa/src/components/DynamicHero.tsx           |  8 ++++----
 apps/spa/src/components/ThemeInjector.tsx         |  4 ++++
 apps/spa/src/index.css                            |  4 ++++
 apps/website/src/app/globals.css                  | 15 ++++++++-------
 .../components/dynamic/DynamicPageRenderer.tsx    | 14 +++++++-------
 5 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/apps/spa/src/components/DynamicHero.tsx b/apps/spa/src/components/DynamicHero.tsx
index ead9679..2a1a1c3 100644
--- a/apps/spa/src/components/DynamicHero.tsx
+++ b/apps/spa/src/components/DynamicHero.tsx
@@ -42,7 +42,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
         const [accent, rest] = part.split(']');
         return (
           <span key={i}>
-            <span className="text-pop-pink font-medium italic">
+            <span className="text-pop-yellow font-medium italic">
               {accent}
             </span>
             {rest}
@@ -201,7 +201,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
       <div className={`relative z-10 w-full min-h-[85vh] sm:min-h-[90vh] md:min-h-full flex flex-col ${wrapperClasses} animate-fade-in`}>
         <div className={`w-full max-w-3xl flex flex-col space-y-5 ${contentClasses}`}>
           {tagline && (
-            <p className="text-white/80 font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
+            <p className="text-pop-yellow font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
               {tagline}
             </p>
           )}
@@ -219,14 +219,14 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
             {buttonText && (
               <Link
                 to={buttonLink || "/shop"}
-                className="ui-button-secondary shadow-lg shadow-black/30"
+                className="ui-hero-button shadow-lg shadow-black/30"
               >
                 {buttonText}
               </Link>
             )}
             <a
               href="#categories"
-              className="ui-dark-link !text-white group flex items-center gap-1.5 drop-shadow-md hover:underline"
+              className="ui-dark-link group flex items-center gap-1.5 drop-shadow-md hover:underline"
             >
               <span>{t('hero.learnMore')}</span>
               <span className="group-hover:translate-x-1 transition-transform">&rarr;</span>
diff --git a/apps/spa/src/components/ThemeInjector.tsx b/apps/spa/src/components/ThemeInjector.tsx
index 46c93af..ef9256b 100644
--- a/apps/spa/src/components/ThemeInjector.tsx
+++ b/apps/spa/src/components/ThemeInjector.tsx
@@ -16,6 +16,7 @@ export default function ThemeInjector() {
         if (tokens && typeof tokens === 'object') {
           const mapping: Record<string, string> = {
             '--color-pop-pink': tokens.brandPrimary,
+            '--color-pop-red': tokens.brandPrimaryHover,
             '--color-pop-yellow': tokens.brandAccent,
             '--color-pop-orange': tokens.brandWarm,
             '--color-pop-cyan': tokens.brandCool,
@@ -27,6 +28,9 @@ export default function ThemeInjector() {
             '--color-pop-muted-bg': tokens.surfaceMuted,
             '--radius-base': tokens.radiusBase,
             '--radius-card': tokens.radiusCard,
+            '--font-sans-active': tokens.fontBody,
+            '--font-heading-active': tokens.fontDisplay,
+            '--font-serif-active': tokens.fontDisplay,
           }
           for (const [key, value] of Object.entries(mapping)) {
             if (value && typeof value === 'string' && value.trim() !== '') {
diff --git a/apps/spa/src/index.css b/apps/spa/src/index.css
index 7f25636..72ab90d 100644
--- a/apps/spa/src/index.css
+++ b/apps/spa/src/index.css
@@ -122,6 +122,10 @@
     @apply inline-flex items-center justify-center rounded-full bg-pop-bg px-6 py-3 text-xs font-bold uppercase tracking-widest text-pop-black transition-colors hover:bg-pop-pink hover:text-pop-bg;
   }
 
+  .ui-hero-button {
+    @apply inline-flex items-center justify-center rounded-full bg-pop-pink px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-all shadow-lg hover:bg-pop-red hover:opacity-95;
+  }
+
   .ui-input-shell {
     @apply w-full rounded-full border border-pop-black/20 bg-transparent px-6 py-4 text-sm text-pop-black outline-none transition placeholder:text-pop-black/50 focus:border-pop-pink;
   }
diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
index ba973d1..315dea0 100644
--- a/apps/website/src/app/globals.css
+++ b/apps/website/src/app/globals.css
@@ -315,7 +315,7 @@
   }
 
   .ui-accent-text {
-    @apply italic text-brand-primary;
+    @apply italic text-brand-accent;
   }
 
   .ui-hero-shell {
@@ -371,22 +371,23 @@
 
   .ui-hero-button {
     @apply inline-flex items-center justify-center rounded-full px-6 py-3 text-xs font-bold uppercase tracking-widest transition-colors;
-    background-color: var(--color-surface-page);
-    color: var(--color-text-main);
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    background-color: var(--color-brand-primary);
+    color: #ffffff;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2);
   }
   .ui-hero-button:hover {
-    opacity: 0.9;
+    background-color: var(--color-brand-primary-hover, var(--color-brand-primary));
+    opacity: 0.95;
   }
 
   .ui-hero-link {
     @apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest transition-colors;
-    color: var(--color-brand-primary);
+    color: var(--color-brand-accent, var(--color-brand-primary));
     padding: 0.75rem 1.5rem;
   }
 
   .ui-hero-link:hover {
-    color: var(--color-surface-page);
+    opacity: 0.85;
   }
 
   .ui-banner-shell {
diff --git a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
index e400e00..9eb2dcb 100644
--- a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+++ b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
@@ -267,7 +267,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
       <div className={`relative z-10 w-full min-h-[85vh] sm:min-h-[90vh] md:min-h-full flex flex-col ${wrapperClasses}`}>
         <div className={`w-full max-w-3xl flex flex-col space-y-5 ${contentClasses}`}>
           {tagline && (
-            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-[#EAEFEA] drop-shadow-md md:text-sm">
+            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-brand-accent drop-shadow-md md:text-sm">
               {tagline}
             </p>
           )}
@@ -292,7 +292,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
             )}
             <a
               href="#categories"
-              className="ui-hero-link group !text-white flex items-center gap-1.5 drop-shadow-md hover:underline"
+              className="ui-hero-link group flex items-center gap-1.5 drop-shadow-md hover:underline"
             >
               <span>{t('dynamic.heroLearnMore', { lng: resolvedLang })}</span>
               <span className="transition-transform group-hover:translate-x-1">→</span>
@@ -495,7 +495,7 @@ function HeroVideoSection({ payload, lang }: { payload: Record<string, unknown>,
 
       <div className="relative z-20 mx-auto px-6 py-16 w-full max-w-5xl text-center space-y-6 flex flex-col items-center justify-center">
         {tagline && (
-          <p className="text-xs md:text-sm font-semibold uppercase tracking-[0.35em] text-[#EAEFEA] drop-shadow-md">
+          <p className="text-xs md:text-sm font-semibold uppercase tracking-[0.35em] text-brand-accent drop-shadow-md">
             {tagline}
           </p>
         )}
@@ -641,13 +641,13 @@ function HeroMinimalSection({ payload, lang }: { payload: Record<string, unknown
       <div className="relative z-10 w-full max-w-5xl mx-auto px-6 py-12 flex flex-col justify-center">
         <div className={`flex flex-col gap-4 max-w-3xl ${alignClass}`}>
           {tagline && (
-            <span className="text-xs md:text-sm font-medium uppercase tracking-[0.3em] text-[#EAEFEA] drop-shadow-md">
+            <span className="text-xs md:text-sm font-medium uppercase tracking-[0.3em] text-brand-accent drop-shadow-md">
               {tagline}
             </span>
           )}
           {title && (
             <h1 className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-light text-white leading-tight tracking-wide drop-shadow-md">
-              {renderAccentTitle(title, 'text-[#EAEFEA] font-medium')}
+              {renderAccentTitle(title, 'text-brand-accent font-medium')}
             </h1>
           )}
         </div>
@@ -909,7 +909,7 @@ function HeroV2Section({ payload, lang }: { payload: Record<string, unknown>, la
             {primaryBtnText && primaryBtnLink && (
               <Link
                 href={primaryBtnLink}
-                className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-[#A18868] text-white font-medium rounded-md hover:bg-[#8B7355] transition-colors w-full sm:w-auto"
+                className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-brand-primary text-white font-medium rounded-md hover:bg-brand-primary-hover transition-colors w-full sm:w-auto"
               >
                 {primaryBtnText}
                 <ChevronRight className="w-4 h-4" />
@@ -918,7 +918,7 @@ function HeroV2Section({ payload, lang }: { payload: Record<string, unknown>, la
             {secondaryBtnText && secondaryBtnLink && (
               <Link
                 href={secondaryBtnLink}
-                className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-transparent border border-[#A18868] text-[#A18868] font-medium rounded-md hover:bg-[#A18868]/5 transition-colors w-full sm:w-auto"
+                className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-transparent border border-brand-primary text-brand-primary font-medium rounded-md hover:bg-brand-primary/5 transition-colors w-full sm:w-auto"
               >
                 {secondaryBtnText}
                 <ChevronRight className="w-4 h-4" />