/* Custom Properties */
:root {
    --color-charcoal: #2A2F35;
    --color-stone: #F5F4F0;
    --color-copper: #B87333;
}

html {
    scroll-behavior: smooth;
}

/* Typography Utilities */
.font-serif {
    font-family: 'Playfair Display', serif;
}

.font-sans {
    font-family: 'Source Sans Pro', sans-serif;
}

/* Color Utilities */
.bg-stone { background-color: var(--color-stone); }
.bg-charcoal { background-color: var(--color-charcoal); }
.bg-copper { background-color: var(--color-copper); }

.text-charcoal { color: var(--color-charcoal); }
.text-copper { color: var(--color-copper); }

.border-charcoal { border-color: var(--color-charcoal); }
.border-copper { border-color: var(--color-copper); }

.hover\:bg-copper:hover { background-color: var(--color-copper); }
.hover\:text-charcoal:hover { color: var(--color-charcoal); }
.focus\:border-copper:focus { border-color: var(--color-copper); }
.focus\:ring-copper:focus { --tw-ring-color: var(--color-copper); }

/* Cinematic Section */
.cinematic-section {
    min-height: 85vh;
    background-image: url('/img/image_1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll; /* Safer for mobile than fixed */
}

/* Subtle Animation */
@keyframes heroFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-fade-in {
        animation: heroFadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }
}