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

:root {
  --bg: #edf2f7;
  --card: #ffffff;
  --text: #2d3748;
  --muted: #718096;
  --accent: #48bb78;
  --accent-dark: #38a169;
  --border: #e2e8f0;
}

body.app-theme {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(180deg, #f8fafc 0%, var(--bg) 45%, #edf2f7 100%);
  color: var(--text);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.section-title {
  font-weight: 700;
  letter-spacing: 0.2px;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  transition: all .2s ease;
}

.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.btn-muted {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.btn-muted:hover {
  background: #f8fafc;
}

.recipe-card {
  transition: transform .25s ease, box-shadow .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .recipe-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.14);
  }
}

.meal-slot {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all .2s ease;
}

.meal-slot:hover {
  border-color: #cbd5e0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.meal-slot.active {
  border-color: #48bb78;
  box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.18);
}

.meal-slot.drop-target {
  border-color: #4299e1;
  background: #ebf8ff;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.18);
}

.input-modern {
  border: 1px solid #cbd5e0;
  border-radius: 10px;
  background: #fff;
}

.input-modern:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(72, 187, 120, .15);
}