:root {
  /* Warm Food Delivery Theme */
  --background: 35 30% 98%;
  --foreground: 20 20% 15%;

  --card: 0 0% 100%;
  --card-foreground: 20 20% 15%;

  --popover: 0 0% 100%;
  --popover-foreground: 20 20% 15%;

  /* Vibrant Orange Primary */
  --primary: 20 95% 55%;
  --primary-foreground: 0 0% 100%;

  /* Warm Cream Secondary */
  --secondary: 35 40% 95%;
  --secondary-foreground: 20 20% 25%;

  --muted: 35 20% 92%;
  --muted-foreground: 20 10% 45%;

  /* Deep Red Accent */
  --accent: 0 75% 50%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 35 20% 88%;
  --input: 35 20% 88%;
  --ring: 20 95% 55%;

  --radius: 0.75rem;

  /* Custom Food Colors */
  --golden: 40 90% 50%;
  --golden-light: 40 90% 70%;
  --warm-brown: 25 40% 30%;
  --cream: 35 40% 96%;
  --cream-dark: 35 30% 90%;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(20 95% 55%) 0%, hsl(0 75% 50%) 100%);
  --gradient-warm: linear-gradient(180deg, hsl(35 40% 96%) 0%, hsl(35 30% 92%) 100%);
  --gradient-hero-overlay: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);

  /* Shadows */
  --shadow-card: 0 4px 20px -4px hsla(20, 50%, 20%, 0.15);
  --shadow-card-hover: 0 12px 40px -8px hsla(20, 60%, 30%, 0.25);
  --shadow-button: 0 4px 14px -2px hsla(20, 95%, 45%, 0.4);
  --shadow-button-hover: 0 6px 20px -2px hsla(20, 95%, 45%, 0.5);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

h1,h2,h3,h4,h5,h6 { font-family: Fredoka, ui-sans-serif, system-ui; font-weight: 700; }
a { color: inherit; text-decoration: none; }

/* Custom classes used by the original project */
.container-custom { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px){ .container-custom{ padding-left: 2rem; padding-right: 2rem; } }

.section-padding { padding: 4rem 1rem; }
@media (min-width: 768px){ .section-padding{ padding: 6rem 1rem; } }

.btn-primary{
  display: inline-flex; align-items:center; justify-content:center; gap: .5rem;
  padding: 1rem 2rem;
  font-size: 1.125rem; font-weight: 600;
  color: hsl(var(--primary-foreground));
  border-radius: 9999px;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-button);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.btn-primary:hover{ box-shadow: var(--shadow-button-hover); transform: scale(1.05); }
.btn-primary:active{ transform: scale(.95); }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding: 1rem 2rem;
  font-size: 1.125rem; font-weight: 600;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 2px solid hsl(var(--primary));
  border-radius: 9999px;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.btn-secondary:hover{ background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

.card-product{
  background: hsl(var(--card));
  border-radius: 1rem;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: var(--shadow-card);
}
.card-product:hover{
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.tag-badge{
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.5rem 1rem;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 500;
}

.gradient-text{
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

.animate-fade-up { opacity: 0; animation: fadeUp .6s ease-out forwards; }
@keyframes fadeUp { from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:translateY(0)} }

.animate-bounce { animation: bounce 1.2s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* small helpers */
.lucide{ width: 1em; height: 1em; }
.bg-warm-brown {
  background-color: hsl(var(--warm-brown));
}

#siteHeader{
  background: white;
  opacity: 0.8;
}