/* Base styles & custom utilities */
:root {
    --color-terracotta-50: #fdf2ee;
    --color-terracotta-600: #c44224;
    --color-terracotta-700: #a8341e;
    --color-sand-50: #fdfbf7;
    --color-sand-100: #f9f4e8;
    --color-sand-200: #f3e8cc;
    --color-sand-700: #a87230;
    --color-sand-800: #885829;
    --color-sand-900: #6e4623;
    --color-terracotta-950: #4a160e;
}

* { box-sizing: border-box; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fdfbf7;
    color: #6e4623;
}

/* Focus styles */
a:focus-visible, button:focus-visible {
    outline: 2px solid #d45533;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Smooth scroll offset for fixed nav */
section[id] {
    scroll-margin-top: 80px;
}

/* Mobile menu animation */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
    opacity: 0;
}

.mobile-menu.open {
    max-height: 400px;
    opacity: 1;
}

/* Mobile toggle animation */
.mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}
.mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
    width: 1.5rem;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f9f4e8; }
::-webkit-scrollbar-thumb { background: #d4c4a0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a89070; }

/* Selection color */
::selection {
    background: #d45533;
    color: #fdfbf7;
}

/* Image loading placeholder */
img {
    background-color: #f3e8cc;
}