/** Main parameters configuration */

:root {
       --primary: rgba(41, 150, 204, 1);
       --accent: rgba(186, 182, 185, 1);
       --warn: rgba(208, 50, 55, 1);

       --background-color: white;
       --logo: url('../../../pas-designer/logo.77becb0c6d0eff5217ed.svg');
       --logo-size: auto 20px;
       --caption-font: normal 200 20px Roboto;

       --header-background-color: unset;
       --header-color: white;
       --header-background-image: var(--logo), linear-gradient(145deg, white, rgba(5, 97, 141, 1), white);

       --h1-font: 100 44px Roboto;

       --button-border-radius: 0;
       --button-color: white;
       --primary-button-color: white;
}

The root section contains essential parameters that are used in the rest of the CSS file. Style your main colors, fonts and logos, etc. in this section.

/** CSS definitions **/

body {
      background-color: var(--background-color);
}

header {
        background-color: var(--header-background-color) !important;
        background-image: var(--header-background-image) !important;
        background-position: 64px center, left !important;
        background-size: var(--logo-size), cover !important;
}

header .caption {
                 font: var(--caption-font) !important;
                 color: var(--header-color);
}

[...]

The rest of the CSS file contains CSS definitions for various UI elements you may want to style.
You can change them, or you can also define new CSS classes for individual elements.