/* bootstrap-evf-button.css */

/* ==========================================================
   EVF button variant overrides for Bootstrap 5.3+
   Put this AFTER bootstrap.css
   ========================================================== */

/* Optional shared helpers */
:root,
[data-bs-theme="light"] {
    --evf-btn-fg-on-dark: var(--evf-creammap);
    --evf-btn-fg-on-light: var(--evf-bluecoat-base);
    --evf-btn-shadow-active: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

    /* ---------- LIGHT THEME: solid buttons ---------- */
    :root .btn-primary,
    [data-bs-theme="light"] .btn-primary {
        --bs-btn-color: var(--evf-btn-fg-on-dark);
        --bs-btn-bg: var(--evf-bluecoat-base);
        --bs-btn-border-color: var(--evf-bluecoat-base);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-bluecoat-base) 88%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-bluecoat-base) 88%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-base-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-base) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-base) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-dark);
        --bs-btn-disabled-bg: var(--evf-bluecoat-base);
        --bs-btn-disabled-border-color: var(--evf-bluecoat-base);
    }

    :root .btn-secondary,
    [data-bs-theme="light"] .btn-secondary {
        --bs-btn-color: var(--evf-btn-fg-on-dark);
        --bs-btn-bg: var(--evf-bluecoat-base-40);
        --bs-btn-border-color: var(--evf-bluecoat-base-40);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-bluecoat-base-40) 88%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-bluecoat-base-40) 88%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-base-40-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-base-40) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-base-40) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-dark);
        --bs-btn-disabled-bg: var(--evf-bluecoat-base-40);
        --bs-btn-disabled-border-color: var(--evf-bluecoat-base-40);
    }

    :root .btn-success,
    [data-bs-theme="light"] .btn-success {
        --bs-btn-color: var(--evf-btn-fg-on-dark);
        --bs-btn-bg: var(--evf-bluecoat-green);
        --bs-btn-border-color: var(--evf-bluecoat-green);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-bluecoat-green) 88%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-bluecoat-green) 88%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-green-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-green) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-green) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-dark);
        --bs-btn-disabled-bg: var(--evf-bluecoat-green);
        --bs-btn-disabled-border-color: var(--evf-bluecoat-green);
    }

    :root .btn-info,
    [data-bs-theme="light"] .btn-info {
        --bs-btn-color: var(--evf-btn-fg-on-dark);
        --bs-btn-bg: var(--evf-bluecoat-teal);
        --bs-btn-border-color: var(--evf-bluecoat-teal);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-bluecoat-teal) 88%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-bluecoat-teal) 88%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-teal-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-teal) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-teal) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-dark);
        --bs-btn-disabled-bg: var(--evf-bluecoat-teal);
        --bs-btn-disabled-border-color: var(--evf-bluecoat-teal);
    }

    :root .btn-warning,
    [data-bs-theme="light"] .btn-warning {
        --bs-btn-color: var(--evf-btn-fg-on-dark);
        --bs-btn-bg: var(--evf-bluecoat-yellow);
        --bs-btn-border-color: var(--evf-bluecoat-yellow);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-bluecoat-yellow) 88%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-bluecoat-yellow) 88%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-yellow-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-yellow) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-yellow) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-dark);
        --bs-btn-disabled-bg: var(--evf-bluecoat-yellow);
        --bs-btn-disabled-border-color: var(--evf-bluecoat-yellow);
    }

    :root .btn-danger,
    [data-bs-theme="light"] .btn-danger {
        --bs-btn-color: var(--evf-btn-fg-on-dark);
        --bs-btn-bg: var(--evf-bluecoat-red);
        --bs-btn-border-color: var(--evf-bluecoat-red);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-bluecoat-red) 88%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-bluecoat-red) 88%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-red-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-red) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-red) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-dark);
        --bs-btn-disabled-bg: var(--evf-bluecoat-red);
        --bs-btn-disabled-border-color: var(--evf-bluecoat-red);
    }

    :root .btn-light,
    [data-bs-theme="light"] .btn-light {
        --bs-btn-color: var(--evf-btn-fg-on-light);
        --bs-btn-bg: var(--evf-creammap);
        --bs-btn-border-color: var(--evf-bluecoat-base-70);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-creammap) 92%, var(--evf-bluecoat-base));
        --bs-btn-hover-border-color: var(--evf-bluecoat-base-60);
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-base-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-creammap) 85%, var(--evf-bluecoat-base));
        --bs-btn-active-border-color: var(--evf-bluecoat-base-50);
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-light);
        --bs-btn-disabled-bg: var(--evf-creammap);
        --bs-btn-disabled-border-color: var(--evf-bluecoat-base-70);
    }

    :root .btn-dark,
    [data-bs-theme="light"] .btn-dark {
        --bs-btn-color: var(--evf-icesail-base);
        --bs-btn-bg: var(--evf-tarink);
        --bs-btn-border-color: var(--evf-tarink);
        --bs-btn-hover-color: var(--evf-icesail-base);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-tarink) 92%, var(--evf-icesail-base));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-tarink) 92%, var(--evf-icesail-base));
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-base-rgb);
        --bs-btn-active-color: var(--evf-icesail-base);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-tarink) 85%, var(--evf-icesail-base));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-tarink) 85%, var(--evf-icesail-base));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-icesail-base);
        --bs-btn-disabled-bg: var(--evf-tarink);
        --bs-btn-disabled-border-color: var(--evf-tarink);
    }

    /* ---------- LIGHT THEME: outline buttons ---------- */
    :root .btn-outline-primary,
    [data-bs-theme="light"] .btn-outline-primary {
        --bs-btn-color: var(--evf-bluecoat-base);
        --bs-btn-border-color: var(--evf-bluecoat-base);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: var(--evf-bluecoat-base);
        --bs-btn-hover-border-color: var(--evf-bluecoat-base);
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-base-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-base) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-base) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-bluecoat-base);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-bluecoat-base);
    }

    :root .btn-outline-secondary,
    [data-bs-theme="light"] .btn-outline-secondary {
        --bs-btn-color: var(--evf-bluecoat-base-40);
        --bs-btn-border-color: var(--evf-bluecoat-base-40);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: var(--evf-bluecoat-base-40);
        --bs-btn-hover-border-color: var(--evf-bluecoat-base-40);
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-base-40-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-base-40) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-base-40) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-bluecoat-base-40);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-bluecoat-base-40);
    }

    :root .btn-outline-success,
    [data-bs-theme="light"] .btn-outline-success {
        --bs-btn-color: var(--evf-bluecoat-green);
        --bs-btn-border-color: var(--evf-bluecoat-green);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: var(--evf-bluecoat-green);
        --bs-btn-hover-border-color: var(--evf-bluecoat-green);
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-green-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-green) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-green) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-bluecoat-green);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-bluecoat-green);
    }

    :root .btn-outline-info,
    [data-bs-theme="light"] .btn-outline-info {
        --bs-btn-color: var(--evf-bluecoat-teal);
        --bs-btn-border-color: var(--evf-bluecoat-teal);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: var(--evf-bluecoat-teal);
        --bs-btn-hover-border-color: var(--evf-bluecoat-teal);
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-teal-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-teal) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-teal) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-bluecoat-teal);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-bluecoat-teal);
    }

    :root .btn-outline-warning,
    [data-bs-theme="light"] .btn-outline-warning {
        --bs-btn-color: var(--evf-bluecoat-yellow);
        --bs-btn-border-color: var(--evf-bluecoat-yellow);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: var(--evf-bluecoat-yellow);
        --bs-btn-hover-border-color: var(--evf-bluecoat-yellow);
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-yellow-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-yellow) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-yellow) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-bluecoat-yellow);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-bluecoat-yellow);
    }

    :root .btn-outline-danger,
    [data-bs-theme="light"] .btn-outline-danger {
        --bs-btn-color: var(--evf-bluecoat-red);
        --bs-btn-border-color: var(--evf-bluecoat-red);
        --bs-btn-hover-color: var(--evf-btn-fg-on-dark);
        --bs-btn-hover-bg: var(--evf-bluecoat-red);
        --bs-btn-hover-border-color: var(--evf-bluecoat-red);
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-red-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-dark);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-bluecoat-red) 78%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-bluecoat-red) 78%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-bluecoat-red);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-bluecoat-red);
    }

    :root .btn-outline-light,
    [data-bs-theme="light"] .btn-outline-light {
        --bs-btn-color: var(--evf-bluecoat-base);
        --bs-btn-border-color: var(--evf-bluecoat-base-70);
        --bs-btn-hover-color: var(--evf-bluecoat-base);
        --bs-btn-hover-bg: var(--evf-creammap);
        --bs-btn-hover-border-color: var(--evf-bluecoat-base-60);
        --bs-btn-focus-shadow-rgb: var(--evf-bluecoat-base-rgb);
        --bs-btn-active-color: var(--evf-bluecoat-base);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-creammap) 85%, var(--evf-bluecoat-base));
        --bs-btn-active-border-color: var(--evf-bluecoat-base-50);
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-bluecoat-base);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-bluecoat-base-70);
    }

    :root .btn-outline-dark,
    [data-bs-theme="light"] .btn-outline-dark {
        --bs-btn-color: var(--evf-tarink);
        --bs-btn-border-color: var(--evf-tarink);
        --bs-btn-hover-color: var(--evf-icesail-base);
        --bs-btn-hover-bg: var(--evf-tarink);
        --bs-btn-hover-border-color: var(--evf-tarink);
        --bs-btn-focus-shadow-rgb: var(--evf-tarink-rgb);
        --bs-btn-active-color: var(--evf-icesail-base);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-tarink) 85%, var(--evf-icesail-base));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-tarink) 85%, var(--evf-icesail-base));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-tarink);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-tarink);
    }

    /* ---------- LIGHT THEME: link button ---------- */
    :root .btn-link,
    [data-bs-theme="light"] .btn-link {
        --bs-btn-color: var(--bs-link-color);
        --bs-btn-hover-color: var(--bs-link-hover-color);
        --bs-btn-active-color: var(--bs-link-hover-color);
        --bs-btn-disabled-color: color-mix(in srgb, var(--bs-link-color) 45%, transparent);
    }

