x

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>

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() !== '') {

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