/* bootstrap-evf-nav.css */

:root,
[data-bs-theme="light"] {
    --evf-nav-header-bg: var(--evf-creammap); 
    --evf-nav-footer-bg: var(--evf-creammap); 

    --evf-nav-border: rgba(var(--evf-bluecoat-base-rgb),0.1);

    --evf-nav-link-color: var(--evf-bluecoat-base); 
    --evf-nav-link-hover-bg: rgba(var(--evf-bluecoat-base-rgb),0.1); 
    --evf-nav-link-active-bg: rgba(var(--evf-bluecoat-base-rgb),0.1); 
    --evf-nav-icon-color-active: var(--evf-bluecoat-base);

    --evf-nav-icon-color: var(--evf-bluecoat-base);

    --evf-nav-toggler-bg: var(--evf-creammap);
    --evf-nav-toggler-icon-color: var(--evf-bluecoat-base);
    --evf-nav-toggler-bg-checked: var(--evf-creammap);
    --evf-nav-toggler-icon-color-checked: var(--evf-bluecoat-base);

    --evf-nav-focus-ring: var(--evf-bluecoat-base);

    --evf-nav-toggler-border: rgba(var(--evf-bluecoat-base-rgb),0.5);
}

/* Keep this only if you later want different dark-mode values */
[data-bs-theme="dark"] {
    --evf-nav-header-bg: var(--evf-tarink);
    --evf-nav-footer-bg: var(--evf-tarink);
    --evf-nav-border: rgba(var(--evf-icesail-base-rgb),0.1);
    --evf-nav-link-color: var(--evf-icesail-base);
    --evf-nav-link-hover-bg: rgba(var(--evf-icesail-base-rgb),0.1);
    --evf-nav-link-active-bg: rgba(var(--evf-icesail-base-rgb),0.1);
    --evf-nav-icon-color-active: var(--evf-icesail-base);
    --evf-nav-icon-color: var(--evf-icesail-base);
    --evf-nav-toggler-bg: var(--evf-tarink);
    --evf-nav-toggler-icon-color: var(--evf-icesail-base);
    --evf-nav-toggler-bg-checked: var(--evf-tarink);
    --evf-nav-toggler-icon-color-checked: var(--evf-icesail-base);
    --evf-nav-focus-ring: var(--evf-icesail-base);

    --evf-nav-toggler-border: rgba(var(--evf-icesail-base-rgb),0.5);
}



/*:root,
[data-bs-theme="light"] {
    --evf-nav-header-bg: #0B1220;*/ /* deep navy */
    /*--evf-nav-footer-bg: #111827;*/ /* dark slate */

    /*--evf-nav-border: #FF7A00;*/ /* vivid orange */

    /*--evf-nav-link-color: #00E5FF;*/ /* bright cyan */
    /*--evf-nav-link-hover-bg: #2E1065;*/ /* strong purple */
    /*--evf-nav-link-active-bg: #2E1065;*/ /* same as hover (required by NavMenu) */

    /*--evf-nav-icon-color: #B7FF4A;*/ /* neon lime */
    /*--evf-nav-icon-color-active: #FF2D95;*/ /* hot pink */

    /*--evf-nav-toggler-bg: #FFD400;*/ /* bright yellow */
    /*--evf-nav-toggler-icon-color: #0B1220;*/ /* dark (contrast on yellow) */

    /*--evf-nav-toggler-bg-checked: #00C853;*/ /* vivid green */
    /*--evf-nav-toggler-icon-color-checked: #081018;*/ /* near-black */

    /*--evf-nav-focus-ring: #FFFFFF;*/ /* white */
/*}*/

/* Keep this only if you later want different dark-mode values */
/*[data-bs-theme="dark"] {
    --evf-nav-header-bg: #00FF00;*/ /* deep navy */
    /*--evf-nav-footer-bg: #FF0000;*/ /* dark slate */

    /*--evf-nav-border: #FF7A00;*/ /* vivid orange */

    /*--evf-nav-link-color: #00E5FF;*/ /* bright cyan */
    /*--evf-nav-link-hover-bg: #2E1065;*/ /* strong purple */
    /*--evf-nav-link-active-bg: #2E1065;*/ /* same as hover (required by NavMenu) */

    /*--evf-nav-icon-color: #B7FF4A;*/ /* neon lime */
    /*--evf-nav-icon-color-active: #FF2D95;*/ /* hot pink */

    /*--evf-nav-toggler-bg: #FFD400;*/ /* bright yellow */
    /*--evf-nav-toggler-icon-color: #0B1220;*/ /* dark (contrast on yellow) */

    /*--evf-nav-toggler-bg-checked: #00C853;*/ /* vivid green */
    /*--evf-nav-toggler-icon-color-checked: #081018;*/ /* near-black */

    /*--evf-nav-focus-ring: #FFFFFF;*/ /* white */
/*}*/