/* Custom CSS Variables & Reset */
:root {
    --color-plum-50: #fdf4f6;
    --color-plum-100: #fce8ed;
    --color-plum-200: #f5d0d9;
    --color-plum-300: #eab0ba;
    --color-plum-400: #d98296;
    --color-plum-500: #c55d76;
    --color-plum-600: #b54460;
    --color-plum-700: #96324f;
    --color-plum-800: #7d2d46;
    --color-plum-900: #682a3d;
    
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Manrope', sans-serif;
}

/* Tailwind Config Extension (for custom colors) */
@layer utilities {
    .text-plum-700 { color: var(--color-plum-700); }
    .text-plum-600 { color: var(--color-plum-600); }
    .text-plum-800 { color: var(--color-plum-800); }
    .bg-plum-700 { background-color: var(--color-plum-700); }
    .bg-plum-800 { background-color: var(--color-plum-800); }
    .bg-plum-900 { background-color: var(--color-plum-900); }
    .bg-plum-200 { background-color: var(--color-plum-200); }
    .bg-plum-50 { background-color: var(--color-plum-50); }
    .border-plum-200 { border-color: var(--color-plum-200); }
    .border-plum-700 { border-color: var(--color-plum-700); }
    .text-amber-700 { color: #b45309; }
    .text-amber-500 { color: var(--color-amber-500); }
    .text-amber-400 { color: var(--color-amber-400); }
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Overrides */
h1, h2, h3, h4 {
    font-family: var(--font-serif);
}

/* Navbar Glass Effect */
#navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll Reveal Utility */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Menu Transition */
#mobile-menu {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#mobile-menu.hidden {
    display: none;
}