* {
  font-family: 'Inter', sans-serif;
}
.font-heading {
  font-family: 'Poppins', sans-serif;
}
.hero-bg-gradient {
  background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%), url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
  background-size: cover;
  background-position: center;
}
.menu-card {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.menu-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 25px -12px rgba(0,0,0,0.2);
}
.btn-gradient-primary {
  background: linear-gradient(95deg, var(--de-500, #f97316), var(--de-600, #ea580c));
  transition: all 0.2s ease;
}
.btn-gradient-primary:hover {
  background: linear-gradient(95deg, var(--de-600, #ea580c), var(--de-500, #f97316));
  transform: scale(1.03);
  box-shadow: 0 10px 20px -5px color-mix(in srgb, var(--de-500, #f97316) 40%, transparent);
}
.btn-outline-white {
  transition: all 0.2s;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.15);
  transform: translateY(-2px);
}
.lunch-box-card {
  background: linear-gradient(145deg, #ffffff, var(--de-50, #fff7ed));
  transition: all 0.3s;
}
.lunch-box-card:hover {
  background: linear-gradient(145deg, var(--de-50, #fff7ed), #ffffff);
  transform: translateY(-5px);
}
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}
.float-animation {
  animation: float 4s ease-in-out infinite;
}
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: var(--de-500, #f97316);
  border-radius: 10px;
}
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}
.mobile-menu.open {
  max-height: 560px;
}
.ripple-btn {
  position: relative;
  overflow: hidden;
}
.ripple-btn:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10);
  opacity: 0;
  transition: transform 0.5s, opacity 0.8s;
}
.ripple-btn:active:after {
  transform: scale(0);
  opacity: 0.4;
  transition: 0s;
}
.hygiene-icon {
  transition: all 0.3s;
}
.hygiene-icon:hover {
  transform: scale(1.1);
}
.reviews-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  margin-inline: -1rem;
  padding-inline: 1rem;
}
.reviews-track::-webkit-scrollbar {
  height: 6px;
}
.reviews-track::-webkit-scrollbar-thumb {
  background: var(--de-400, #fb923c);
  border-radius: 9999px;
}
.review-card-snap {
  flex: 0 0 min(calc(100vw - 3rem), 22rem);
  scroll-snap-align: center;
}
@media (min-width: 768px) {
  .reviews-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .review-card-snap {
    flex: none;
    min-width: 0;
  }
}
.gallery-photo {
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* Shared “component” surfaces */
.doe-surface {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid var(--de-100, #ffedd5);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06);
}
.doe-page-hero {
  background: linear-gradient(135deg, var(--de-50, #fff7ed) 0%, var(--de-100, #ffedd5) 100%);
  border-bottom: 1px solid var(--de-200, #fed7aa);
}
/**
 * Maps Tailwind "orange" brand utilities to CSS variables so themes can swap palettes.
 * Load after Tailwind. Default :root = Sunset Orange.
 */
:root {
  --de-50: #fff7ed;
  --de-100: #ffedd5;
  --de-200: #fed7aa;
  --de-300: #fdba74;
  --de-400: #fb923c;
  --de-500: #f97316;
  --de-600: #ea580c;
  --de-700: #c2410c;
  --de-800: #9a3412;
  --de-tint-50: #fffbeb;
  --de-amber-600: #d97706;
  --de-ring: #fb923c;
}

/* Alternate themes: only variables */
html[data-theme="ocean"] {
  --de-50: #f0fdfa;
  --de-100: #ccfbf1;
  --de-200: #99f6e4;
  --de-300: #5eead4;
  --de-400: #2dd4bf;
  --de-500: #14b8a6;
  --de-600: #0d9488;
  --de-700: #0f766e;
  --de-800: #115e59;
  --de-tint-50: #ecfeff;
  --de-amber-600: #0d9488;
  --de-ring: #2dd4bf;
}

html[data-theme="forest"] {
  --de-50: #ecfdf5;
  --de-100: #d1fae5;
  --de-200: #a7f3d0;
  --de-300: #6ee7b7;
  --de-400: #34d399;
  --de-500: #10b981;
  --de-600: #059669;
  --de-700: #047857;
  --de-800: #065f46;
  --de-tint-50: #f0fdf4;
  --de-amber-600: #059669;
  --de-ring: #34d399;
}

html[data-theme="berry"] {
  --de-50: #fff1f2;
  --de-100: #ffe4e6;
  --de-200: #fecdd3;
  --de-300: #fda4af;
  --de-400: #fb7185;
  --de-500: #f43f5e;
  --de-600: #e11d48;
  --de-700: #be123c;
  --de-800: #9f1239;
  --de-tint-50: #fdf2f8;
  --de-amber-600: #db2777;
  --de-ring: #fb7185;
}

/* Text */
.text-orange-300 { color: var(--de-300) !important; }
.text-orange-400 { color: var(--de-400) !important; }
.text-orange-500 { color: var(--de-500) !important; }
.text-orange-600 { color: var(--de-600) !important; }
.text-orange-700 { color: var(--de-700) !important; }
.text-orange-800 { color: var(--de-800) !important; }
.text-orange-200 { color: var(--de-200) !important; }

/* Backgrounds */
.bg-orange-400 { background-color: var(--de-400) !important; }
.bg-orange-50 { background-color: var(--de-50) !important; }
.bg-orange-100 { background-color: var(--de-100) !important; }
.bg-orange-200 { background-color: var(--de-200) !important; }
.bg-orange-500 { background-color: var(--de-500) !important; }
.bg-orange-500\/20 {
  background-color: color-mix(in srgb, var(--de-500) 20%, transparent) !important;
}
.bg-orange-50\/80 {
  background-color: color-mix(in srgb, var(--de-50) 80%, transparent) !important;
}
.bg-amber-50 {
  background-color: var(--de-tint-50) !important;
}

/* Borders & divide */
.border-orange-100 { border-color: var(--de-100) !important; }
.border-orange-200 { border-color: var(--de-200) !important; }
.border-orange-300 { border-color: var(--de-300) !important; }
.border-orange-300\/40 {
  border-color: color-mix(in srgb, var(--de-300) 40%, transparent) !important;
}
.border-orange-500 { border-color: var(--de-500) !important; }
.ring-orange-100 { --tw-ring-color: var(--de-100) !important; }
.divide-orange-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--de-100) !important;
}

/* Ring focus */
.focus\:ring-orange-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: var(--de-400) !important;
}

/* Hover text */
.hover\:text-orange-400:hover { color: var(--de-400) !important; }
.hover\:text-orange-500:hover { color: var(--de-500) !important; }
.hover\:text-orange-600:hover { color: var(--de-600) !important; }
.hover\:text-orange-800:hover { color: var(--de-800) !important; }

/* Hover background */
.hover\:bg-orange-50:hover { background-color: var(--de-50) !important; }
.hover\:bg-orange-100:hover { background-color: var(--de-100) !important; }
.hover\:bg-orange-500:hover { background-color: var(--de-500) !important; }
.hover\:bg-orange-600:hover { background-color: var(--de-600) !important; }

/* Gradients — brand orange/amber */
.from-orange-50 {
  --tw-gradient-from: var(--de-50) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-orange-50\/80 {
  --tw-gradient-from: color-mix(in srgb, var(--de-50) 80%, transparent) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-orange-50 {
  --tw-gradient-to: var(--de-50) var(--tw-gradient-to-position) !important;
}
.to-orange-50\/50 {
  --tw-gradient-to: color-mix(in srgb, var(--de-50) 50%, transparent) var(--tw-gradient-to-position) !important;
}
.from-orange-100 {
  --tw-gradient-from: var(--de-100) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-orange-400 {
  --tw-gradient-from: var(--de-400) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.from-orange-600 {
  --tw-gradient-from: var(--de-600) var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-orange-400 {
  --tw-gradient-to: var(--de-400) var(--tw-gradient-to-position) !important;
}
.to-orange-600 {
  --tw-gradient-to: var(--de-600) var(--tw-gradient-to-position) !important;
}
.to-amber-50 {
  --tw-gradient-to: var(--de-tint-50) var(--tw-gradient-to-position) !important;
}

/* Footer / social hover still use orange-* — covered above */

/* Hygiene row kept amber hue but soft-tinted in themes via separate vars — optional: tie to brand */
html[data-theme="ocean"] .text-amber-600,
html[data-theme="forest"] .text-amber-600,
html[data-theme="berry"] .text-amber-600 {
  color: var(--de-amber-600) !important;
}