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

/* Tailwind Custom Colors */
:root {
    --turquoise-50: #ecfeff;
    --turquoise-100: #cffafe;
    --turquoise-200: #a5f3fc;
    --turquoise-300: #67e8f9;
    --turquoise-400: #22d3ee;
    --turquoise-500: #06b6d4;
    --turquoise-600: #0891b2;
    --turquoise-700: #0e7490;
    --turquoise-800: #155e75;
    --turquoise-900: #164e63;

    --sand-50: #fefce8;
    --sand-100: #fef9c3;
    --sand-200: #fef08a;
    --sand-300: #fde047;
    --sand-400: #facc15;
    --sand-500: #eab308;
    --sand-600: #ca8a04;
    --sand-700: #a16207;
    --sand-800: #854d0e;
    --sand-900: #713f12;
}

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

.font-serif {
    font-family: 'Playfair Display', serif;
}

.hero-gradient {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.55) 0%, rgba(8, 145, 178, 0.45) 100%);
}

.smooth-scroll {
    scroll-behavior: smooth;
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Mobile Menu Styles */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 60;
    padding: 2rem;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 55;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: all;
}

@media (max-width: 768px) {
    .container-mobile {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Turquoise color utilities */
.text-turquoise-100 { color: var(--turquoise-100); }
.text-turquoise-400 { color: var(--turquoise-400); }
.text-turquoise-500 { color: var(--turquoise-500); }
.text-turquoise-600 { color: var(--turquoise-600); }
.text-turquoise-700 { color: var(--turquoise-700); }

.bg-turquoise-50 { background-color: var(--turquoise-50); }
.bg-turquoise-100 { background-color: var(--turquoise-100); }
.bg-turquoise-500 { background-color: var(--turquoise-500); }
.bg-turquoise-600 { background-color: var(--turquoise-600); }

.hover\:text-turquoise-400:hover { color: var(--turquoise-400); }
.hover\:text-turquoise-600:hover { color: var(--turquoise-600); }
.hover\:bg-turquoise-600:hover { background-color: var(--turquoise-600); }
.hover\:bg-turquoise-700:hover { background-color: var(--turquoise-700); }

.from-turquoise-500 { --tw-gradient-from: var(--turquoise-500); }
.to-turquoise-600 { --tw-gradient-to: var(--turquoise-600); }
.hover\:from-turquoise-600:hover { --tw-gradient-from: var(--turquoise-600); }
.hover\:to-turquoise-700:hover { --tw-gradient-to: var(--turquoise-700); }

.ring-turquoise-500 { --tw-ring-color: var(--turquoise-500); }
.focus\:ring-turquoise-500:focus { --tw-ring-color: var(--turquoise-500); }

/* Sand color utilities */
.text-sand-500 { color: var(--sand-500); }

.bg-sand-400 { background-color: var(--sand-400); }
.bg-sand-500 { background-color: var(--sand-500); }

.hover\:bg-sand-500:hover { background-color: var(--sand-500); }