/* ==========================================================
   DARK THEME
   ========================================================== */

[data-bs-theme="dark"] {
    --evf-btn-fg-on-dark: var(--evf-icesail-base);
    --evf-btn-fg-on-light: var(--evf-tarink);
    --evf-btn-shadow-active: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

    /* ---------- DARK THEME: solid buttons ---------- */
    [data-bs-theme="dark"] .btn-primary {
        --bs-btn-color: var(--evf-btn-fg-on-light); /* tarink */
        --bs-btn-bg: var(--evf-icesail-base);
        --bs-btn-border-color: var(--evf-icesail-base);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-icesail-base) 92%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-icesail-base) 92%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-base-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-base) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-base) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-light);
        --bs-btn-disabled-bg: var(--evf-icesail-base);
        --bs-btn-disabled-border-color: var(--evf-icesail-base);
    }

    [data-bs-theme="dark"] .btn-secondary {
        --bs-btn-color: var(--evf-btn-fg-on-light);
        --bs-btn-bg: var(--evf-icesail-base-60);
        --bs-btn-border-color: var(--evf-icesail-base-60);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-icesail-base-60) 92%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-icesail-base-60) 92%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-base-60-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-base-60) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-base-60) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-light);
        --bs-btn-disabled-bg: var(--evf-icesail-base-60);
        --bs-btn-disabled-border-color: var(--evf-icesail-base-60);
    }

    [data-bs-theme="dark"] .btn-success {
        --bs-btn-color: var(--evf-btn-fg-on-light);
        --bs-btn-bg: var(--evf-icesail-green);
        --bs-btn-border-color: var(--evf-icesail-green);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-icesail-green) 92%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-icesail-green) 92%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-green-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-green) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-green) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-light);
        --bs-btn-disabled-bg: var(--evf-icesail-green);
        --bs-btn-disabled-border-color: var(--evf-icesail-green);
    }

    [data-bs-theme="dark"] .btn-info {
        --bs-btn-color: var(--evf-btn-fg-on-light);
        --bs-btn-bg: var(--evf-icesail-teal);
        --bs-btn-border-color: var(--evf-icesail-teal);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-icesail-teal) 92%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-icesail-teal) 92%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-teal-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-teal) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-teal) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-light);
        --bs-btn-disabled-bg: var(--evf-icesail-teal);
        --bs-btn-disabled-border-color: var(--evf-icesail-teal);
    }

    [data-bs-theme="dark"] .btn-warning {
        --bs-btn-color: var(--evf-btn-fg-on-light);
        --bs-btn-bg: var(--evf-icesail-yellow);
        --bs-btn-border-color: var(--evf-icesail-yellow);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-icesail-yellow) 92%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-icesail-yellow) 92%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-yellow-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-yellow) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-yellow) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-light);
        --bs-btn-disabled-bg: var(--evf-icesail-yellow);
        --bs-btn-disabled-border-color: var(--evf-icesail-yellow);
    }

    [data-bs-theme="dark"] .btn-danger {
        --bs-btn-color: var(--evf-btn-fg-on-light);
        --bs-btn-bg: var(--evf-icesail-red);
        --bs-btn-border-color: var(--evf-icesail-red);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-icesail-red) 92%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-icesail-red) 92%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-red-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-red) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-red) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-light);
        --bs-btn-disabled-bg: var(--evf-icesail-red);
        --bs-btn-disabled-border-color: var(--evf-icesail-red);
    }

    [data-bs-theme="dark"] .btn-light {
        --bs-btn-color: var(--evf-btn-fg-on-light);
        --bs-btn-bg: var(--evf-icesail-base);
        --bs-btn-border-color: var(--evf-icesail-base);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-icesail-base) 92%, var(--evf-tarink));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-icesail-base) 92%, var(--evf-tarink));
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-base-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-base) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-base) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-btn-fg-on-light);
        --bs-btn-disabled-bg: var(--evf-icesail-base);
        --bs-btn-disabled-border-color: var(--evf-icesail-base);
    }

    [data-bs-theme="dark"] .btn-dark {
        --bs-btn-color: var(--evf-icesail-base);
        --bs-btn-bg: var(--evf-tarink);
        --bs-btn-border-color: var(--evf-tarink);
        --bs-btn-hover-color: var(--evf-icesail-base);
        --bs-btn-hover-bg: color-mix(in srgb, var(--evf-tarink) 92%, var(--evf-icesail-base));
        --bs-btn-hover-border-color: color-mix(in srgb, var(--evf-tarink) 92%, var(--evf-icesail-base));
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-base-rgb);
        --bs-btn-active-color: var(--evf-icesail-base);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-tarink) 85%, var(--evf-icesail-base));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-tarink) 85%, var(--evf-icesail-base));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-icesail-base);
        --bs-btn-disabled-bg: var(--evf-tarink);
        --bs-btn-disabled-border-color: var(--evf-tarink);
    }

    /* ---------- DARK THEME: outline buttons ---------- */
    [data-bs-theme="dark"] .btn-outline-primary {
        --bs-btn-color: var(--evf-icesail-base);
        --bs-btn-border-color: var(--evf-icesail-base);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light); /* tarink */
        --bs-btn-hover-bg: var(--evf-icesail-base);
        --bs-btn-hover-border-color: var(--evf-icesail-base);
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-base-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-base) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-base) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-icesail-base);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-icesail-base);
    }

    [data-bs-theme="dark"] .btn-outline-secondary {
        --bs-btn-color: var(--evf-icesail-base-60);
        --bs-btn-border-color: var(--evf-icesail-base-60);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: var(--evf-icesail-base-60);
        --bs-btn-hover-border-color: var(--evf-icesail-base-60);
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-base-60-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-base-60) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-base-60) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-icesail-base-60);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-icesail-base-60);
    }

    [data-bs-theme="dark"] .btn-outline-success {
        --bs-btn-color: var(--evf-icesail-green);
        --bs-btn-border-color: var(--evf-icesail-green);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: var(--evf-icesail-green);
        --bs-btn-hover-border-color: var(--evf-icesail-green);
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-green-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-green) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-green) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-icesail-green);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-icesail-green);
    }

    [data-bs-theme="dark"] .btn-outline-info {
        --bs-btn-color: var(--evf-icesail-teal);
        --bs-btn-border-color: var(--evf-icesail-teal);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: var(--evf-icesail-teal);
        --bs-btn-hover-border-color: var(--evf-icesail-teal);
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-teal-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-teal) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-teal) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-icesail-teal);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-icesail-teal);
    }

    [data-bs-theme="dark"] .btn-outline-warning {
        --bs-btn-color: var(--evf-icesail-yellow);
        --bs-btn-border-color: var(--evf-icesail-yellow);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: var(--evf-icesail-yellow);
        --bs-btn-hover-border-color: var(--evf-icesail-yellow);
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-yellow-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-yellow) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-yellow) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-icesail-yellow);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-icesail-yellow);
    }

    [data-bs-theme="dark"] .btn-outline-danger {
        --bs-btn-color: var(--evf-icesail-red);
        --bs-btn-border-color: var(--evf-icesail-red);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: var(--evf-icesail-red);
        --bs-btn-hover-border-color: var(--evf-icesail-red);
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-red-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-red) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-red) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-icesail-red);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-icesail-red);
    }

    [data-bs-theme="dark"] .btn-outline-light {
        --bs-btn-color: var(--evf-icesail-base);
        --bs-btn-border-color: var(--evf-icesail-base);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: var(--evf-icesail-base);
        --bs-btn-hover-border-color: var(--evf-icesail-base);
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-base-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-base) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-base) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-icesail-base);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-icesail-base);
    }

    [data-bs-theme="dark"] .btn-outline-dark {
        --bs-btn-color: var(--evf-icesail-base-80);
        --bs-btn-border-color: var(--evf-icesail-base-80);
        --bs-btn-hover-color: var(--evf-btn-fg-on-light);
        --bs-btn-hover-bg: var(--evf-icesail-base-80);
        --bs-btn-hover-border-color: var(--evf-icesail-base-80);
        --bs-btn-focus-shadow-rgb: var(--evf-icesail-base-80-rgb);
        --bs-btn-active-color: var(--evf-btn-fg-on-light);
        --bs-btn-active-bg: color-mix(in srgb, var(--evf-icesail-base-80) 85%, var(--evf-tarink));
        --bs-btn-active-border-color: color-mix(in srgb, var(--evf-icesail-base-80) 85%, var(--evf-tarink));
        --bs-btn-active-shadow: var(--evf-btn-shadow-active);
        --bs-btn-disabled-color: var(--evf-icesail-base-80);
        --bs-btn-disabled-bg: transparent;
        --bs-btn-disabled-border-color: var(--evf-icesail-base-80);
    }

    /* ---------- DARK THEME: link button ---------- */
    [data-bs-theme="dark"] .btn-link {
        --bs-btn-color: var(--bs-link-color);
        --bs-btn-hover-color: var(--bs-link-hover-color);
        --bs-btn-active-color: var(--bs-link-hover-color);
        --bs-btn-disabled-color: color-mix(in srgb, var(--bs-link-color) 45%, transparent);
    }