@import "tailwindcss";

:root {
  --cream: #F5F0E8;
  --beige: #E8DCC8;
  --beige-dark: #D4C8B0;
  --teal: #4AAFA8;
  --teal-dark: #3D9A94;
  --green: #5C8A5C;
  --coffee: #3D2B1F;
  --coffee-light: #5A3D2D;
  --muted: #8A7265;
  --header-h: 64px;
  --tabbar-h: 68px;
}

@theme inline {
  --color-cream: var(--cream);
  --color-beige: var(--beige);
  --color-beige-dark: var(--beige-dark);
  --color-teal: var(--teal);
  --color-teal-dark: var(--teal-dark);
  --color-green: var(--green);
  --color-coffee: var(--coffee);
  --color-coffee-light: var(--coffee-light);
  --color-muted: var(--muted);
  --font-display: var(--font-playfair);
  --font-body: var(--font-inter);
}

html {
  scroll-behavior: smooth;
}

/* Grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Category scroll offset for sticky header */
.category-section {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* Menu item fade-up animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-item-row {
  animation: fadeUp 0.35s ease both;
  animation-delay: calc(var(--item-index, 0) * 55ms);
}

/* Tab bar active indicator */
.tab-active-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  margin: 0 auto;
  transition: opacity 0.2s ease;
}

/* Smooth tab color transition */
.tab-item {
  transition: color 0.2s ease;
}

/* WhatsApp pulse ring */
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.wa-btn {
  animation: pulse-ring 2.5s ease-out infinite;
}