:root {
    /* Layout */
    --body-background-color: #ffffff;

    /* Typography */
    --html-font-weight: 400;
    --html-font-size-desktop: 16px;
    --html-font-size-mobile: 16px;
    --html-letter-spacing: 0;
    --html-line-height-desktop: 24px;
    --html-line-height-mobile: 18px;
    --html-line-height: 22px;

    /* Knoppen */
    --button-primary-border-style: solid;
    --button-primary-border-width: 1px;
    --button-secondary-border-style: solid;
    --button-secondary-border-width: 1px;

    /* Layout */
    --container-width: 1500px;
    --container-grade-a-width: 1194px;
    --container-grade-b-width: 991px;
    --container-grade-c-width: 767px;
    --container-grade-d-width: 479px;
    --container-padding-desktop: 15px;
    --container-padding-mobile: 15px;

    /* Headings */
    --heading-h1-weight-desktop: 500;
    --heading-h1-weight-mobile: 500;
    --heading-h1-color: var(--color-brand-primary);
    --heading-h1-size-desktop: 30px;
    --heading-h1-size-mobile: 18px;
    --heading-h1-letter-spacing-desktop: 0;
    --heading-h1-letter-spacing-mobile: 0;
    --heading-h1-family: var(--defaultFontFamily);
    --heading-h1-padding-bottom-dekstop: 10px;
    --heading-h1-padding-bottom-mobile: 0;
    --heading-h1-line-height-desktop: 38px;
    --heading-h1-line-height-mobile: 26px;
    --heading-h2-weight-desktop: 500;
    --heading-h2-weight-mobile: 500;
    --heading-h2-color: var(--color-brand-primary);
    --heading-h2-size-desktop: 24px;
    --heading-h2-size-mobile: 18px;
    --heading-h2-letter-spacing-desktop: 0;
    --heading-h2-letter-spacing-mobile: 0;
    --heading-h2-family: var(--defaultFontFamily);
    --heading-h2-padding-bottom-dekstop: 10px;
    --heading-h2-padding-bottom-mobile: 0;
    --heading-h2-line-height-desktop: 32px;
    --heading-h2-line-height-mobile: 26px;
    --heading-h3-weight-desktop: 500;
    --heading-h3-weight-mobile: 500;
    --heading-h3-color: var(--color-brand-primary);
    --heading-h3-size-desktop: 20px;
    --heading-h3-size-mobile: 16px;
    --heading-h3-letter-spacing-desktop: 0;
    --heading-h3-letter-spacing-mobile: 0;
    --heading-h3-family: var(--defaultFontFamily);
    --heading-h3-padding-bottom-dekstop: 10px;
    --heading-h3-padding-bottom-mobile: 0;
    --heading-h3-line-height-desktop: 28px;
    --heading-h3-line-height-mobile: 24px;
    --heading-h4-weight-desktop: 500;
    --heading-h4-weight-mobile: 500;
    --heading-h4-color: var(--color-brand-primary);
    --heading-h4-size-desktop: 20px;
    --heading-h4-size-mobile: 16px;
    --heading-h4-letter-spacing-desktop: 0;
    --heading-h4-letter-spacing-mobile: 0;
    --heading-h4-family: var(--defaultFontFamily);
    --heading-h4-padding-bottom-dekstop: 10px;
    --heading-h4-padding-bottom-mobile: 0;
    --heading-h4-line-height-desktop: 28px;
    --heading-h4-line-height-mobile: 24px;

    /* Knoppen */
    --button-border-radius: 10px;
    --button-font-weight: 400;
    --button-font-size: 16px;
    --button-padding-top: 5px;
    --button-padding-left: 25px;
    --button-padding-bottom: 5px;
    --button-padding-right: 25px;
    --button-line-height: 40px;

    /* Links */
    --link-text-decoration: underline;
    --link-text-decoration-color: var(--color-brand-secondary);
    --link-text-decoration-color-hover: var(--color-brand-primary);
    --link-color: var(--color-brand-secondary);
    --link-color-active: var(--color-brand-primary);
    --link-color-hover: var(--color-brand-primary);

    /* Colors */
    --color-brand-primary: #00464d;
    --color-brand-secondary: #ffcd1c;

    /* Knoppen */
    --button-primary-background: var(--color-brand-primary);
    --button-primary-background-hover: var(--color-brand-secondary);
    --button-primary-color: var(--defaultWhite);
    --button-primary-color-hover: var(--defaultWhite);
    --button-primary-border-color: var(--color-brand-primary);
    --button-primary-border-color-hover: var(--color-brand-secondary);
    --button-secondary-background: var(--color-brand-secondary);
    --button-secondary-background-hover: var(--color-brand-primary);
    --button-secondary-color: var(--defaultWhite);
    --button-secondary-color-hover: var(--defaultWhite);
    --button-secondary-border-color: var(--color-brand-secondary);
    --button-secondary-border-color-hover: var(--color-brand-primary);

    /* font */
    --defaultFontFamily: "Roboto", "Helvetica Neue", "Arial", sans-serif;

    /* Formulieren */
    --submit-background: var(--color-brand-primary);
    --submit-background-hover: var(--color-brand-secondary);
    --submit-border-radius: 5px;
    --submit-border-width: 1px;
    --submit-border-color: var(--color-brand-primary);
    --submit-border-color-hover: var(--color-brand-secondary);
    --submit-border-style: solid;
    --submit-text-color: var(--defaultBlack);
    --input-background: var(--defaultWhite);
    --input-border-radius: 5px;
    --input-height: 40px;
    --input-padding-top: 5px;
    --input-padding-left: 25px;
    --input-padding-bottom: 5px;
    --input-padding-right: 25px;
    --input-placeholder-color: var(--defaultLightGrey);
    --input-border-width: 1px;
    --input-border-color: var(--defaultBlack);
    --input-border-color-focus: var(--color-brand-primary);
    --input-text-color: var(--defaultBlack);
}