@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Mobile-First Styles */
body {
    background-color: #f3f4f6; /* gray-100 */
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Simulate mobile app on desktop */
@media (min-width: 640px) {
    body {
        background-color: #e5e7eb; /* gray-200 */
    }
    .mobile-container {
        max-width: 480px;
        margin: 0 auto;
        min-height: 100vh;
        background-color: #ffffff;
        box-shadow: 0 0 15px rgba(0,0,0,0.1);
        position: relative;
    }
}

.mobile-container {
    min-height: 100vh;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

/* Hide scrollbar for clean UI */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* smooth transitions */
.transition-all-300 {
    transition: all 0.3s ease-in-out;
}

/* Card Swipe Animation Hooks */
.swipe-card {
    transition: transform 0.3s ease, opacity 0.3s ease;
}