.pf-c-button {
    --pf-c-button--m-primary--hover--Color: var(--color-frappe-surface0) !important;
    --pf-c-button--m-primary--Color: var(--color-frappe-surface1) !important;
    --pf-c-button--m-danger--Color: var(--pf-c-button--m-primary--Color)!important;
    --pf-c-button--m-danger--hover--Color: var(--pf-c-button--m-primary--hover--Color)!important;
}

.pf-c-card {
    --pf-c-card--BackgroundColor: var(--color-frappe-mantle);
}

.pf-c-toolbar {
    --pf-c-toolbar--BackgroundColor: var(--color-frappe-mantle) !important;
}

.pf-c-table {
    --pf-c-table--BackgroundColor: var(--color-frappe-mantle) !important;
}

.pf-c-pagination.pf-m-bottom {
    background-color: var(--color-frappe-mantle) !important;
}

#graph .flowchart-link {
    stroke: var(--color-frappe-flamingo) !important;
}


.pf-c-nav__link.pf-m-current::after, .pf-c-nav__link.pf-m-current:hover::after, .pf-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-c-nav__link::after {
  --pf-c-nav__link--m-current--after--BorderColor: var(--color-frappe-red);
}

:host([theme="dark"]) .background-default-slant {
    background-color: var(--color-frappe-mantle) !important;
}

:host([theme="light"]) .background-default-slant {
    background-color: var(--color-frappe-surface1) !important;
}

