/* Custom Styles for Restaurante Los Primos */

:root {
    --color-coral-50: #fff1f2;
    --color-coral-100: #ffe4e6;
    --color-coral-200: #fecdd3;
    --color-coral-300: #fda4af;
    --color-coral-400: #fb7185;
    --color-coral-500: #f43f5e;
    --color-coral-600: #e11d48;
    --color-coral-700: #be123c;
    --color-coral-800: #9f1239;
    --color-coral-900: #881337;
}

/* Tailwind config extension via arbitrary values in HTML, but we can add custom classes here */
.text-coral-50 { color: var(--color-coral-50); }
.text-coral-100 { color: var(--color-coral-100); }
.text-coral-200 { color: var(--color-coral-200); }
.text-coral-300 { color: var(--color-coral-300); }
.text-coral-400 { color: var(--color-coral-400); }
.text-coral-500 { color: var(--color-coral-500); }
.text-coral-600 { color: var(--color-coral-600); }
.text-coral-700 { color: var(--color-coral-700); }
.text-coral-800 { color: var(--color-coral-800); }
.text-coral-900 { color: var(--color-coral-900); }

.bg-coral-50 { background-color: var(--color-coral-50); }
.bg-coral-100 { background-color: var(--color-coral-100); }
.bg-coral-200 { background-color: var(--color-coral-200); }
.bg-coral-300 { background-color: var(--color-coral-300); }
.bg-coral-400 { background-color: var(--color-coral-400); }
.bg-coral-500 { background-color: var(--color-coral-500); }
.bg-coral-600 { background-color: var(--color-coral-600); }
.bg-coral-700 { background-color: var(--color-coral-700); }
.bg-coral-800 { background-color: var(--color-coral-800); }
.bg-coral-900 { background-color: var(--color-coral-900); }

.border-coral-500 { border-color: var(--color-coral-500); }
.border-coral-600 { border-color: var(--color-coral-600); }

.font-display {
    font-family: 'Oswald', sans-serif;
}

html {
    scroll-behavior: smooth;
}

/* Mobile menu transitions */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Accessibility */
@media (prefers-reduced-motion: no-preference) {
    .transition-all {
        transition-duration: 0.3s;
    }
}