:root {
  --tw-primary: #b3541e;
  --tw-primary-dark: #8f4315;
  --tw-accent: #f0a04b;
  --tw-bg: #fdfaf6;
}

body {
  background-color: var(--tw-bg);
}

.navbar-brand {
  letter-spacing: 0.02em;
}

.btn-primary {
  --bs-btn-bg: var(--tw-primary);
  --bs-btn-border-color: var(--tw-primary);
  --bs-btn-hover-bg: var(--tw-primary-dark);
  --bs-btn-hover-border-color: var(--tw-primary-dark);
  --bs-btn-active-bg: var(--tw-primary-dark);
  --bs-btn-active-border-color: var(--tw-primary-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--tw-primary);
  --bs-btn-border-color: var(--tw-primary);
  --bs-btn-hover-bg: var(--tw-primary);
  --bs-btn-hover-border-color: var(--tw-primary);
  --bs-btn-active-bg: var(--tw-primary);
  --bs-btn-active-border-color: var(--tw-primary);
}

.text-primary {
  color: var(--tw-primary) !important;
}

.nav-pills .nav-link {
  color: var(--tw-primary);
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.show {
  background-color: var(--tw-primary);
  color: #fff;
}

.nav-pills .nav-link:hover {
  background-color: rgba(179, 84, 30, 0.12);
  color: var(--tw-primary-dark);
}

.nav-pills .nav-link.active:hover {
  background-color: var(--tw-primary-dark);
  color: #fff;
}

.badge.text-bg-light {
  color: #4a3b32 !important;
}

.recipe-img {
  height: 180px;
  object-fit: cover;
}

.recipe-img-placeholder {
  height: 180px;
  background: linear-gradient(135deg, #f7e2cd, #f0a04b33);
}

.recipe-card {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.recipe-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12) !important;
}

.recipe-instructions {
  white-space: pre-line;
  line-height: 1.6;
}

.card {
  border: none;
  border-radius: 0.9rem;
}

.card-header {
  border-radius: 0.9rem 0.9rem 0 0 !important;
}

.table > :not(caption) > * > * {
  padding: 0.6rem 0.75rem;
}

footer {
  border-radius: 0;
}

@media (max-width: 575.98px) {
  .recipe-img,
  .recipe-img-placeholder {
    height: 200px;
  }
}