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

/* Base Styles */
body {
    font-family: 'Karla', sans-serif;
    color: #450A0A;
    background-color: #FEF2F2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display SC', serif;
    font-weight: 700;
}

/* Utilities */
.text-primary-brand { color: #DC2626; }
.bg-primary-brand { background-color: #DC2626; }
.bg-primary-hover:hover { background-color: #B91C1C; }

.text-secondary-brand { color: #F87171; }
.bg-secondary-brand { background-color: #F87171; }

.text-cta { color: #CA8A04; }
.bg-cta { background-color: #CA8A04; }
.bg-cta-hover:hover { background-color: #A16207; }

.text-body { color: #450A0A; }
.bg-page { background-color: #FEF2F2; }

/* Interactive Elements */
.interactive {
    cursor: pointer;
    transition: all 200ms ease-in-out;
}

/* Scroll snap for sections */
.scroll-snap-y {
    scroll-snap-type: y mandatory;
}
.snap-section {
    scroll-snap-align: start;
}

/* Disable pull to refresh on mobile */
.no-pull-refresh {
    overscroll-behavior-y: contain;
}