body {
  font-family: 'Inter', sans-serif;
  transition: background-color 0.1s, color 0.1s;
  background-color: #F9FAFB;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 800;
}

.logo-img {
  height: 60px;
  width: 48.3px;
}
.hero-section {
    background-color: #fbfcfd;
}
.dark .hero-section {
    background-color: #141b2a;
}
.dark {
    background-color: #111827; /* gray-900 */
    color: #f3f4f6; /* gray-100 */
}
.dark white{
    background-color: #111827; /* gray-900 */
    color: #f3f4f6; /* gray-100 */
}
.dark .topbar, 
.dark .filter-container, 
.dark .problem-card,
.dark .feature-card,
.dark .variant-card,
.dark .product-card {
    background-color: #1f2937; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
}
.dark .nav a {
    color: #d1d5db; /* gray-300 */
}
 .dark .nav a:hover {
    color: #ffffff;
}
.dark .logo-text,
.dark .section-title,
.dark h1, .dark h2, .dark h3,
.dark .text-gray-900 {
    color: #ffffff;
}
.dark .text-gray-800 {
    color: #d1d5db; /* gray-300 */
}
.dark .text-gray-600 {
    color: #9ca3af; /* gray-400 */
}
.dark .text-gray-500 {
    color: #6b7280; /* gray-500 */
}
.dark select {
    background-color: #374151; /* gray-700 */
    border-color: #4b5563; /* gray-600 */
    color: #f3f4f6; /* gray-100 */
}
.dark .tag {
    /* Use important to override Tailwind background color utilities if needed */
    background-color: #374151 !important; 
}
.dark .bg-blue-100 {
    color: #bfdbfe !important; /* blue-200 */
}
.dark .bg-green-100 {
    color: #a7f3d0 !important; /* green-200 */
}
.dark .bg-red-100 {
    color: #fecaca !important; /* red-200 */
}
.dark .logo {
    filter: invert(1);
}