:root {
    /* 70/20/10 rule: 70% base, 20% secondary, 10% accent */
    --color-base: #ffffff;      /* 70% - backgrounds, whitespace */
    --color-secondary: #6c757d; /* 20% - supporting text, borders */
    --color-primary: #A52A2A;   /* 10% - brown accent: headings, CTAs, highlights */

    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 165, 42, 42;
}

body {
    font-family: sans-serif;
}

.navbar .nav-link.active {
    color: var(--color-primary);
    font-weight: 600;
}

.brand-logo {
    width: 100%;
    max-width: 160px;
    height: auto;
}

/* --- Animated hamburger toggler (burger to X) --- */
.navbar-toggler {
    border: none !important;
    box-shadow: none !important;
    padding: 0.25rem 0.5rem;
}

.toggler-icon {
    width: 30px;
    height: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.3s ease-out;
    pointer-events: none;
}

.toggler-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: center;
}

.navbar-toggler:not(.collapsed) .toggler-icon span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.navbar-toggler:not(.collapsed) .toggler-icon span:nth-child(2) {
    transform: scale(0);
    opacity: 0;
}

.navbar-toggler:not(.collapsed) .toggler-icon span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

.navbar-toggler:hover .toggler-icon {
    transform: scale(1.1);
}