/* ===== Rajwada Chai — Custom styles (loaded on top of Tailwind Play CDN) ===== */

:root {
  --royal:        #1f4d3a;
  --royal-dark:   #133127;
  --gold:         #d4a017;
  --gold-light:   #efc55a;
  --cream:        #fbf6e7;
  --card:         #fffaec;
  --border:       #e7d9ad;
  --muted:        #6e6450;
  --foreground:   #1a1a1a;
  --background:   #fbf6e7;
}

html, body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Playfair Display', serif; }

/* Brand utilities (paired with tailwind config color tokens) */
.bg-royal       { background-color: var(--royal); }
.bg-royal-dark  { background-color: var(--royal-dark); }
.bg-gold        { background-color: var(--gold); }
.bg-cream       { background-color: var(--cream); }
.bg-card        { background-color: var(--card); }
.bg-background  { background-color: var(--background); }

.text-royal       { color: var(--royal); }
.text-royal-dark  { color: var(--royal-dark); }
.text-gold        { color: var(--gold); }
.text-cream       { color: var(--cream); }
.text-muted-foreground { color: var(--muted); }

.border-gold      { border-color: var(--gold); }
.border-input     { border-color: var(--border); }
.border-border    { border-color: var(--border); }

.fill-gold        { fill: var(--gold); }

.bg-gradient-royal { background-image: linear-gradient(135deg, var(--royal-dark) 0%, var(--royal) 100%); }
.bg-gradient-gold  { background-image: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); }
.bg-gradient-cream { background-image: linear-gradient(135deg, #fff8dc 0%, var(--cream) 100%); }

.shadow-elegant   { box-shadow: 0 18px 40px -18px rgba(19, 49, 39, .35); }
.shadow-gold      { box-shadow: 0 14px 30px -10px rgba(212, 160, 23, .45); }

.gold-divider {
  height: 2px;
  background-image: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  border-radius: 9999px;
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.animate-float { animation: float 2.6s ease-in-out infinite; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fade-up .55s ease both; }

@keyframes steam {
  0%   { opacity: 0; transform: translateY(0) scale(.9); }
  50%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-30px) scale(1.4); }
}
.animate-steam { animation: steam 3s ease-in-out infinite; }

/* Form focus ring */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 160, 23, .35);
  border-color: var(--gold);
}

/* Header active link */
.nav-link.active { color: var(--gold); }
.nav-link.active::after { width: 100% !important; }

/* Container */
.container-x { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { .container-x { padding-left: 2rem; padding-right: 2rem; } }

/* Toast */
#rj-toast {
  position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-20px);
  background: var(--royal-dark); color: var(--cream); border: 1px solid var(--gold);
  padding: 12px 22px; border-radius: 9999px; font-size: 14px; z-index: 200;
  opacity: 0; pointer-events: none; transition: all .3s ease;
}
#rj-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#rj-toast.error { border-color: #d44; }