diff --git a/apps/website/src/components/AddToCartSection.tsx b/apps/website/src/components/AddToCartSection.tsx
index bc84f4e..4631bb8 100644
--- a/apps/website/src/components/AddToCartSection.tsx
+++ b/apps/website/src/components/AddToCartSection.tsx
@@ -347,10 +347,10 @@ export default function AddToCartSection({
           ) : (
             <div className="space-y-1">
               {categoryName && (
-                <p className="text-[11px] font-bold uppercase tracking-widest text-red-500">{categoryName}</p>
+                <p className="text-[11px] font-bold uppercase tracking-widest text-brand-primary">{categoryName}</p>
               )}
               <div className="text-xl md:text-2xl font-black italic tracking-wider uppercase text-text-main flex items-center gap-2">
-                <span className="text-red-500 font-extrabold">{product.brand?.name || 'NORIFUMI'}</span>
+                <span className="text-brand-primary font-extrabold">{product.brand?.name || 'NORIFUMI'}</span>
                 <span>{categoryName} Series</span>
               </div>
             </div>
@@ -362,24 +362,24 @@ export default function AddToCartSection({
           </h1>
 
           {/* Subtitle / Tagline */}
-          <p className="text-xs md:text-sm text-zinc-400 font-normal">
+          <p className="text-xs md:text-sm text-muted-text font-normal">
             {description ? (description.length > 80 ? `${description.slice(0, 80)}...` : description) : t.defaultTagline}
           </p>
 
           {/* Star Rating & SKU Row */}
-          <div className="flex flex-wrap items-center gap-3 pt-1 text-xs text-zinc-400">
-            <div className="flex items-center gap-1.5 text-amber-400">
+          <div className="flex flex-wrap items-center gap-3 pt-1 text-xs text-muted-text">
+            <div className="flex items-center gap-1.5 text-amber-500">
               <div className="flex items-center">
                 {[...Array(5)].map((_, i) => (
                   <Star key={i} className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
                 ))}
               </div>
               <span className="font-bold text-text-main ml-0.5">4.9</span>
-              <span className="text-zinc-500">({`128 ${t.reviews}`})</span>
+              <span className="text-muted-text/80">({`128 ${t.reviews}`})</span>
             </div>
-            <span className="text-zinc-700">|</span>
-            <div className="font-mono text-[11px] text-zinc-400">
-              SKU: <span className="text-zinc-200 font-semibold">{currentVariant?.sku || 'NOR-GP-OILCUP-SET'}</span>
+            <span className="text-muted-text/30">|</span>
+            <div className="font-mono text-[11px] text-muted-text">
+              SKU: <span className="text-text-main font-semibold">{currentVariant?.sku || 'NOR-GP-OILCUP-SET'}</span>
             </div>
           </div>
         </div>
@@ -387,23 +387,23 @@ export default function AddToCartSection({
         {/* Price & In-stock Badge */}
         <div className="flex items-center justify-between gap-4 py-2 border-y border-line-primary/10">
           <div className="flex items-baseline gap-2">
-            <span className="text-3xl md:text-4xl font-black text-red-500 tracking-tight">
+            <span className="text-3xl md:text-4xl font-black text-text-main tracking-tight">
               {formatPrice(currentVariant?.price ?? product.price ?? 0)}
             </span>
             {currentVariantName && (
-              <span className="text-xs text-zinc-400 font-medium">/ {currentVariantName}</span>
+              <span className="text-xs text-muted-text font-medium">/ {currentVariantName}</span>
             )}
           </div>
 
-          <div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold">
-            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
+          <div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-brand-success/10 border border-brand-success/20 text-brand-success text-xs font-semibold">
+            <span className="w-1.5 h-1.5 rounded-full bg-brand-success animate-pulse" />
             <span>{t.inStock}</span>
           </div>
         </div>
 
         {/* Description Excerpt */}
         {description && (
-          <p className="text-xs md:text-sm leading-relaxed text-zinc-400">
+          <p className="text-xs md:text-sm leading-relaxed text-muted-text">
             {description}
           </p>
         )}
@@ -418,7 +418,7 @@ export default function AddToCartSection({
 
               return (
                 <div key={optNameBase} className="space-y-3">
-                  <p className="text-xs font-bold uppercase tracking-widest text-zinc-300">
+                  <p className="text-xs font-bold uppercase tracking-widest text-muted-text">
                     {t.selectPrefix(optNameDisplay)}
                   </p>
 
@@ -438,13 +438,13 @@ export default function AddToCartSection({
                             onClick={() => handleOptionChange(optIndex, baseVal)}
                             className={`group relative flex flex-col items-center gap-1.5 p-1.5 rounded-xl border transition-all ${
                               isSelected
-                                ? 'border-red-500 bg-red-500/10 ring-2 ring-red-500/30'
+                                ? 'border-brand-primary bg-brand-primary/10 ring-2 ring-brand-primary/30'
                                 : isAvailable
-                                ? 'border-line-primary/20 bg-surface-card hover:border-line-primary/50 text-muted-text'
+                                ? 'border-line-primary/20 bg-surface-card hover:border-brand-primary/50 text-muted-text'
                                 : 'border-line-primary/10 bg-surface-card/40 opacity-40 cursor-not-allowed'
                             }`}
                           >
-                            <div className="relative w-14 h-14 md:w-16 md:h-16 rounded-lg overflow-hidden bg-black/50 border border-white/5 flex items-center justify-center">
+                            <div className="relative w-14 h-14 md:w-16 md:h-16 rounded-lg overflow-hidden bg-surface-page border border-line-primary/10 flex items-center justify-center">
                               {swatchImg ? (
                                 <Image
                                   src={swatchImg}
@@ -458,7 +458,7 @@ export default function AddToCartSection({
                               )}
                             </div>
                             <span className={`text-[11px] font-medium tracking-wide ${
-                              isSelected ? 'text-red-400 font-bold' : 'text-zinc-400 group-hover:text-zinc-200'
+                              isSelected ? 'text-brand-primary font-bold' : 'text-muted-text group-hover:text-text-main'
                             }`}>
                               {displayVal}
                             </span>
@@ -473,9 +473,9 @@ export default function AddToCartSection({
                           onClick={() => handleOptionChange(optIndex, baseVal)}
                           className={`rounded-xl border px-5 py-2.5 text-xs font-bold uppercase tracking-wider transition ${
                             isSelected
-                              ? 'border-red-500 bg-red-500/15 text-red-400 ring-1 ring-red-500/30 shadow-card'
+                              ? 'border-brand-primary bg-brand-primary/15 text-brand-primary ring-1 ring-brand-primary/30 shadow-card'
                               : isAvailable
-                              ? 'border-line-primary/20 bg-surface-card text-muted-text hover:border-line-primary/50 hover:text-text-main'
+                              ? 'border-line-primary/20 bg-surface-card text-muted-text hover:border-brand-primary/50 hover:text-text-main'
                               : 'border-line-primary/10 bg-surface-card/40 text-muted-text/30 cursor-not-allowed'
                           }`}
                         >
@@ -499,7 +499,7 @@ export default function AddToCartSection({
                 type="button"
                 onClick={() => setQuantity(q => Math.max(1, q - 1))}
                 disabled={quantity <= 1}
-                className="w-9 h-9 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white hover:bg-white/5 disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
+                className="w-9 h-9 rounded-lg flex items-center justify-center text-muted-text hover:text-text-main hover:bg-brand-primary/10 disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
                 aria-label="Decrease quantity"
               >
                 <Minus className="w-4 h-4" />
@@ -510,7 +510,7 @@ export default function AddToCartSection({
               <button
                 type="button"
                 onClick={() => setQuantity(q => q + 1)}
-                className="w-9 h-9 rounded-lg flex items-center justify-center text-zinc-400 hover:text-white hover:bg-white/5 transition-colors"
+                className="w-9 h-9 rounded-lg flex items-center justify-center text-muted-text hover:text-text-main hover:bg-brand-primary/10 transition-colors"
                 aria-label="Increase quantity"
               >
                 <Plus className="w-4 h-4" />
@@ -521,10 +521,10 @@ export default function AddToCartSection({
             <button
               onClick={handleAddToCart}
               disabled={!currentVariant}
-              className={`flex-1 h-11 md:h-12 px-6 rounded-xl font-bold text-sm tracking-wide flex items-center justify-center gap-2 transition-all shadow-lg ${
+              className={`flex-1 h-11 md:h-12 px-6 rounded-xl font-bold text-sm tracking-wide flex items-center justify-center gap-2 transition-all shadow-md ${
                 currentVariant
-                  ? 'bg-red-600 hover:bg-red-500 text-white shadow-red-600/30 hover:shadow-red-600/50 active:scale-[0.99]'
-                  : 'bg-zinc-800 text-zinc-500 cursor-not-allowed shadow-none'
+                  ? 'bg-brand-primary hover:bg-brand-primary-hover text-surface-card shadow-brand-primary/20 hover:shadow-brand-primary/30 active:scale-[0.99]'
+                  : 'bg-surface-muted text-muted-text/50 cursor-not-allowed shadow-none'
               }`}
             >
               <ShoppingCart className="w-4 h-4" />
@@ -534,7 +534,7 @@ export default function AddToCartSection({
             {/* Wishlist Button */}
             <button
               type="button"
-              className="w-11 h-11 md:w-12 md:h-12 rounded-xl border border-line-primary/20 bg-surface-card flex items-center justify-center text-zinc-400 hover:text-red-500 hover:border-red-500/40 transition-colors shrink-0"
+              className="w-11 h-11 md:w-12 md:h-12 rounded-xl border border-line-primary/20 bg-surface-card flex items-center justify-center text-muted-text hover:text-brand-warm hover:border-brand-warm/40 transition-colors shrink-0"
               title={t.wishlist}
             >
               <Heart className="w-4 h-4" />
@@ -543,7 +543,7 @@ export default function AddToCartSection({
             {/* Compare Button */}
             <button
               type="button"
-              className="w-11 h-11 md:w-12 md:h-12 rounded-xl border border-line-primary/20 bg-surface-card flex items-center justify-center text-zinc-400 hover:text-cyan-400 hover:border-cyan-400/40 transition-colors shrink-0"
+              className="w-11 h-11 md:w-12 md:h-12 rounded-xl border border-line-primary/20 bg-surface-card flex items-center justify-center text-muted-text hover:text-brand-primary hover:border-brand-primary/40 transition-colors shrink-0"
               title={t.compare}
             >
               <BarChart2 className="w-4 h-4" />
@@ -557,11 +557,11 @@ export default function AddToCartSection({
             {t.badges.map((badge, idx) => {
               const Icon = idx === 0 ? Truck : idx === 1 ? ShieldCheck : idx === 2 ? RotateCcw : MessageCircle;
               return (
-                <div key={badge.title} className="flex items-center gap-2.5 p-2 rounded-xl bg-surface-card/40 border border-line-primary/10">
-                  <Icon className="w-4 h-4 text-zinc-300 shrink-0" />
+                <div key={badge.title} className="flex items-center gap-2.5 p-2 rounded-xl bg-surface-card/60 border border-line-primary/10">
+                  <Icon className="w-4 h-4 text-muted-text shrink-0" />
                   <div className="leading-tight">
                     <span className="font-bold text-text-main block">{badge.title}</span>
-                    <span className="text-[10px] text-zinc-500">{badge.desc}</span>
+                    <span className="text-[10px] text-muted-text">{badge.desc}</span>
                   </div>
                 </div>
               );
@@ -572,18 +572,18 @@ export default function AddToCartSection({
       </div>
 
       {showMobileStickyBar && (
-        <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-line-primary/20 bg-surface-card/95 p-4 shadow-[0_-10px_30px_rgba(0,0,0,0.2)] backdrop-blur md:hidden">
+        <div className="fixed bottom-0 left-0 right-0 z-40 border-t border-line-primary/20 bg-surface-card/95 p-4 shadow-[0_-10px_30px_rgba(0,0,0,0.08)] backdrop-blur md:hidden">
           <div className="flex items-center justify-between gap-4">
             <div className="flex flex-col">
               <span className="text-[10px] font-bold uppercase tracking-widest text-muted-text/70">
                 {currentVariantName || t.totalPrice}
               </span>
-              <span className="text-xl font-black text-red-500">{formatPrice(currentVariant?.price ?? product.price ?? 0)}</span>
+              <span className="text-xl font-black text-text-main">{formatPrice(currentVariant?.price ?? product.price ?? 0)}</span>
             </div>
             <button
               onClick={handleAddToCart}
               disabled={!currentVariant}
-              className={`flex-1 px-5 py-3 rounded-xl font-bold text-sm bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-600/30 flex items-center justify-center gap-2 ${!currentVariant ? 'opacity-50 cursor-not-allowed shadow-none' : ''}`}
+              className={`flex-1 px-5 py-3 rounded-xl font-bold text-sm bg-brand-primary hover:bg-brand-primary-hover text-surface-card shadow-md shadow-brand-primary/20 flex items-center justify-center gap-2 transition-colors ${!currentVariant ? 'opacity-50 cursor-not-allowed shadow-none bg-surface-muted text-muted-text' : ''}`}
             >
               <ShoppingCart className="w-4 h-4" />
               <span>{currentVariant ? t.addToCart : t.outOfStock}</span>