@mixin bp($breakpoint) {
    @if $breakpoint ==large-mobile {
        @media (min-width: 500px) {
            @content;
        }
    }

    @else if $breakpoint ==tablet {
        @media (min-width: 768px) {
            @content;
        }
    }

    @else if $breakpoint ==desktop {
        @media (min-width: 1024px) {
            @content;
        }
    }

    @else if $breakpoint ==large-desktop {
        @media (min-width: 1280px) {
            @content;
        }
    }

    // else if the breakpoint is a pixel value, use it as is
    @else {
        @media (min-width: $breakpoint) {
            @content;
        }
    }
}

@mixin h1 {
    font-size: var(--typography-h1-font-size);
    font-weight: var(--typography-h1-font-weight);
    line-height: var(--typography-h1-line-height);
    letter-spacing: -1px;
}
@mixin h2 {
    font-size: var(--typography-h2-font-size);
    font-weight: var(--typography-h2-font-weight);
    line-height: var(--typography-h2-line-height);
    letter-spacing: -1px;
}
@mixin h3 {
    font-size: var(--typography-h3-font-size);
    font-weight: var(--typography-h3-font-weight);
    line-height: var(--typography-h3-line-height);
}
@mixin h4 {
    font-size: var(--typography-h4-font-size);
    font-weight: var(--typography-h4-font-weight);
    line-height: var(--typography-h4-line-height);
}
@mixin h5 {
    font-size: var(--typography-h5-font-size);
    font-weight: var(--typography-h5-font-weight);
    line-height: var(--typography-h5-line-height);
}
@mixin h6 {
    font-size: var(--typography-h6-font-size);
    font-weight: var(--typography-h6-font-weight);
    line-height: var(--typography-h6-line-height);
}

@mixin p {
    font-size: var(--typography-paragraph-font-size);
    font-weight: var(--typography-paragraph-font-weight);
    line-height: var(--typography-paragraph-line-height);
}

@mixin small{
    font-size: var(--typography-small-paragraph-font-size, var(--typography-paragraph-font-size));
    font-weight: var(--typography-small-paragraph-font-weight, var(--typography-paragraph-font-weight));
    line-height: var(--typography-small-paragraph-line-height, var(--typography-paragraph-line-height));
}

@mixin big {
    font-size: var(--typography-big-font-size);
    font-weight: var(--typography-big-font-weight);
    line-height: var(--typography-big-line-height);
    text-transform: uppercase;
}