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

:root {
    --cream: #f4f0e3;
    --warm-white: #FEFCF7;
    --soft-gray: #8B8B8B;
    --dark-gray: #2C2C2C;
    --accent-brown: #A0937D;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--cream);
    color: var(--dark-gray);
    font-weight: 300;
}

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

.btn-primary {
    background-color: var(--dark-gray);
    color: var(--warm-white);
    border: 1px solid var(--dark-gray);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--accent-brown);
    border-color: var(--accent-brown);
}

.btn-option {
    background-color: var(--warm-white);
    color: var(--dark-gray);
    border: 1px solid var(--accent-brown);
    transition: all 0.3s ease;
}

.btn-option:hover {
    background-color: var(--accent-brown);
    color: var(--warm-white);
    transform: translateY(-2px);
}

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

.text-secondary {
    color: var(--soft-gray);
}

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

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

.border-accent {
    border-color: var(--accent-brown);
}

.progress-bar {
    background-color: var(--accent-brown);
    transition: width 0.5s ease;
}

.slide-enter {
    transform: translateX(100%);
    opacity: 0;
}

.slide-active {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.slide-exit {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.hero-bg {
    background-color: var(--warm-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23CFC4A6' stroke-width='0.5'%3E%3Cpath d='M0 20 L20 0'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 40px 40px;
  }
  

.custom-list {
list-style: none; /* remove default bullets */
padding: 0;
margin: 0;
}

.custom-list li::before {
content: "➜ "; /* arrow character */
color: var(--accent-brown); /* match your site theme */
font-weight: bold;
margin-right: 0.5rem;
}