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

:root {
    --text-white: #ffffff;
    --text-dim: #ffffff;
    --bg-dark: #000000;
    --text-main: #333333;
    --accent-white: #f5f5f7;
    --font-main: 'Outfit', 'Inter', sans-serif;
    --font-heading: 'Adelora', serif;
    
    /* Global Primary/Secondary overrides */
    --primary-color: #08aabe;
    --secondary-color: #067a8a;
}

/* Apply primary color to buttons and links if needed */
.navbar.scrolled .nav-menu a,
.navbar.scrolled .btn-waitlist-nav,
.nav-cta a,
.btn-waitlist-main,
.experience-icon,
.services-title,
.cta-heading {
    /* You may need to manually update some specific CSS selectors here 
       if they don't already use CSS variables. */
}

/* Sticky Navbar Link Colors */
.navbar.scrolled .nav-menu a {
    color: var(--primary-color) !important;
    background: none !important;
}
.navbar.scrolled .nav-menu a.active {
    color: var(--secondary-color) !important;
}

/* Button & CTA Overrides */
.navbar.scrolled .btn-waitlist-nav,
.nav-cta a,
.btn-waitlist-main,
.btn-waitlist-nav {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-white) !important;
}

.experience-icon,
.services-title,
.cta-heading,
.intro-heading,
.intro-paragraph {
    color: var(--secondary-color) !important;
}

.arrow-circle {
    background: var(--text-white) !important;
    color: var(--primary-color) !important;
}

.navbar.scrolled .btn-waitlist-nav .arrow-circle {
    background-color: var(--text-white) !important;
    color: var(--primary-color) !important;
}