:root {
    /* colours */
    --color-primary: var(--brand-color-primary, #000000);
    --color-secondary: var(--brand-color-secondary, #7397a7);
    --color-tertiary: var(--brand-color-tertiary, #e1003f);
    --color-grey-100: var(--brand-color-grey-100, #f8f8f8);
    --color-grey-200: var(--brand-color-grey-200, #e3e5e6);
    --color-grey-300: var(--brand-color-grey-300, #989da3);
    --color-grey-400: var(--brand-color-grey-400, #3f4952);
    --color-success: var(--brand-color-success, #208636);
    --color-warning: var(--brand-color-warning, #e7c000);
    --color-information: var(--brand-color-information, #0066cc);
    --color-active: var(--brand-color-active, #0052a3) ;
    --color-danger: var(--brand-color-danger, #d40000);
    --color-black: var(--brand-color-black, #252525);
    --color-white: var(--brand-color-white, #fefefe);

    /* fonts */
    --font-headline-font-size: var(--brand-font-headline-font-size, 26px);
    --font-headline-line-height: var(--brand-font-headline-line-height, 32px);
    --font-body-large-font-size: var(--brand-font-body-large-font-size, 20px);
    --font-body-large-line-height: var(--brand-font-body-large-line-height, 28px);
    --font-body-font-size: var(--brand-font-body-font-size, 16px);
    --font-body-line-height: var(--brand-font-body-line-height, 24px);
    --font-body-small-font-size: var(--brand-font-body-small-font-size, 12px);
    --font-body-small-line-height: var(--brand-font-body-small-line-height, 20px);
    --font-small-print-font-size: var(--brand-font-small-print-font-size, 10px);
    --font-small-print-line-height: var(--brand-font-small-print-line-height, 16px);

    /* gutters */
    --gutter: 16px;

    /* elevation */
    --elevation-1: 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.16);
    --elevation-2: 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.16);
    --elevation-4: 0 0 4px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.16);
    --elevation-8: 0 0 8px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.16);
    --elevation-16: 0 0 16px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.16);

    /* shape */
    --shape-2: 2px;
    --shape-4: 4px;
    --shape-8: 8px;
    --shape-50: 50%;

    /* font family */
    --font-primary: var(--brand-font-normal, "LinetoBrownRegular");
    --font-stack: var(--font-primary), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --touch-area: 56px;

    /* button radius */
    --button-border-radius-large: 3.125rem;

    /* Loading skeleton */
    --base-color: #ebebeb;
    --highlight-color: #f5f5f5;
    --animation-duration: 1.5s;
    --animation-direction: normal;
    --pseudo-element-display: block;

    /* header */
    --header-background-color: #252525;
}