/*
 * main.css — NutriCare Base Styles
 * Supplements Tailwind with custom typography and component styles.
 */

/* ─── Base Typography ─── */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg-body);
}

/* ─── Prose (for rich text content) ─── */
.prose {
  max-width: 65ch;
  color: var(--color-text);
  line-height: 1.75;
}

.prose h2 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.prose h3 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.prose p {
  margin-bottom: 1.25rem;
}

.prose ul, .prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose strong {
  font-weight: 700;
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
}

.prose a:hover {
  color: var(--color-primary-600);
}

/* ─── Nutrient Bar (mini progress bar for macros) ─── */
.nutrient-bar {
  height: 6px;
  border-radius: 3px;
  background-color: var(--color-bg-muted);
  overflow: hidden;
}

.nutrient-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.nutrient-bar-protein { background-color: #3B82F6; }
.nutrient-bar-lipid { background-color: #F59E0B; }
.nutrient-bar-glucid { background-color: #10B981; }
.nutrient-bar-fiber { background-color: #8B5CF6; }

/* ─── Disease Tag Colors ─── */
.disease-tag-diabetes { background-color: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.disease-tag-kidney { background-color: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.disease-tag-hypertension { background-color: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE; }
.disease-tag-gout { background-color: #EDE9FE; color: #5B21B6; border: 1px solid #DDD6FE; }
.disease-tag-cancer { background-color: #FCE7F3; color: #9D174D; border: 1px solid #FBCFE8; }
.disease-tag-malnutrition { background-color: #FFF7ED; color: #9A3412; border: 1px solid #FED7AA; }

/* ─── Recipe Card Flip (Design B) ─── */
.recipe-card-flip {
  perspective: 800px;
}

.recipe-card-flip .card-inner {
  position: relative;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.recipe-card-flip:hover .card-inner {
  transform: rotateY(180deg);
}

.recipe-card-flip:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.06);
}

.recipe-card-flip .card-front,
.recipe-card-flip .card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.recipe-card-flip .card-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  border-radius: 12px;
  overflow: hidden;
}

/* ─── Smooth Transitions ─── */
.transition-panel {
  transition: transform 540ms ease-in-out, opacity 540ms ease-in-out;
}