/* App layer. Tokens live in tokens.css, ported theme parts in components.css —
   both are loaded before this file in base.html. */

body {
  font-family: "Nunito", sans-serif;
  background-color: var(--body-bg);
  color: var(--text);
}

h1, h2, h3, .font-serif {
  font-family: "Playfair Display", serif;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

.text-brand { color: var(--brand); }
.text-brand-light { color: var(--brand-light); }

/* Matches the live theme's .btn-brown: charcoal that flips to gold on hover. */
.btn-brand {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover,
.btn-brand:focus {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-charcoal);
}

.badge-info {
  background-color: var(--brand-soft);
  color: var(--c-charcoal);
  font-weight: 600;
  padding: 0.5em 0.9em;
  border-radius: var(--radius-pill);
}
.badge-timer {
  background-color: #eef6ff;
  color: var(--c-blue-note);
}

/* --- Card hover animation --- */
.recipe-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 1rem;
  overflow: hidden;
}
.recipe-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md) !important;
}
.recipe-card-img {
  height: 190px;
  object-fit: cover;
}

/* --- Page fade-in --- */
.fade-in {
  animation: fadeIn 0.4s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Favorite heart --- */
.favorite-btn i {
  transition: transform 0.2s ease, color 0.2s ease;
}
.favorite-btn.pulse i {
  animation: heartPulse 0.35s ease;
}
@keyframes heartPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* --- Star rating --- */
.star-icon {
  cursor: pointer;
  font-size: 1.3rem;
  transition: transform 0.15s ease;
}
.star-icon:hover {
  transform: scale(1.15);
}

/* --- Skeleton loader (used while AI/async content is fetching) --- */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skeletonShine 1.2s ease-in-out infinite;
  border-radius: 0.5rem;
}
@keyframes skeletonShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ingredient-list .list-group-item {
  border-color: var(--c-n-100);
}