/* Custom Font Imports - processed via Google Fonts Link in HTML, but here for reference */
:root {
    --color-primary: #E11D48; /* Rose 600 */
    --color-primary-hover: #BE123C; /* Rose 700 */
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
}

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

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

/* Custom Utilities */
.text-serif {
    font-family: var(--font-serif);
}

.text-sans {
    font-family: var(--font-sans);
}

.bg-primary {
    background-color: var(--color-primary);
}

.text-primary {
    color: var(--color-primary);
}

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

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Animation Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }

/* Custom Component Classes */
.btn-pill {
    border-radius: 9999px;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}