@layer theme {
    :root:has(input.theme-controller[value=dark]:checked), :root[data-theme=dark] {
        /* = Backgrounds = */
        --bg-neutral-primary: var(--greyscale-90);
        --bg-neutral-secondary: var(--greyscale-80);
        --bg-neutral-tertiary: var(--greyscale-70);
        --bg-neutral-disabled: var(--greyscale-60);

        --bg-neutral-inverse-primary: var(--white);
        --bg-neutral-inverse-secondary: var(--greyscale-10);
        --bg-neutral-inverse-tertiary: var(--greyscale-20);

        /* = Brand Backgrounds = */
        --bg-brand-y-primary: var(--brand-yellow-90);
        --bg-brand-y-secondary: var(--brand-yellow-100);
        --bg-brand-y-tertiary: var(--brand-yellow-100);

        --bg-brand-b-primary: var(--brand-blue-30);
        --bg-brand-b-secondary: var(--brand-blue-40);
        --bg-brand-b-tertiary: var(--brand-blue-60);

        /* = Semantic success backgrounds = */
        --bg-success: var(--green-10);
        --bg-success-subtle: var(--green-90);

        --bg-warning: var(--yellow-10);
        --bg-warning-subtle: var(--yellow-90);

        --bg-error: var(--red-10);
        --bg-error-subtle: var(--red-90);

        --bg-info: var(--blue-10);
        --bg-info-subtle: var(--blue-90);

        --text-neutral-primary: var(--white);
        --text-neutral-secondary: var(--greyscale-20);
        --text-neutral-teritary: var(--greyscale-30);
        --text-neutral-disabled: var(--greyscale-40);

        --text-neutral-inverse-primary: var(--greyscale-90);
        --text-neutral-inverse-secondary: var(--greyscale-80);
        --text-neutral-inverse-teritary: var(--greyscale-70);

        --text-success: var(--green-10);
        --text-success-inverse: var(--green-90);

        --text-warning: var(--yellow-10);
        --text-warning-inverse: var(--yellow-90);

        --text-error: var(--red-10);
        --text-error-inverse: var(--red-90);

        --text-info: var(--blue-10);
        --text-info-inverse: var(--blue-90);

        /* = Borders = */
        --border-neutral-primary: var(--white);
        --border-neutral-secondary: var(--greyscale-70);
        --border-neutral-tertiary: var(--greyscale-80);

        --border-neutral-inverse-primary: var(--greyscale-90);
        --border-neutral-inverse-secondary: var(--greyscale-10);
        --border-neutral-inverse-tertiary: var(--greyscale-20);

        --border-brand-y-primary: var(--brand-yellow-80);
        --border-brand-y-inverse: var(--brand-yellow-100);

        --border-brand-b-primary: var(--brand-blue-30);
        --border-brand-b-inverse: var(--brand-blue-80);

        --border-success: var(--green-10);
        --border-success-inverse: var(--green-90);

        --border-warning: var(--yellow-10);
        --border-warning-inverse: var(--yellow-90);

        --border-error: var(--red-10);
        --border-error-inverse: var(--red-90);

        --border-info: var(--blue-10);
        --border-info-inverse: var(--blue-90);

        /* = Focus outline = */
        --focus: var(--brand-yellow-60);
        --focus-inverse: var(--brand-yellow-80);

        /* Shadows */
        --shadow-base-1: 0px 10px 33px -4px #ffffff0f;
        --shadow-base-2: 0px 10px 22px -4px #ffffff08;
    }

}
:root[data-theme=dark] {
    a.main-logo img.logo-umk-lightmode {
        display: none;
    }

    a.main-logo img.logo-umk-darkmode {
        display: block;
    }

    nav.top-menu a.external {
        background-image: url("/img/icons/external-icon-darkmode.svg");
    }

    nav.top-menu a.search {
        background-image: url("/img/icons/search-icon-darkmode.svg");
    }

    nav.top-menu a.mall {
        background-image: url("/img/icons/mall-icon-darkmode.svg");
    }

    nav.top-menu a.arrow-drop-down {
        background-image: url("/img/icons/arrow-drop-down-icon-darkmode.svg");
    }

    nav.top-menu a.login {
        background-image: url("/img/icons/login-icon-darkmode.svg");
    }

    nav.top-menu a.logout {
        background-image: url("/img/icons/logout-icon-darkmode.svg");
    }

    nav.top-menu a.darkmode {
        background-image: url("/img/icons/darkmode-icon-darkmode.svg");
    }

    nav.top-menu a.bigger {
        background-image: url("/img/icons/bigger-icon-darkmode.svg");
    }

    nav.top-menu a.smaller {
        background-image: url("/img/icons/smaller-icon-darkmode.svg");
    }

    nav.main-menu a {
        background-image: url("/img/icons/arrow-drop-down-icon-darkmode.svg");
    }

    .menu-mobile nav a {
        background-image: url("/img/icons/keyboard-arrow-down-icon-darkmode.svg");
    }

    .mobile-menu-footer nav a {
        background-image: url("/img/icons/arrow-drop-right-icon-darkmode.png");
    }

    .mobile-menu-footer a.darkmode {
        background-image: url("/img/icons/darkmode-icon-darkmode.svg");
    }

    .mobile-menu-footer a.bigger {
        background-image: url("/img/icons/bigger-icon-darkmode.svg");
    }

    .mobile-menu-footer a.smaller {
        background-image: url("/img/icons/smaller-icon-darkmode.svg");
    }

    .bg-white-stripped{
        background-image: url("/img/bg-white-stripe-darkmode.png");
    }
    .bg-gray-stripped{
        background-image: url("/img/bg-gray-stripe-darkmode.png");
    }

    .footer-umk-logo {
        filter: invert();
    }

    .partnership-block a {
        background-color: var(--white);
    }

    .media-block a img {
        filter: invert();
    }

    .search-button {
        background-color: var(--greyscale-40);
    }

    .tiles-2 a.klocek img {
        filter: invert();
        background-color: var(--greyscale-30);
    }

    .alert::before {
        filter: brightness(2.2);
    }
    
    .alert.alert-calendar::before {
        filter: invert();
    }

    .tabs-item {
        background-color: var(--white);
    }

    .block-links::before, .lista li a::before {
        background-image: url("/img/icons/internal-icon-darkmode.png");
    }

    .block-links.download::before, .lista li a.download::before {
        background-image: url("/img/icons/download-icon-darkmode.svg");
    }

    .block-links.external::before, .lista li a.external::before {
        background-image: url("/img/icons/external-icon-darkmode.svg");
    }

    blockquote {
        background-image: url("/img/icons/quote-icon-darkmode.svg");
    }

    .logo-umk-lightmode {
        display:none!important;
    }
    .logo-umk-darkmode {
        display:block!important;
    }
    .bg-stripped {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='100%25'%3E%3Crect width='1' height='100%25' fill='rgba(255, 255, 255, 0.05)'/%3E%3C/svg%3E");
    }

    .personal-widget {
        box-shadow: 10px 10px 33px -4px #ffffff0f,
        -10px -10px 33px -4px #ffffff0f,
        -10px 10px 33px -4px #ffffff0f,
        10px -10px 33px -4px #ffffff0f;
    }
    .personal-widget .duties::before {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.06), transparent);
    }
}