/* =============================================
   Rocky Mountain Thai Kitchen — Brand Styles
   Do NOT edit styles.css for brand overrides —
   Tailwind rebuilds will wipe that file.
   ============================================= */

:root {
  --site-bg: #fff4e6;
  --accent:  #c8870a;
  --blue:    #7ab8d4;
  --green:   #52a875;
}

/* Background */
body {
  background-color: var(--site-bg);
}

.bg-white,
.bg-stone-50 {
  background-color: var(--site-bg) !important;
}

/* Typography */
body {
  font-family: "Quicksand", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.font-cormorant {
  font-family: "Acme", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Accent color overrides — replaces the muted tan #ccbc89 throughout */
.bg-accent,
.hover\:bg-accent:hover {
  background-color: var(--accent) !important;
}

.hover\:bg-accent\/90:hover {
  background-color: color-mix(in srgb, var(--accent) 90%, transparent) !important;
}

.text-accent,
.hover\:text-accent:hover {
  color: var(--accent) !important;
}

.border-accent,
.hover\:border-accent:hover {
  border-color: var(--accent) !important;
}

/* The darker gold used on menu section labels */
.text-\[\#7a6830\] {
  color: var(--accent) !important;
}

/* Order Now pill button */
.order-now-btn:hover {
  background-color: color-mix(in srgb, var(--green) 85%, black) !important;
}

/* About collage animation */
@keyframes ovalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes circlePopIn {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
  70% {
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.about-oval {
  animation: ovalFadeIn 1s ease forwards;
}

.about-circle {
  opacity: 0;
}

[data-animate="about-collage"].in-view .about-circle-food {
  animation: circlePopIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

[data-animate="about-collage"].in-view .about-circle-logo {
  animation: circlePopIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s forwards;
}