/* Custom Font Stack & Base Styles */
:root {
    --floor-oak: #A68966;
    --floor-dark: #4A3F35;
    --floor-chalk: #F5F2ED;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Typography refinement */
h1, h2, h3, h4 {
    letter-spacing: -0.02em;
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--floor-oak);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Active section highlighting */
.nav-link.active {
    color: var(--floor-oak);
    font-weight: 700;
}

/* Floor Plan Interaction */
.zone-btn {
    transition: all 0.2s ease;
}

.zone-btn:hover, .zone-btn:focus {
    stroke: var(--floor-oak);
    fill: rgba(166, 137, 102, 0.1);
    outline: none;
}

.zone-btn.selected {
    stroke: var(--floor-dark);
    fill: rgba(166, 137, 102, 0.3);
    stroke-width: 6px;
}

/* Animations */
.path-animation {
    stroke-dasharray: 10, 10;
    animation: dash 20s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: -200;
    }
}

@media (prefers-reduced-motion: reduce) {
    .path-animation {
        animation: none;
        stroke-dasharray: none;
    }
    html {
        scroll-behavior: auto;
    }
}

/* Custom focus rings */
:focus-visible {
    outline: 2px solid var(--floor-oak);
    outline-offset: 4px;
}

/* Accessibility: Hide elements but keep for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}