/*we will remove this later*/
@import "../variables/colors.scss";
/*we will remove this later*/
/*Typoos*/
@mixin heading($heading_color) {
    font-style: normal;
    margin-bottom: 0px;
    color: $heading_color;
    font-weight: bold;
    font-feature-settings: "salt" on, "ss01" on, "ss02" on, "ss03" on, "ss04" on;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    @include heading(var(--base-1200));
}
.h1 {
    font-size: 64px;
    line-height: 70px;
}
.h2 {
    font-size: 56px;
    line-height: 60px;
}
.h3 {
    font-size: 48px;
    line-height: 52px;
}
.h4 {
    font-size: 32px;
    line-height: 36px;
}
.h5 {
    font-size: 24px;
    line-height: 30px;
}
.h6 {
    font-size: 20px;
    line-height: 24px;
}
/*Typoos*/

/*general*/
.branding,
.branding-link {
    color: var(--primary-100) !important;
}
.green,
.green-link {
    color: var(--successive-200) !important;
}
.red,
.red-link {
    color: var(--destructive-200) !important;
}
.branding-link,
.green-link,
.red-link {
    cursor: pointer;
}
.branding-link {
    &:hover,
    &:focus {
        color: var(--primary-200) !important;
    }
}
.green-link {
    &:hover,
    &:focus {
        color: var(--successive-100) !important;
    }
}
.red-link {
    &:hover,
    &:focus {
        color: var(--successive-100) !important;
    }
}
.pointer {
    cursor: pointer;
}

.round-64 {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--base-300);
}
/*general*/