:root {
        --color-primary: #003758;
        --color-primary-light: #004269;
        --color-primary-dark: #002c46;
        --text-color: #FAFAFA;
        --text-light: #FAFAFA;
        --text-dark: #1A1A1A;
        --text-filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(167deg) brightness(108%) contrast(101%);
        --inverse-primary: #003758;
        --inverse-primary-light: #004269;
        --inverse-primary-dark: #002c46;
        --inverse-text: #FAFAFA;
    }
    
    /* ----- Plone Overrides ----- */
    a {
        color: var(--color-primary);
    }
    a:hover,
    a:focus {
        color: var(--color-primary-dark);
    }
    .plone-nav li a:hover, .plone-nav li a:focus {
        background-color: var(--inverse-primary-light); 
    }
    .plone-navbar-nav .current>a,
    .plone-navbar-nav .selected>a,
    .plone-navbar-nav .current>a:hover,
    .plone-navbar-nav .selected>a:hover,
    .plone-navbar-nav .current>a:focus,
    .plone-navbar-nav .selected>a:focus { 
        background-color: var(--inverse-primary-light);
        color: var(--ecode-theme-text);
    }
    #edit-zone a:hover,
    #edit-zone a:focus { 
        background: var(--color-primary);
        color: var(--text-color);
    }
    .plone-toolbar-expanded #edit-zone li:not(.active) a:hover>span {
        background: var(--color-primary); 
    }
    #edit-zone nav>ul a.label-state-external>span:before,
    #edit-zone nav>ul a.label-state-published>span:before {
        color: var(--color-primary);
    }
    .plone-toolbar-expanded #edit-zone li a.label-state-published:hover>span:first-child:before {
        color: var(--text-color);
    }
    .plone-toolbar-expanded #edit-zone li a.label-state-published:hover>span,
    .plone-toolbar-expanded #edit-zone li li a.label-state-external:hover>span {
        background: var(--color-primary);
        color: var(--text-color);
    }
    #edit-zone nav>ul>li.active>a {
        background: var(--color-primary);
        color: var(--text-color);
    }
    #edit-zone nav>ul>li.active>a span:before {
        color: var(--text-color) !important;
    }
    #edit-zone nav>ul ul a:hover {
        background: var(--color-primary);
        color: var(--text-primary);
    }
    #edit-zone nav>ul ul li.plonetoolbar-workfow-transition>:before,
    #edit-zone nav>ul ul li.plonetoolbar-content-action>:before,
    #edit-zone nav>ul ul li.plonetoolbar-display-view>:before,
    #edit-zone nav>ul ul li.plonetoolbar-portlet-manager>:before,
    #edit-zone nav>ul ul li.user-action>:before {
        color: var(--color-primary);
    }
    #edit-zone nav>ul ul li.plonetoolbar-workfow-transition>a:hover:before,
    #edit-zone nav>ul ul li.plonetoolbar-content-action>a:hover:before,
    #edit-zone nav>ul ul li.plonetoolbar-display-view>a:hover:before,
    #edit-zone nav>ul ul li.plonetoolbar-portlet-manager>a:hover:before,
    #edit-zone nav>ul ul li.user-action>a:hover:before {
        color: var(--color-primary-light);
    }
    #edit-zone .plone-toolbar-logo:hover {
        background: var(--color-primary); 
    }
    #edit-zone .plone-toolbar-logo:hover:after {
        border-top: 4px solid var(--color-primary); 
    }
    #edit-zone .plone-toolbar-logo {
        background: var(--color-primary-dark); 
    }
    #edit-zone .plone-toolbar-logo:after {
        border-top: 4px solid var(--color-primary-dark);
    }
    #content-header {
        background-color: var(--inverse-primary);
    }
    .membertools-bottom {
        background: var(--text-color);
    }
    .membertools-bottom a {
        color: var(--color-primary);
    }
    .plone-navbar-toggle {
        background: var(--color-primary);
        color: var(--text-color);
        border: 1px solid var(--color-primary-dark);
    }
    .plone-navbar-toggle:hover {
        background: var(--color-primary);
        color: var(--text-color);
        border-color: var(--color-primary-dark);
    }
    .context {
        background-color: var(--color-primary);
        border-color: var(--color-primary-dark);
        letter-spacing: 0.08em;
        font-weight: 500;
        font-size: 12px;
        width: 160px;
    }
    .context:hover, .context:focus, .context:active, .context.active, .open>.dropdown-toggle.context {
        background-color: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
    }

    /* ----- Custom CSS ----- */
    .color-btn {
        background: var(--color-primary);
        border: 1px solid var(--color-primary-dark);
    }
    .color-btn:hover {
        background: var(--color-primary-light);
    }
    #portal-anontools li:hover a {
        background-color: var(--color-primary);
    }