/* ---------------------------------------------------------
   1. DESIGN SYSTEM VARIABLES
   --------------------------------------------------------- */
:root {
    --charcoal: #1A1A1A;
    --light-brown: #D2B48C;
}

/* ---------------------------------------------------------
   2. GLOBAL TYPOGRAPHY & FONT MAPPINGS
   --------------------------------------------------------- */
.font-serif {
    font-family: 'Playfair Display', serif;
}

.font-sans {
    font-family: 'Inter', sans-serif;
}

/* ---------------------------------------------------------
   3. BRAND COLOR UTILITIES
   --------------------------------------------------------- */
.text-charcoal {
    color: var(--charcoal);
}

.text-light-brown {
    color: var(--light-brown);
}

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

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

/* ---------------------------------------------------------
   4. ANIMATIONS & FILTERS
   --------------------------------------------------------- */
.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.grayscale {
    filter: grayscale(100%);
}

/* ---------------------------------------------------------
   5. PAGE-SPECIFIC CONTENT STYLING
   --------------------------------------------------------- */
/* Privacy Policy text readability */
.privacy-content p {
    line-height: 1.8;
    color: #4B5563; /* Tailwind gray-600 */
}

/* ---------------------------------------------------------
   6. INTERACTIVE BEHAVIORS
   --------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}