:root { 
  font-family: 'Inter', sans-serif; 
}

/* Light Mode (Default) */
.btn-active { 
  background-color: #4f46e5; 
  color: white; 
}

.btn-inactive { 
  background-color: #eef2ff; 
  color: #4338ca; 
}

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

.card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
}

#website-grid { 
  transition: opacity 0.2s ease-in-out; 
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
  .btn-inactive {
    background-color: #374151; /* gray-700 */
    color: #d1d5db;         /* gray-300 */
  }

  .card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  }
}