/* Custom Styles for Aramex Realty */

:root {
    --color-plum-900: #3b0764;
    --color-plum-700: #6b21a8;
    --color-plum-50: #faf5ff;
    --color-amber-400: #fbbf24;
}

body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Outfit', sans-serif;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom Tailwind Configuration for Plum & Amber */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .text-plum-900 { color: #3b0764; }
    .text-plum-700 { color: #6b21a8; }
    .bg-plum-900 { background-color: #3b0764; }
    .bg-plum-800 { background-color: #581c87; }
    .bg-plum-50 { background-color: #faf5ff; }
    .border-plum-900 { border-color: #3b0764; }
    .border-plum-700 { border-color: #6b21a8; }
    .border-plum-200 { border-color: #e9d5ff; }
    .text-amber-400 { color: #fbbf24; }
    .text-amber-600 { color: #d97706; }
    .bg-amber-400 { background-color: #fbbf24; }
    .bg-amber-50 { background-color: #fffbeb; }
}

/* Mobile menu transition */
#mobile-menu {
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Focus styles for accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}

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

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

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}