:root {
    --color-indigo: #4f46e5;
    --color-indigo-dark: #4338ca;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-600: #4b5563;
    --color-gray-900: #111827;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.font-sans {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

@media (min-width: 768px) {
    .md\:flex {
        display: flex;
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md\:text-left {
        text-align: left;
    }
    .md\:flex-row {
        flex-direction: row;
    }
}

.hover\:text-gray-900:hover {
    color: #111827;
}

.hover\:bg-indigo-700:hover {
    background-color: #4338ca;
}