html {
    --zabarwienie: 0.12; /* skladnik alpha w rgba */

    --kolor-domyslny-rgb: 32, 33, 36;
    --kolor-domyslny: rgba(var(--kolor-domyslny-rgb), 1);
    --kolor-domyslny-zabarwienie: rgba(var(--kolor-domyslny-rgb), var(--zabarwienie));
    --kolor-domyslny-kontrast: rgba(255, 255, 255, 1);

    --kolor-glowny-rgb: 0, 186, 160;
    --kolor-glowny: rgba(var(--kolor-glowny-rgb), 1);
    --kolor-glowny-zabarwienie: rgba(var(--kolor-glowny-rgb), var(--zabarwienie));
    --kolor-glowny-kontrast: rgba(255, 255, 255, 1);

    --kolor-akcent-rgb: 48, 46, 138;
    --kolor-akcent: rgba(var(--kolor-akcent-rgb), 1);
    --kolor-akcent-zabarwienie: rgba(var(--kolor-akcent-rgb), var(--zabarwienie));
    --kolor-akcent-kontrast: rgba(255, 255, 255, 1);

    --kolor-sukces-rgb: 76, 175, 80;
    --kolor-sukces: rgba(var(--kolor-sukces-rgb), 1);
    --kolor-sukces-zabarwienie: rgba(var(--kolor-sukces-rgb), var(--zabarwienie));
    --kolor-sukces-kontrast: rgba(255, 255, 255, 1);

    --kolor-blad-rgb: 244, 67, 54;
    --kolor-blad: rgba(var(--kolor-blad-rgb), 1);
    --kolor-blad-zabarwienie: rgba(var(--kolor-blad-rgb), var(--zabarwienie));
    --kolor-blad-kontrast: rgba(255, 255, 255, 1);

    --kolor-ostrzezenie-rgb: 255, 152, 0;
    --kolor-ostrzezenie: rgba(var(--kolor-ostrzezenie-rgb), 1);
    --kolor-ostrzezenie-zabarwienie: rgba(var(--kolor-ostrzezenie-rgb), var(--zabarwienie));
    --kolor-ostrzezenie-kontrast: var(--kolor-domyslny);

    --kolor-info-rgb: 92, 119, 255;
    --kolor-info: rgba(var(--kolor-info-rgb), 1);
    --kolor-info-zabarwienie: rgba(var(--kolor-info-rgb), var(--zabarwienie));
    --kolor-info-kontrast: rgba(255, 255, 255, 1);

    --kolor-nieaktywny-rgb: 0, 0, 0;
    --kolor-nieaktywny: rgba(var(--kolor-nieaktywny-rgb), 0.35);
    --kolor-nieaktywny-zabarwienie: rgba(var(--kolor-nieaktywny-rgb), var(--zabarwienie));
    --kolor-nieaktywny-kontrast: rgba(255, 255, 255, 1);

    --jasniej: 110%;
    --ciemniej: 90%;

    --input-kolor-obramowanie: rgb(149, 149, 159);

    --spinner-kolor-rgb: var(--kolor-glowny-rgb);

    --czcionka: roboto;
    --czcionka-alt1: roboto;
    --czcionka-alt2: roboto;

    --czcionka-kolor: var(--kolor-domyslny);
    --czcionka-kolor-kontrast: var(--kolor-domyslny-kontrast);

    --czcionka-kolor-2: rgba(0,0,0,0.54);
    --czcionka-kolor-2-kontrast: hsla(0,0%,100%,0.7);

    --czcionka-kolor-3: rgba(0,0,0,0.38);
    --czcionka-kolor-3-kontrast: hsla(0,0%,100%,0.5);

    --menu-kolor-czcionka: var(--czcionka-kolor);
    --menu-kolor-czcionka-hover: var(--kolor-glowny-kontrast);
    --menu-kolor-bg: var(--czcionka-kolor-kontrast);
    --menu-kolor-bg-hover: var(--kolor-glowny);
    --menu-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

    --border-radius: 4px;
    --border-radius-maly: 2px;

    --checkbox-rozmiar: 10px;

    --okno-naglowek-wysokosc: 35px;
    --okno-wiersz-przyciskow-przycisk-wysokosc: 25px;
    --okno-wiersz-przyciskow-przycisk-margines-y: 2px;
    --okno-wiersz-przyciskow-wysokosc: calc(var(--okno-wiersz-przyciskow-przycisk-wysokosc) + var(--okno-wiersz-przyciskow-przycisk-margines-y) + var(--okno-wiersz-przyciskow-przycisk-margines-y));
    --okno-wiersz-przyciskow-odstep: 7px;

    --ekran-logowania-logo-height: 90px;

    --ekran-logowania-logo-url: url(/files/grafika/logowanie/tlo-logowanie.jpg);
    --ekran-logowania-logo-position: top calc(max(35vw, 400px) / -2) right calc(max(35vw, 400px) / -2);

    --ekran-logowania-tekst-logowania-kolor: #212121;
    --ekran-logowania-input-background: #f5f5f5;
    --ekran-logowania-przycisk-kolor: #00baa0;
    --ekran-logowania-przycisk-kolor-hover: #009d85;
    --ekran-logowania-wersja-kolor: #757575;
}