body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.btn-transition {
    transition: all 0.2s ease;
}

.person-tag {
    transition: all 0.2s ease;
}

.dish-item {
    transition: all 0.2s ease;
}

.result-card {
    transition: all 0.2s ease;
}

.btn-transition:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

input:focus {
    outline: none;
}

/* Mobile-first optimizations */
@media (max-width: 768px) {
    /* Larger touch targets for mobile - Apple recommends 44x44, Google 48x48 */
    button, input, select {
        min-height: 48px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Ensure all buttons meet minimum touch target */
    button {
        min-width: 48px;
        padding: 12px 16px;
    }
    
    /* Small icon buttons can be smaller */
    button.w-8 {
        min-width: 32px;
        min-height: 32px;
        padding: 0;
    }
    
    /* Primary action buttons even larger */
    .btn-transition:not(.person-tag) {
        min-height: 52px;
        padding: 14px 20px;
    }
    
    /* Better visual hierarchy */
    h1 {
        font-size: 2.5rem !important;
    }
    
    /* Reduce padding on mobile to minimize scrolling */
    body {
        padding: 0.75rem !important;
    }
    
    /* Compact sections on mobile */
    .max-w-3xl {
        padding: 0;
    }
    
    /* Better spacing for one task per screen */
    .border-b {
        margin-bottom: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* Make dish items more prominent */
    .dish-item {
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
    
    /* Improve button visibility */
    .btn-transition {
        font-weight: 600;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }
    
    /* Better header spacing */
    .text-center.mb-8 {
        margin-bottom: 1.5rem !important;
    }
    
    /* Collapsible section headers more prominent */
    label.uppercase {
        font-size: 0.95rem !important;
        letter-spacing: 0.05em;
    }
    
    /* Full width inputs on mobile by default, but allow explicit widths */
    input[type="text"]:not([class*="w-"]),
    input[type="number"]:not([class*="w-"]),
    select:not([class*="w-"]) {
        width: 100%;
    }
    
    /* Stack everything vertically on mobile */
    .flex-wrap {
        flex-wrap: wrap;
    }
    
    /* Larger card padding for better touch zones */
    .bg-white.rounded-xl {
        padding: 1rem !important;
    }
    
    /* Add spacing between interactive elements */
    .gap-2 {
        gap: 0.75rem !important;
    }
    
    .gap-3 {
        gap: 1rem !important;
    }
}