fix(ui): use flat mustard accent instead of CSS gradients

Gradients were not rendering consistently after build/deploy. Replace
accent-highlight/deep gradient tokens with solid --color-accent and
soft fills so staging and production match local.

Made-with: Cursor

src/app/booking/BookingPageClient.tsx

@@ -201,7 +201,7 @@ export function BookingPageClient() {
           disabled={!canContinue || pending !== null}
           aria-busy={pending === "reserve"}
           onClick={() => placeHold("reserve")}
-          className="w-full rounded-full border-2 border-[var(--color-primary)] bg-transparent py-3.5 text-sm font-semibold text-[var(--color-primary)] transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] disabled:cursor-not-allowed disabled:opacity-50"
+          className="w-full rounded-full border-2 border-[var(--color-primary)] bg-transparent py-3.5 text-sm font-semibold text-[var(--color-primary)] transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] disabled:cursor-not-allowed disabled:opacity-50"
         >
           {pending === "reserve" ? "Saving your hold…" : "Reserve now — pay later"}
         </button>

src/app/globals.css

@@ -8,11 +8,9 @@
   /* —— Brand base —— */
   --color-brand-teal: #174746;
   --color-brand-teal-hover: #0f3234;
-  /* Softer champagne gold — muted, smooth; still readable with teal type */
+  /* Mustard / gold — flat brand swatch (no gradients on CTAs) */
-  --color-brand-mustard: #c9b07e;
+  --color-brand-mustard: #d8a23a;
-  --color-brand-mustard-hover: #bda270;
+  --color-brand-mustard-hover: #c4932a;
-  --color-accent-highlight: #e4dcc8;
-  --color-accent-deep: #a89462;
   --color-brand-gray: #bdbbb4;
 
   /* —— Semantic —— */
@@ -29,10 +27,10 @@
   --color-on-primary: #f4f5f4;
   --color-accent: var(--color-brand-mustard);
   --color-accent-hover: var(--color-brand-mustard-hover);
-  --color-accent-soft: #faf7ef;
+  --color-accent-soft: #faf6ea;
   --color-on-accent: #174746;
-  --shadow-mustard: 0 3px 14px rgba(120, 98, 62, 0.2);
+  --shadow-mustard: 0 3px 14px rgba(216, 162, 58, 0.22);
-  --shadow-mustard-hover: 0 6px 22px rgba(120, 98, 62, 0.28);
+  --shadow-mustard-hover: 0 6px 22px rgba(216, 162, 58, 0.32);
   --color-lemon-green: #9cae6b;
   --color-success: #174746;
   /* Rollgates: hotel name in navbar only */
@@ -78,12 +76,12 @@ body {
 .bg-pattern-brand-gold {
   background-color: var(--color-bg);
   background-image:
-    linear-gradient(90deg, rgba(200, 175, 130, 0.09) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(216, 162, 58, 0.1) 1px, transparent 1px),
     linear-gradient(rgba(23, 71, 70, 0.045) 1px, transparent 1px);
   background-size: 28px 28px;
 }
 
-/* Primary CTAs — soft champagne gradient, gentle depth */
+/* Primary CTAs — flat mustard */
 .btn-mustard {
   display: inline-flex;
   align-items: center;
@@ -92,37 +90,25 @@ body {
   border-radius: 9999px;
   font-weight: 600;
   color: var(--color-on-accent);
-  background: linear-gradient(
+  background-color: var(--color-accent);
-    165deg,
+  box-shadow: var(--shadow-mustard);
-    var(--color-accent-highlight) 0%,
-    var(--color-accent) 48%,
-    var(--color-accent-deep) 100%
-  );
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.5),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
-    var(--shadow-mustard);
   transition:
-    filter 0.2s ease,
+    background-color 0.2s ease,
     box-shadow 0.2s ease,
     transform 0.15s ease;
 }
 .btn-mustard:hover {
-  filter: brightness(1.03) saturate(1.03);
+  background-color: var(--color-accent-hover);
-  box-shadow:
+  box-shadow: var(--shadow-mustard-hover);
-    inset 0 1px 0 rgba(255, 255, 255, 0.55),
-    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
-    var(--shadow-mustard-hover);
 }
 .btn-mustard:active {
   transform: translateY(1px);
-  filter: brightness(0.99);
 }
 .btn-mustard:disabled {
   opacity: 0.55;
   cursor: not-allowed;
-  filter: grayscale(0.12) brightness(0.96);
+  background-color: var(--color-accent);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow: none;
 }
 
 /* Compact rating / score badges (non-pill) */
@@ -136,27 +122,16 @@ body {
   line-height: 1rem;
   padding: 0.125rem 0.5rem;
   color: var(--color-on-accent);
-  background: linear-gradient(
+  background-color: var(--color-accent);
-    180deg,
+  box-shadow: 0 1px 3px rgba(216, 162, 58, 0.35);
-    #e8ddd0 0%,
-    var(--color-accent) 55%,
-    var(--color-accent-deep) 100%
-  );
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.45),
-    0 1px 4px rgba(120, 98, 62, 0.2);
 }
 
-/* Pills / chips — warm wash + soft gold ring */
+/* Pills / chips — flat soft fill + gold border */
 .chip-mustard {
   border-radius: 9999px;
-  border: 1px solid rgba(180, 155, 110, 0.35);
+  border: 1px solid rgba(216, 162, 58, 0.45);
-  background: linear-gradient(
+  background-color: var(--color-accent-soft);
-    135deg,
+  box-shadow: none;
-    rgba(252, 249, 242, 0.98) 0%,
-    rgba(255, 255, 255, 0.92) 100%
-  );
-  box-shadow: 0 1px 2px rgba(100, 80, 50, 0.06);
   color: var(--color-primary);
   font-weight: 600;
   font-size: 0.75rem;
@@ -182,7 +157,7 @@ body {
   transform: translateY(-4px);
   box-shadow:
     0 20px 44px rgba(23, 71, 70, 0.12),
-    0 0 0 1px rgba(200, 180, 140, 0.14);
+    0 0 0 1px rgba(216, 162, 58, 0.16);
 }
 
 @keyframes mock3d-rotate {

src/app/page.tsx

@@ -74,7 +74,7 @@ export default function HomePage() {
               href={siteConfig.bookingComReviewsUrl}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-sm font-semibold text-[var(--color-accent-deep)] underline-offset-4 transition hover:text-[var(--color-accent)] hover:underline"
+              className="text-sm font-semibold text-[var(--color-accent)] underline-offset-4 transition hover:text-[var(--color-accent)] hover:underline"
             >
               Read all reviews
             </Link>
@@ -158,7 +158,7 @@ export default function HomePage() {
             </div>
             <Link
               href="/booking"
-              className="text-sm font-semibold text-[var(--color-accent-deep)] underline-offset-4 transition hover:text-[var(--color-accent)] hover:underline"
+              className="text-sm font-semibold text-[var(--color-accent)] underline-offset-4 transition hover:text-[var(--color-accent)] hover:underline"
             >
               Book a room →
             </Link>
@@ -214,7 +214,7 @@ export default function HomePage() {
                   <p className="mt-5 text-sm leading-relaxed text-[var(--color-muted)] md:mt-6 md:text-base md:leading-relaxed">
                     {w.description}
                   </p>
-                  <p className="mt-5 text-sm font-semibold text-[var(--color-accent-deep)] md:mt-6">
+                  <p className="mt-5 text-sm font-semibold text-[var(--color-accent)] md:mt-6">
                     {w.hours}
                   </p>
                   <ul className="mt-8 grid gap-3 sm:grid-cols-2 md:mt-10">

src/app/payment/PaymentPageClient.tsx

@@ -142,7 +142,7 @@ export function PaymentPageClient() {
           <button
             type="button"
             onClick={applyCoupon}
-            className="rounded-full border border-[var(--color-primary)] px-4 py-2 text-sm font-semibold text-[var(--color-primary)] transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
+            className="rounded-full border border-[var(--color-primary)] px-4 py-2 text-sm font-semibold text-[var(--color-primary)] transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
           >
             Apply
           </button>

src/components/BookingSearchWidget.tsx

@@ -14,7 +14,7 @@ export function BookingSearchWidget() {
 
   return (
     <div className="overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] shadow-[0_16px_48px_rgba(23,71,70,0.12)] ring-1 ring-[var(--color-accent)]/15">
-      <div className="border-l-[4px] border-[var(--color-accent)]/40 bg-gradient-to-br from-[var(--color-accent-soft)] via-[var(--color-surface)] to-[var(--color-surface)] px-5 py-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.65)] sm:px-6 sm:py-7 md:px-8 md:py-8">
+      <div className="border-l-[4px] border-[var(--color-accent)]/40 bg-[var(--color-accent-soft)] px-5 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
         <p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-[var(--color-primary)]">
           Direct booking
         </p>

src/components/CallUsFab.tsx

@@ -9,14 +9,14 @@ export function CallUsFab() {
     <div className="pointer-events-none fixed bottom-5 right-5 z-[60] flex flex-col items-end gap-2 md:bottom-8 md:right-8">
       <a
         href={`mailto:${siteConfig.email}`}
-        className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-primary)] shadow-lg transition hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] md:h-14 md:w-14"
+        className="pointer-events-auto flex h-12 w-12 items-center justify-center rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-primary)] shadow-lg transition hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] md:h-14 md:w-14"
         aria-label={`Email ${siteConfig.email}`}
       >
         <MailIcon />
       </a>
       <a
         href={`tel:${tel}`}
-        className="group pointer-events-auto flex items-center gap-3 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] py-3 pl-4 pr-5 text-sm font-semibold text-[var(--color-text)] shadow-lg transition hover:bg-gradient-to-r hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)]"
+        className="group pointer-events-auto flex items-center gap-3 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] py-3 pl-4 pr-5 text-sm font-semibold text-[var(--color-text)] shadow-lg transition hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)]"
         aria-label={`Call us at ${siteConfig.primaryPhone}`}
       >
         <span

src/components/Footer.tsx

@@ -73,7 +73,7 @@ export function Footer() {
                   href={siteConfig.social.facebook}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
+                  className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
                   aria-label="Facebook"
                 >
                   <IconFacebook />
@@ -84,7 +84,7 @@ export function Footer() {
                   href={siteConfig.social.instagram}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
+                  className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
                   aria-label="Instagram"
                 >
                   <IconInstagram />
@@ -95,7 +95,7 @@ export function Footer() {
                   href={siteConfig.social.twitter}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
+                  className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
                   aria-label="Twitter / X"
                 >
                   <IconTwitter />
@@ -106,7 +106,7 @@ export function Footer() {
                   href={siteConfig.social.whatsapp}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-gradient-to-br hover:from-[var(--color-accent-highlight)] hover:via-[var(--color-accent)] hover:to-[var(--color-accent-deep)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
+                  className="flex h-10 w-10 items-center justify-center rounded-full border border-stone-500 text-white transition hover:border-transparent hover:bg-[var(--color-accent)] hover:text-[var(--color-on-accent)] hover:shadow-[var(--shadow-mustard)]"
                   aria-label="WhatsApp"
                 >
                   <IconWhatsApp />

src/components/Header.tsx

@@ -46,7 +46,7 @@ export function Header() {
               <Link
                 key={item.href}
                 href={item.href}
-                className="transition-colors hover:text-[var(--color-accent-deep)]"
+                className="transition-colors hover:text-[var(--color-accent)]"
               >
                 {item.label}
               </Link>

src/components/Mock3DPlaceholder.tsx

@@ -45,7 +45,7 @@ export function Mock3DPlaceholder({
 
   return (
     <div
-      className={`relative aspect-video w-full overflow-hidden rounded-2xl border border-[var(--color-border)] bg-gradient-to-br from-[var(--color-surface-muted)] via-[var(--color-surface)] to-[var(--color-accent-soft)] shadow-lg ${className}`}
+      className={`relative aspect-video w-full overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface-muted)] shadow-lg ${className}`}
       role="img"
       aria-label="Demonstration 3D preview placeholder — drag to tilt the mock room view"
     >

src/components/OutletCard.tsx

@@ -34,7 +34,7 @@ export function OutletCard({ outlet }: Props) {
       <ul className="space-y-2 border-t border-[var(--color-border)] p-5 text-sm text-[var(--color-muted)] md:p-6">
         {outlet.bullets.map((b) => (
           <li key={b} className="flex gap-2">
-            <span className="text-lg font-bold leading-none text-[var(--color-accent-highlight)]" aria-hidden>
+            <span className="text-lg font-bold leading-none text-[var(--color-accent)]" aria-hidden>
               ·
             </span>
             {b}