@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
    --primary: #4F46E5;
    --secondary: #10B981;
    --background: #F9FAFB;
    --card: #FFFFFF;
    --text: #111827;
    --text-light: #6B7280;
    --border: #E5E7EB;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background);
    color: var(--text);
    line-height: 1.5;
}

/* Simplified Components */
.btn-primary {
    @apply bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-5 rounded-lg transition flex items-center gap-2;
}

.btn-secondary {
    @apply bg-white hover:bg-gray-50 text-gray-700 font-medium py-2 px-5 rounded-lg transition flex items-center gap-2 border border-gray-300;
}

/* Clean List Items */
.list-item {
    @apply p-3 flex justify-between items-center border-b border-gray-100 last:border-0 transition;
}

.completed {
    @apply text-gray-400;
}

/* Input & List */
#groceryList {
    @apply min-h-[200px] max-h-[400px] overflow-y-auto divide-y divide-gray-100 border border-gray-200 rounded-lg bg-white;
}

#itemInput {
    @apply flex-grow p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 transition;
}

/* Voice Control */
.voice-control {
    @apply bg-emerald-600 hover:bg-emerald-700;
}

.recording {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Layout */
main .container {
    @apply bg-white rounded-xl shadow-sm p-6;
}

h1 {
    @apply text-2xl font-semibold text-gray-900 mb-6;
}

/* Tips Section */
.tips-section {
    @apply mt-6 p-4 bg-blue-50 rounded-lg border border-blue-100;
}

.tips-section h2 {
    @apply text-lg font-medium text-blue-800 mb-2;
}

.tips-section ul {
    @apply list-disc pl-5 text-blue-700 space-y-1 text-sm;
}

/* Utility Classes */
.space-y-3 > * + * {
    margin-top: 0.75rem;
}