:root{
    --base-h: 0;
    --base-s: 0%;
    --base-l: 0%;
    --secondary-h: 0;
    --secondary-s: 0%;
    --secondary-l: 100%;
    --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l);
}

/* ===== Dynamic navbar: bg = Site Base Color, menu text = Site Secondary Color ===== */
.header,
.header.fixed-header {
    background: hsl(var(--base)) !important;
}
.header .header-wrapper .menu-wrapper ul.main-menu a,
.header.fixed-header .header-wrapper .menu-wrapper ul.main-menu a,
.dark .header .header-wrapper .menu-wrapper ul.main-menu a,
.dark .header.fixed-header .header-wrapper .menu-wrapper ul.main-menu a {
    color: hsl(var(--secondary)) !important;
}
.header .header-wrapper .menu-wrapper ul.main-menu a:hover,
.header .header-wrapper .menu-wrapper ul.main-menu a.active,
.header.fixed-header .header-wrapper .menu-wrapper ul.main-menu a:hover,
.header.fixed-header .header-wrapper .menu-wrapper ul.main-menu a.active,
.dark .header .header-wrapper .menu-wrapper ul.main-menu a:hover,
.dark .header .header-wrapper .menu-wrapper ul.main-menu a.active {
    color: #ffffff !important;
}
.header .header-wrapper .ham__menu,
.dark .header .header-wrapper .ham__menu {
    color: hsl(var(--secondary)) !important;
}

/* ===== Dropdown items: always readable on the menu background ===== */
.header .header-wrapper .menu-wrapper ul.main-menu .dropdown-menu a,
.header.fixed-header .header-wrapper .menu-wrapper ul.main-menu .dropdown-menu a {
    color: #1e293b !important;
}
.header .header-wrapper .menu-wrapper ul.main-menu .dropdown-menu a:hover,
.header .header-wrapper .menu-wrapper ul.main-menu .dropdown-menu a.active,
.header.fixed-header .header-wrapper .menu-wrapper ul.main-menu .dropdown-menu a:hover,
.header.fixed-header .header-wrapper .menu-wrapper ul.main-menu .dropdown-menu a.active {
    color: hsl(var(--base)) !important;
    background: hsl(var(--base) / .08) !important;
}
.dark .header .header-wrapper .menu-wrapper ul.main-menu .dropdown-menu a,
.dark .header.fixed-header .header-wrapper .menu-wrapper ul.main-menu .dropdown-menu a {
    color: #ffffff !important;
}
.dark .header .header-wrapper .menu-wrapper ul.main-menu .dropdown-menu a:hover,
.dark .header .header-wrapper .menu-wrapper ul.main-menu .dropdown-menu a.active {
    color: #ffffff !important;
    background: hsl(var(--white) / .1) !important;
}

/* ===== Footer text = Site Secondary Color ===== */
.footer-area .footer-item__title,
.footer-area .footer-menu__link,
.footer-area .bottom-footer-text,
.footer-area .bottom-footer-text p,
.footer-area .bottom-footer-menu ul li a,
.footer-area .bottom-footer-menu ul li::after,
.footer-area .footer-contact-menu__item,
.footer-area .footer-contact-menu__item p,
.dark .footer-area .footer-item__title,
.dark .footer-area .footer-menu__link,
.dark .footer-area .bottom-footer-text,
.dark .footer-area .bottom-footer-text p {
    color: hsl(var(--secondary)) !important;
}
.footer-area .footer-menu__link:hover,
.footer-area .bottom-footer-menu ul li a:hover {
    color: #ffffff !important;
}
.footer-area .bottom-footer-menu ul li::after,
.dark .footer-area .bottom-footer-menu ul li::after {
    background: hsl(var(--secondary)) !important;
}

/* ===== Navbar Login/Dashboard button: secondary outline (visible on base bg) ===== */
.header .header-wrapper .menu-right-wrapper .btn--base,
.dark .header .header-wrapper .menu-right-wrapper .btn--base {
    background: transparent !important;
    border: 1.5px solid hsl(var(--secondary)) !important;
    color: hsl(var(--secondary)) !important;
}
.header .header-wrapper .menu-right-wrapper .btn--base:hover,
.header .header-wrapper .menu-right-wrapper .btn--base:focus,
.dark .header .header-wrapper .menu-right-wrapper .btn--base:hover,
.dark .header .header-wrapper .menu-right-wrapper .btn--base:focus {
    background: hsl(var(--secondary)) !important;
    border-color: hsl(var(--secondary)) !important;
    color: hsl(var(--base)) !important;
}