@import "tailwindcss";

@layer base {
  body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  }
  input[type="checkbox"] {
    accent-color: #000000;
  }
  /* Ensure all actionable & interactive elements show pointer cursor */
  button,
  a,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  input[type="checkbox"],
  input[type="radio"],
  select,
  summary,
  [onclick],
  label[for],
  .cursor-pointer {
    cursor: pointer !important;
  }
}

/* Custom scrollbar and smooth transitions */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f5f5f4;
}
::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a29e;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Ingredient HTML Content Parser Styling */
.ingredient-parsed-content p {
  margin-bottom: 0.4rem;
}
.ingredient-parsed-content p:last-child {
  margin-bottom: 0;
}
.ingredient-parsed-content strong,
.ingredient-parsed-content b {
  font-weight: 700;
  color: #1c1917;
}
.ingredient-parsed-content ul {
  list-style-type: disc;
  margin-left: 1.25rem;
  margin-bottom: 0.4rem;
}
.ingredient-parsed-content ol {
  list-style-type: decimal;
  margin-left: 1.25rem;
  margin-bottom: 0.4rem;
}
.ingredient-parsed-content li {
  margin-bottom: 0.2rem;
}

/* Explicit aspect ratio overrides */
.aspect-square,
.aspect-1\/1 {
  aspect-ratio: 1 / 1 !important;
}
.aspect-16\/9 {
  aspect-ratio: 16 / 9 !important;
}