@mixin typography-giant-3() {
    font-size: var(--font-size-giant-3);
    font-weight: var(--font-weight-bold);
    line-height: 52px;
}

@mixin typography-giant-2() {
    font-size: var(--font-size-giant-2);
    font-weight: var(--font-weight-bold);
    line-height: 46px;
}

@mixin typography-giant-1() {
    font-size: var(--font-size-giant-1);
    font-weight: var(--font-weight-bold);
    line-height: 40px;
}

@mixin typography-large-2() {
    font-size: var(--font-size-large-2);
    font-weight: var(--font-weight-bold);
    line-height: 32px;
}

@mixin typography-large-2-secondary() {
    @include typography-large-2();

    color: var(--color-foreground-secondary);
}

@mixin typography-large-1() {
    font-size: var(--font-size-large-1);
    font-weight: var(--font-weight-bold);
    line-height: 28px;
}

@mixin typography-large-1-secondary() {
    @include typography-large-1();

    color: var(--color-foreground-secondary);
}

@mixin typography-medium() {
    font-size: var(--font-size-medium);
    line-height: 24px;
}

@mixin typography-medium-bold() {
    @include typography-medium();

    font-weight: var(--font-weight-bold);
}

@mixin typography-medium-secondary() {
    @include typography-medium();

    color: var(--color-foreground-secondary);
}

@mixin typography-regular() {
    font-size: var(--font-size-default);
    line-height: 20px;
}

@mixin typography-regular-bold() {
    @include typography-regular();

    font-weight: var(--font-weight-bold);
}

@mixin typography-regular-secondary() {
    @include typography-regular();

    color: var(--color-foreground-secondary);
}

@mixin typography-small() {
    font-size: var(--font-size-small);
    line-height: 16px;
}

@mixin typography-small-bold() {
    @include typography-small();

    font-weight: var(--font-weight-bold);
}

@mixin typography-small-secondary() {
    @include typography-small();

    color: var(--color-foreground-secondary);
}

/* large screen titles */

@mixin title-giant-screen-large() {
    font-size: var(--font-size-giant-1);
    line-height: 36px;
}

@mixin title-large-screen-large() {
    font-size: var(--font-size-large-2);
    line-height: 30px;
}

@mixin title-medium-screen-large() {
    font-size: var(--font-size-large-1);
    line-height: 24px;
}

@mixin title-small-screen-large() {
    font-size: var(--font-size-medium);
    line-height: 20px;
}

/* small screen titles */

@mixin title-giant-screen-small() {
    font-size: var(--font-size-large-2);
    line-height: 30px;
}

@mixin title-large-screen-small() {
    font-size: var(--font-size-large-1);
    line-height: 24px;
}

@mixin title-medium-screen-small() {
    font-size: var(--font-size-medium);
    line-height: 20px;
}

@mixin title-small-screen-small() {
    font-size: var(--font-size-default);
    line-height: 16px;
}