:root {
    /* = Branding = */
    /* Fonts */
    --iris-heading-font-family                                   : "Roboto", arial, helvetica, sans-serif;
    --iris-content-heading-font-color                            : #0A1955;
    --iris-content-heading-sub-font-color                        : #0A1955;

    /* Primary colors */
    --iris-primary-color                                         : #0A1955; /* Required */
    --iris-primary-font-color                                    : #0A1955; /* Required | AA ✓ Background #E3E6E8 */
    /* = Optional = */
    /* Buttons */
    --iris-primary-button-hover-color                            : #040d2f;

    /* Secondary colors */
    --iris-secondary-color                                       : #00A0D2; /* Required */
    --iris-secondary-font-color                                  : #096E9C; /* Required | AA ✓ Background #E3E6E8 */

    /* Teams colors */
    --iris-teams-color                                           : #F0BE8C; /* Required */
    --iris-teams-font-color                                      : #885E40; /* Required | AA ✓ Background #E3E6E8 */

    /* Header */
    --iris-header-logo-width-largeScreen                         : 14rem;
    --iris-header-logo-horizontal-alignment-onscroll-largeScreen : center;
    --iris-header-background                                     : var(--iris-primary-color);
    --iris-header-background-largeScreen                         : var(--iris-primary-color);
    --iris-header-nav-color                                      : var(--iris-secondary-color);
    --iris-header-nav-hover-background                           : var(--iris-primary-color);
    --iris-header-nav-hover-color                                : #ffffff;
    --iris-header-nav-active-background                          : var(--iris-primary-color);
    --iris-header-nav-active-color                               : #ffffff;
    --iris-header-nav-has-childs-arrow                           : var(--iris-secondary-color);
    --iris-header-border-bottom-color                            : #000000;

    /* Toolbox */
    --iris-toolbox-nav-primary-color                             : var(--iris-secondary-color);
    --iris-toolbox-nav-color                                     : var(--iris-primary-color);

    /* Hover state */
    --iris-toolbox-nav-hover-color                               : var(--iris-primary-color);

    /* Active state */
    --iris-toolbox-nav-active-color                              : var(--iris-primary-color);

    /* Color palette foreground colors AA ✓ */
    /* Primary color */
    --iris-primary-color-200-foreground                          : #000000;
    --iris-primary-color-500-foreground                          : #ffffff;

    /* Teams color */
    --iris-teams-color-500-foreground                            : #000000;
    --iris-teams-color-800-foreground                            : #ffffff;
}