/* Food Finder - Custom Styles */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@700&display=swap');

:root {
  --primary: #f97316;
  --accent: #059669;
}

body { 
  font-family: 'Inter', system_ui, sans-serif; 
}

.heading-serif { 
  font-family: 'Playfair Display', Georgia, serif; 
  letter-spacing: -0.02em; 
}

.tap-target { 
  min-height: 48px; 
  min-width: 48px; 
}

.section-heading {
  font-size: 1.35rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
}

@media (min-width: 768px) {
  .section-heading { 
    font-size: 1.55rem; 
  }
}

.food-card {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.1s ease;
}

.food-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.06);
  border-color: #f4e9d8;
}

.food-card:active { 
  transform: scale(0.985); 
}

.appliance-btn {
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

.appliance-btn:active { 
  transform: scale(0.94); 
}

.ingredient-chip {
  animation: chipPop 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes chipPop {
  from { opacity: 0; transform: scale(0.6) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.result-card {
  animation: fadeUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.modal {
  animation: modalEnter 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.nutrition-pill {
  font-variant-numeric: tabular-nums;
}

.step-item {
  transition: all 0.1s ease;
}

.step-item.done {
  opacity: 0.65;
  text-decoration: line-through;
}

.soft-shadow {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
}

.results-grid {
  scroll-behavior: smooth;
}

.match-badge {
  font-size: 0.65rem;
  letter-spacing: 0.5px;
}