:root {
    --color-frappe-rosewater: #f2d5cf;
    --color-frappe-flamingo: #eebebe;
    --color-frappe-pink: #f4b8e4;
    --color-frappe-mauve: #ca9ee6;
    --color-frappe-red: #e78284;
    --color-frappe-maroon: #ea999c;
    --color-frappe-peach: #ef9f76;
    --color-frappe-yellow: #e5c890;
    --color-frappe-green: #a6d189;
    --color-frappe-teal: #81c8be;
    --color-frappe-sky: #99d1db;
    --color-frappe-sapphire: #85c1dc;
    --color-frappe-blue: #8caaee;
    --color-frappe-lavender: #babbf1;
    --color-frappe-text: #c6d0f5;
    --color-frappe-subtext1: #b5bfe2;
    --color-frappe-subtext0: #a5adce;
    --color-frappe-overlay2: #949cbb;
    --color-frappe-overlay1: #838ba7;
    --color-frappe-overlay0: #737994;
    --color-frappe-surface2: #626880;
    --color-frappe-surface1: #51576d;
    --color-frappe-surface0: #414559;
    --color-frappe-base: #303446;
    --color-frappe-mantle: #292c3c;
    --color-frappe-crust: #232634;

    --ak-accent: var(--color-frappe-red) !important;
    --ak-dark-foreground: var( --color-frappe-text) !important;
    --ak-dark-foreground-darker: var(--color-frappe-subtext1) !important;
    --ak-dark-foreground-link: var(--color-frappe-blue) !important;
    --ak-dark-background: var( --color-frappe-base) !important;
    --ak-dark-background-darker: var( --color-frappe-crust) !important;
    --ak-dark-background-light: var(--color-frappe-surface1) !important;
    --ak-dark-background-light-ish: var(--color-frappe-surface0) !important;
    --ak-dark-background-lighter: var(--color-frappe-surface2) !important;

    --pf-global--link--Color: var(--color-frappe-sapphire) !important;
    --pf-global--link--Color--hover: color-mix(in srgb, var(--color-frappe-sapphire) 95%, black) !important;
    --pf-global--link--Color--light: color-mix(in srgb, var(--color-frappe-sapphire) 95%, white) !important;
    --pf-global--link--Color--light--hover: color-mix(in srgb, var(--color-frappe-sapphire) 90%, white) !important;
    --pf-global--link--Color--dark: var(--color-frappe-blue) !important;
    --pf-global--link--Color--dark--hover: color-mix(in srgb, var(--color-frappe-blue) 95%, black) !important;
    --pf-global--link--Color--visited: var(--color-frappe-mauve) !important;

    --pf-global--BorderColor--100: var(--color-frappe-overlay1) !important;
    --pf-global--BorderColor--200: var(--color-frappe-overlay0) !important;
    --pf-global--BorderColor--300: var(--color-frappe-overlay2) !important;
    --pf-global--BorderColor--dark-100: color-mix(in srgb, var(--color-frappe-overlay1) 95%, black) !important;
    --pf-global--BorderColor--light-100: color-mix(in srgb, var(--color-frappe-overlay1) 95%, white) !important;
    --pf-global--icon--Color--light: var(--color-frappe-surface2) !important;
    --pf-global--icon--Color--dark: var(--color-frappe-mantle) !important;

    --pf-global--Color--100: var(--ak-dark-foreground) !important;
    --ak-global--Color--100: var(--ak-dark-foreground) !important;
    --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker) !important;
    --pf-global--BorderColor--100: var(--ak-dark-background-lighter) !important;
    --pf-global--link--Color: var(--pf-global--link--Color--light) !important;
    --pf-global--link--Color--hover: var(--pf-global--link--Color--light--hover) !important;

    --ak-flow-background-color-contrast: var(--pf-global--Color--100);
    --ak-flow-footer-color: var(--pf-global--Color--light-100);
    --ak-global--Color--100: var(--pf-global--Color--100);
    --ak-sidebar--minimum-auto-width: 80rem;
    --ak-navbar--height: 7rem;
    --pf-global--disabled-color--100: GrayText;
    --pf-global--disabled-color--200: color-mix(in srgb, GrayText 100%, CanvasText 75%);
    --pf-global--disabled-color--300: color-mix(in srgb, GrayText 100%, CanvasText 100%);

        /* ---------- White ---------- */
    --pf-global--palette--white: var(--color-frappe-text) !important;

    /* ---------- Backgrounds (generic) ---------- */
    --pf-global--BackgroundColor--100: var(--color-frappe-base) !important;
    --pf-global--BackgroundColor--150: var(--color-frappe-surface0) !important;
    --pf-global--BackgroundColor--200: var(--color-frappe-surface1) !important;

    /* ---------- Backgrounds (light) ---------- */
    --pf-global--BackgroundColor--light-100: var(--color-frappe-surface0) !important;
    --pf-global--BackgroundColor--light-200: var(--color-frappe-surface1) !important;
    --pf-global--BackgroundColor--light-300: var(--color-frappe-surface2) !important;

    /* ---------- Backgrounds (dark) ---------- */
    --pf-global--BackgroundColor--dark-100: var(--color-frappe-base) !important;
    --pf-global--BackgroundColor--dark-200: var(--color-frappe-mantle) !important;
    --pf-global--BackgroundColor--dark-300: var(--color-frappe-crust) !important;
    --pf-global--BackgroundColor--dark-400: color-mix(in srgb, var(--color-frappe-crust) 95%, black) !important;

    /* ---------- Backgrounds (dark transparent) ---------- */
    --pf-global--BackgroundColor--dark-transparent-100: color-mix(
    in srgb,
    var(--color-frappe-crust) 62%,
    transparent
    ) !important;

    --pf-global--BackgroundColor--dark-transparent-200: color-mix(
    in srgb,
    var(--color-frappe-crust) 32%,
    transparent
    ) !important;

    /* ---------- Text / Foreground colors ---------- */
    --pf-global--Color--100: var(--color-frappe-text) !important;
    --pf-global--Color--200: var(--color-frappe-subtext1) !important;
    --pf-global--Color--300: var(--color-frappe-subtext0) !important;
    --pf-global--Color--400: var(--color-frappe-overlay2) !important;

    /* ---------- Light text ---------- */
    --pf-global--Color--light-100: var(--color-frappe-text) !important;
    --pf-global--Color--light-200: var(--color-frappe-subtext1) !important;
    --pf-global--Color--light-300: var(--color-frappe-subtext0) !important;

    /* ---------- Dark text ---------- */
    --pf-global--Color--dark-100: var(--color-frappe-text) !important;
    --pf-global--Color--dark-200: var(--color-frappe-subtext1) !important;

    /* ---------- Active / Focus ---------- */
    --pf-global--active-color--100: var(--color-frappe-blue) !important;
    --pf-global--active-color--200: color-mix(in srgb, var(--color-frappe-blue) 90%, var(--color-frappe-base)) !important;
    --pf-global--active-color--300: var(--color-frappe-sapphire) !important;
    --pf-global--active-color--400: color-mix(in srgb, var(--color-frappe-blue) 85%, var(--color-frappe-surface0)) !important;

    /* ---------- Disabled ---------- */
    --pf-global--disabled-color--100: var(--color-frappe-overlay1) !important;
    --pf-global--disabled-color--200: var(--color-frappe-surface2) !important;
    --pf-global--disabled-color--300: var(--color-frappe-surface1) !important;

    /* ---------- Primary ---------- */
    --pf-global--primary-color--100: var(--color-frappe-blue) !important;
    --pf-global--primary-color--200: color-mix(in srgb, var(--color-frappe-blue) 85%, var(--color-frappe-crust)) !important;
    --pf-global--primary-color--light-100: var(--color-frappe-sky) !important;
    --pf-global--primary-color--dark-100: var(--color-frappe-sapphire) !important;

    /* ---------- Secondary ---------- */
    --pf-global--secondary-color--100: var(--color-frappe-overlay1) !important;

    /* ---------- Default / Neutral accent ---------- */
    --pf-global--default-color--100: var(--color-frappe-teal) !important;
    --pf-global--default-color--200: color-mix(in srgb, var(--color-frappe-teal) 90%, var(--color-frappe-crust)) !important;
    --pf-global--default-color--300: color-mix(in srgb, var(--color-frappe-teal) 80%, var(--color-frappe-crust)) !important;

    /* ---------- Success ---------- */
    --pf-global--success-color--100: var(--color-frappe-green) !important;
    --pf-global--success-color--200: color-mix(in srgb, var(--color-frappe-green) 85%, var(--color-frappe-crust)) !important;

    /* ---------- Info ---------- */
    --pf-global--info-color--100: var(--color-frappe-blue) !important;
    --pf-global--info-color--200: color-mix(in srgb, var(--color-frappe-blue) 85%, var(--color-frappe-crust)) !important;

    /* ---------- Warning ---------- */
    --pf-global--warning-color--100: var(--color-frappe-yellow) !important;
    --pf-global--warning-color--200: color-mix(in srgb, var(--color-frappe-yellow) 85%, var(--color-frappe-crust)) !important;

    /* ---------- Danger ---------- */
    --pf-global--danger-color--100: var(--color-frappe-red) !important;
    --pf-global--danger-color--200: var(--color-frappe-maroon) !important;
    --pf-global--danger-color--300: color-mix(in srgb, var(--color-frappe-maroon) 90%, var(--color-frappe-crust)) !important;


    --pf-global--palette--black-100: var(--color-frappe-text) !important;
    --pf-global--palette--black-150: color-mix(in srgb, var(--color-frappe-text) 85%, var(--color-frappe-base)) !important;
    }