/* body */
[cvgz-ds-body] body, body.cvgz-ds-body,
.cvgz-ds-body {
    font: var(--cvgz-ds-font-family-body, Roboto-Regular, Roboto, sans-serif);
    color: var(--cvgz-ds-color-text-body, #333333);
}

/* paragraph */ 
[cvgz-ds-body] p, p.cvgz-ds-p,
.cvgz-ds-p {
    margin: 0;
    padding: var(--cvgz-ds-paragraph-spacing-default, 1rem) 0;
}

/* italic */
[cvgz-ds-body] i, i.cvgz-ds-i,
.cvgz-ds-i {
    font-style: italic;
}

/* strong emphasis */
[cvgz-ds-body] strong, strong.cvgz-ds-strong,
.cvgz-ds-strong {
    font-weight: var(--cvgz-ds-font-weights-600, 600);
}

/* bold */
[cvgz-ds-body] b, b.cvgz-ds-b,
.cvgz-ds-b {
    font-weight: var(--cvgz-ds-font-weights-600, 600);
}

/* emphasis */
[cvgz-ds-body] em, em.cvgz-ds-em,
.cvgz-ds-em {
    font-style: italic;
}

/* mark */
[cvgz-ds-body] mark, mark.cvgz-ds-mark,
.cvgz-ds-mark {
    background-color: var(--cvgz-ds-colors-rainbow-lemon, #FFC001);
    color: var(--cvgz-ds-color-text-body, #333333);
}

/* small */
[cvgz-ds-body] small, small.cvgz-ds-small,
.cvgz-ds-small {
    font-size: var(--cvgz-ds-font-sizes-sm, 14px);
}

/* deleted text */
[cvgz-ds-body] del, del.cvgz-ds-del,
.cvgz-ds-del {
    text-decoration: line-through;
} 

/* inserted text */
[cvgz-ds-body] ins, ins.cvgz-ds-ins,
.cvgz-ds-ins {
    background-color: var(--cvgz-ds-colors-rainbow-kiwi, #8FC900);
    text-decoration: none;
}

/* superscript */
[cvgz-ds-body] sup, sup.cvgz-ds-sup,
.cvgz-ds-sup {
    vertical-align: super;
    font-size: smaller;
}

/* subscript */
[cvgz-ds-body] sub, sub.cvgz-ds-sub,
.cvgz-ds-sub {
    vertical-align: sub;
    font-size: smaller;
}

/* pre (code) */
[cvgz-ds-body] pre, pre.cvgz-ds-pre,
.cvgz-ds-pre {
    width: fit-content;
    font-family: monospace;
    font-size: var(--cvgz-ds-font-sizes-sm, 14px);
    color: var(--cvgz-ds-colors-white, #ffffff);
    background-color: var(--cvgz-ds-colors-gray-500, #656565);
    padding: var(--cvgz-ds-pixel-grid-1, 4px) var(--cvgz-ds-pixel-grid-2, 8px);
    border-radius: var(--sizing-1, 4px);
}

[cvgz-ds-body] h1, h1.cvgz-ds-h1,
.cvgz-ds-h1 {
    font: var(
        --cvgz-ds-typography-h1,
        600 24px/1.3 Asap-SemiBold,
        Asap,
        sans-serif
    );
    color: var(--cvgz-ds-color-text-title, #333333);
	margin-bottom: var(--sizing-8, 32px);
}

[cvgz-ds-body] h2, h2.cvgz-ds-h2,
.cvgz-ds-h2 {
    font: var(
        --cvgz-ds-typography-h2,
        600 20px/1.3 Asap-SemiBold,
        Asap,
        sans-serif
    );
    color: var(--cvgz-ds-color-text-title, #333333);
	margin-bottom: var(--sizing-4, 16px);
}

[cvgz-ds-body] h3, h3.cvgz-ds-h3,
.cvgz-ds-h3 {
    font: var(
        --cvgz-ds-typography-h3,
        600 18px/1.3 Asap-SemiBold,
        Asap,
        sans-serif
    );
    color: var(--cvgz-ds-color-text-title, #333333);
	margin-bottom: var(--sizing-2, 8px);
}

[cvgz-ds-body] h4, h4.cvgz-ds-h4,
.cvgz-ds-h4 {
    font: var(
        --cvgz-ds-typography-h4,
        600 18px/1.3 Asap-SemiBold,
        Asap,
        sans-serif
    );
    color: var(--cvgz-ds-color-text-title, #333333);
	margin-bottom: var(--sizing-1, 4px);
}

[cvgz-ds-body] h5, h5.cvgz-ds-h5,
.cvgz-ds-h5 {
    font: var(
        --cvgz-ds-typography-h5,
        600 18px/1.3 Asap-SemiBold,
        Asap,
        sans-serif
    );
    color: var(--cvgz-ds-color-text-title, #333333);
	margin-bottom: var(--sizing-1, 4px);
}

[cvgz-ds-body] h6, h6.cvgz-ds-h6,
.cvgz-ds-h6 {
    font: var(
        --cvgz-ds-typography-h6,
        600 24px/1.3 Asap-SemiBold,
        Asap,
        sans-serif
    );
    color: var(--cvgz-ds-color-text-title, #333333);
	margin-bottom: var(--sizing-0, 0);
}

[cvgz-ds-body], body.cvgz-ds-body,
.cvgz-ds-body {
    font: var(
        --cvgz-ds-typography-body,
        400 16px/1.5 Roboto-Regular,
        Roboto,
        sans-serif
    );
    color: var(--cvgz-ds-color-text-body, #333333);
}

[cvgz-ds-body] label, label.cvgz-ds-label,
.cvgz-ds-label {
    font: var(
        --cvgz-ds-typography-label,
        500 16px/1.5 Roboto-Regular,
        Roboto,
        sans-serif
    );
    color: var(--cvgz-ds-color-text-title, #333333);
}

[cvgz-ds-body] .cvgz-ds-label--small, .cvgz-ds-label--small {
    font: var(
        --cvgz-ds-typography-label-small,
        500 14px/1.5 Roboto-Regular,
        Roboto,
        sans-serif
    );
    color: var(--cvgz-ds-color-text-title, #333333);
}

[cvgz-ds-body] .cvgz-ds-label--link, .cvgz-ds-label--link {
    font: var(
        --cvgz-ds-typography-label-link,
        500 16px/1.5 Roboto-Regular,
        Roboto,
        sans-serif
    );
    text-decoration: underline;
    color: var(--cvgz-ds-color-text-title, #333333);
}

/* extra classes */
[cvgz-ds-body] .cvgz-ds-intro, .cvgz-ds-intro {
    font: var(
        --cvgz-ds-typography-intro,
        400 18px/1.5 Roboto-Regular,
        Roboto,
        sans-serif
    );
    color: var(--cvgz-ds-text-text-body, #333333);
	margin-bottom: var(--sizing-4, 16px);
    padding: 0; /* this removes the padding set by the p because the intro must also be in a paragraph */
}

[cvgz-ds-body] .cvgz-ds-description, .cvgz-ds-description {
    font: var(
        --cvgz-ds-typography-description,
        400 14px/1.5 Roboto-Regular,
        Roboto,
        sans-serif
    );
    color: var(--cvgz-ds-text-text-description, #656565);
}

[cvgz-ds-body] .cvgz-ds-display--1, .cvgz-ds-display--1 {
    font: var(
        --cvgz-ds-typography-display-1,
        600 36px/1.3 Asap-SemiBold,
        Asap,
        sans-serif
    );
    color: var(--cvgz-ds-text-display, #333333);
}

[cvgz-ds-body] .cvgz-ds-display--2, .cvgz-ds-display--2 {
    font: var(
        --cvgz-ds-typography-display-2,
        600 32px/1.3 Asap-SemiBold,
        Asap,
        sans-serif
    );
    color: var(--cvgz-ds-text-display, #333333);
}

[cvgz-ds-body] .cvgz-ds-display--3, .cvgz-ds-display--3 {
    font: var(
        --cvgz-ds-typography-display-3,
        600 28px/1.3 Asap-SemiBold,
        Asap,
        sans-serif
    );
    color: var(--cvgz-ds-text-display, #333333);
}

[cvgz-ds-body] .cvgz-ds-inverted, .cvgz-ds-inverted {
    color: var(--cvgz-ds-text-text-inverted, #ffffff);
}

/* text links */
[cvgz-ds-body] a, a.cvgz-ds-link,
    .cvgz-ds-link {
        text-decoration: underline;
        font: var(
            --cvgz-ds-link-typography-link-rest,
            400 16px/1.5 Roboto-Regular,
            Roboto,
            sans-serif
        );
        color: var(--cvgz-ds-color-text-links-rest, #454545);
}

[cvgz-ds-body] a:hover, a.cvgz-ds-link:hover,
.cvgz-ds-link:hover {
    color: var(--cvgz-ds-link-color-hover, #454545);
}
[cvgz-ds-body] a:active, a.cvgz-ds-link:hover:active,
.cvgz-ds-link:hover:active {
    color: var(--cvgz-ds-link-color-pressed, #CCCCCC);
}
[cvgz-ds-body] a:visited, a.cvgz-ds-link:visited,
.cvgz-ds-link:visited {
    color: var(--cvgz-ds-link-color-rest, #454545);
}
[cvgz-ds-body] a:disabled, a.cvgz-ds-link:disabled,
.cvgz-ds-link:disabled {
    color: var(--cvgz-ds-link-color-disabled, #656565);
}