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

body {
    color: #2D312B; /* charcoal */
    font-family: 'Inter', sans-serif;
    background-color: #FAF7F2; /* cream */
    min-height: 100vh;
}

body::selection {
    background-color: rgba(148, 161, 142, 0.3); /* sage/30 */
}

/* Typography */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
}

/* Layout (index.html specific) */
nav, section, footer {
    position: relative;
    z-index: 10;
}

section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

/* Components */
.glass-card {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(148, 161, 142, 0.1); /* sage/10 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 16px;
}

.pill-button {
    border-radius: 9999px;
    padding: 0.875rem 2rem;
    transition: all 300ms;
    font-weight: 500;
    font-size: 0.875rem;
}

.sage-frame {
    background-color: #94A18E; /* sage */
    border-radius: 3rem;
    padding: 3rem;
    color: #FDFCFB; /* off-white */
}

@media (min-width: 1024px) {
    .sage-frame {
        padding: 5rem;
    }
}

/* Material Icons */
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}