@define-mixin heading-1 {
    font-size: var(--global-font-size--xx-large);
    font-weight: var(--black);

    margin-bottom: 40px; /* rounded from design 42px */
    text-transform: uppercase;
}

@define-mixin heading-2 {
    color: var(--global-color-accent--secondary);
    font-size: var(--global-font-size--x-large);
    font-weight: var(--black);

    margin-top: 0px; /* depends on interpretation of design */
    margin-bottom: 30px; /* rounded from design 31px */
}

@define-mixin heading-3 {
    font-size: var(--global-font-size--large);
    font-weight: var(--black);

    margin-top: 0; /* designs suggest component padding can give top spacing */
    margin-bottom: 20px; /* rounded from design 17px */
}

/* WARNING: No design available; these are just developer guesswork */
@define-mixin heading-4 {
    font-size: var(--global-font-size--medium);
    font-weight: var(--bold);
}

/* To deter use of "smaller" headings by making them match body font */
@define-mixin heading-5 {
    font-size: inherit;
    font-weight: var(--normal);
}
@define-mixin heading-6 {
    font-size: inherit;
    font-weight: var(--normal);
}