

:root {
  --primary: #8B4513;
  --accent:  #D4A574;
  --surface: #FBF5F0;
  --ink:     #2B1404;
  --surface-elevated: #ffffff;
  --border:  rgba(139,69,19,0.14);
  --shadow-sm: 0 1px 3px rgba(139,69,19,0.08);
  --shadow-md: 0 4px 14px rgba(139,69,19,0.13);
  --shadow-lg: 0 14px 36px rgba(139,69,19,0.18);
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.75;
  font-weight: 400;
  direction: rtl;
}

/* ─── Scroll-reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s var(--motion-ease), transform 0.6s var(--motion-ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ─── Hero overlay ─── */
.hero-overlay {
  background: linear-gradient(180deg, rgba(20,10,4,0.28) 0%, rgba(20,10,4,0.70) 100%);
}

/* ─── Food card hover ─── */
.food-card img {
  transition: transform 0.5s var(--motion-ease);
}
.food-card:hover img {
  transform: scale(1.07);
}

/* ─── Nav link underline ─── */
.nav-link {
  position: relative;
  transition: color 0.2s;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  inset-inline-end: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s var(--motion-ease);
}
.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: var(--primary); }

/* ─── Marquee ─── */
@keyframes marquee-rtl {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}
.marquee-inner {
  animation: marquee-rtl 22s linear infinite;
  display: flex;
  gap: 3rem;
  white-space: nowrap;
}

/* ─── Persian numerals ─── */
.counter { font-feature-settings: 'ss01'; }

/* ─── Tab active ─── */
.tab-btn.active {
  background: var(--primary);
  color: #fff;
}

/* ─── Form focus ─── */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent) !important;
}

/* ─── Toast ─── */
#toast {
  transition: opacity 0.4s, transform 0.4s;
  transform: translateY(100px);
  opacity: 0;
}
#toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .food-card img, .nav-link::after {
    transition: none !important;
    animation: none !important;
  }
  .marquee-inner { animation: none; }
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
