:root {
    --ui-base-font-family-headings: 'Roboto Slab', serif;
    --ui-base-font-family-primary: 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;

    /* h1 */
    --ui-font-size-heading1: 56px;
    --ui-line-height-heading1: 62px;
    --ui-margin-bottom-heading1: 40px;
    --ui-font-weight-heading1: bold;
    --ui-font-family-heading1: var(--ui-base-font-family-headings);

    /* h2 */
    --ui-font-size-heading2: 40px;
    --ui-line-height-heading2: 48px;
    --ui-font-weight-heading2: bold;
    --ui-font-family-heading2: var(--ui-base-font-family-headings);

    /* h3 */
    --ui-font-size-heading3: 32px;
    --ui-line-height-heading3: 40px;
    --ui-font-weight-heading3: bold;
    --ui-font-family-heading3: var(--ui-base-font-family-headings);

    /* h4 */
    --ui-font-size-heading4: 24px;
    --ui-line-height-heading4: 28px;
    --ui-font-weight-heading4: bold;
    --ui-font-family-heading4: var(--ui-base-font-family-headings);
    --ui-margin-bottom-heading4: 24px;

    /* h5 */
    --ui-font-size-heading5: 20px;
    --ui-line-height-heading5: 28px;
    --ui-font-weight-heading5: bold;
    --ui-font-family-heading5: var(--ui-base-font-family-headings);

    /* h6 */
    --ui-font-size-heading6: 18px;
    --ui-line-height-heading6: 28px;

    --ui-font-weight-heading6: bold;
    --ui-font-family-heading6: var(--ui-base-font-family-headings);

    /* The most of the application text. Paragraphs, descriptions, information in cards, lists etc. */
    --ui-font-size-text-primary: 18px;
    --ui-line-height-text-primary: 28px;
    --ui-font-family-text-primary: var(--ui-base-font-family-primary);
    --ui-font-weight-text-primary: normal;

    /* The additional information, such as labels, captions etc. */
    --ui-font-size-text-secondary: 16px;
    --ui-line-height-text-secondary: 22px;

    --ui-font-family-text-secondary: var(--ui-base-font-family-primary);
    --ui-font-weight-text-secondary: normal;
    --ui-opacity-text-secondary: 0.72;

    /* Placeholders and text provided by user in form fields */
    --ui-font-size-form-field: 18px;
    --ui-line-height-form-field: 28px;
    --ui-font-weight-form-field: normal;
    --ui-font-family-form-field: var(--ui-base-font-family-primary);

    /* Form field labels (that appear at the top instead of placeholder) */
    --ui-font-size-form-label: 12px;
    --ui-line-height-form-label: 12px;
    --ui-font-weight-form-label: normal;
    --ui-font-family-form-label: var(--ui-base-font-family-primary);

    /* Form field error messages */
    --ui-font-size-form-error: 12px;
    --ui-line-height-form-error: 12px;
    --ui-font-weight-form-error: normal;
    --ui-font-family-form-error: var(--ui-base-font-family-primary);

    /* Simple buttons */
    --ui-font-size-button: 14px;
    --ui-line-height-button: 16px;
    --ui-font-weight-button: bold;
    --ui-font-family-button: var(--ui-base-font-family-primary);
    --ui-text-transform-button: uppercase;

    /* Navigation panel */
    --ui-font-size-navigation-panel: 12px;
    --ui-line-height-navigation-panel: 12px;
    --ui-font-weight-navigation-panel: 600;
    --ui-font-family-navigation-panel: var(--ui-base-font-family-primary);
    --ui-text-transform-navigation-panel: none;

    /* actions in header meta panel */
    --ui-font-size-meta-action: 14px;
    --ui-line-height-meta-action: 18px;

    /* footer stuff */
    --ui-font-size-footer-link: 13px;
    --ui-font-size-huge-title: 56px;

    --ui-font-size-cost-sharing-tab: 11px;
    --ui-line-height-cost-sharing-tab: 11px;
    --ui-font-weight-cost-sharing-tab: bold;
    --ui-font-family-cost-sharing-tab: var(--ui-base-font-family-primary);
    --ui-text-transform-cost-sharing-tab: uppercase;

    --ui-font-size-premium-currency: var(--ui-font-size-heading4);
}

@media (max-width: 1023px) {
    :root {
        --ui-font-size-heading1: 32px;
        --ui-line-height-heading1: 40px;
        --ui-margin-bottom-heading1: 32px;

        --ui-font-size-heading2: 28px;
        --ui-line-height-heading2: 36px;

        --ui-font-size-heading3: 24px;
        --ui-line-height-heading3: 32px;

        --ui-font-size-heading4: 20px;
        --ui-line-height-heading4: 28px;
        --ui-margin-bottom-heading4: 16px;

        --ui-font-size-heading5: 18px;
        --ui-line-height-heading5: 26px;

        --ui-font-size-heading6: 16px;
        --ui-line-height-heading6: 22px;

        --ui-font-size-text-primary: 16px;
        --ui-line-height-text-primary: 22px;

        --ui-font-size-text-secondary: 14px;
        --ui-line-height-text-secondary: 18px;

        --ui-font-size-navigation-panel: 10px;
        --ui-line-height-navigation-panel: 19px;
    }
}