//Font-Family

$fontTitle: 'Lexend';
$fontBody: 'Inter';


.fontTitle {
    font-family: $fontTitle;
}


.fontBody {
    font-family: $fontBody;
}



//FontSize

$fontSize10: 10px;
$fontSize12: 12px;
$fontSize14: 14px;
$fontSize16: 16px;
$fontSize22: 22px;
$fontSize32: 32px;
$fontSize38: 38px;
$fontSize40: 40px;


.ds-fs10 {
    font-size: $fontSize10;
}

.ds-fs12 {
    font-size: $fontSize10;
}

.ds-fs14 {
    font-size: $fontSize14;
}

.ds-fs16 {
    font-size: $fontSize16;
}

.ds-fs22 {
    font-size: $fontSize22;
}

.ds-fs32 {
    font-size: $fontSize32;
}

.ds-fs38 {
    font-size: $fontSize38;
}

.ds-fs40 {
    font-size: $fontSize40;
}

//Font-Weight

$fontWeightRegular: 400;
$fontWeightSemiBold: 600;
$fontWeightBold: 700;


.ds-font-weight-regular {
    font-weight: $fontWeightRegular;
}

.ds-font-weight-semi-bold{
    font-weight: $fontWeightSemiBold;
}

.ds-font-weight-bold{
    font-weight: $fontWeightBold;
}


//Line Height 

$lineHeight8: 8px;
$lineHeight14: 14px;
$lineHeight16: 16px;
$lineHeight24: 24px;
$lineHeight22: 22px;
$lineHeight32: 32px;
$lineHeight40: 40px;
$lineHeight48: 48px;


.ds-lh8 {
    line-height: $lineHeight8;
}

.ds-lh16 {
    line-height: $lineHeight16;
}

.ds-lh22 {
    line-height: $lineHeight22;
}

.ds-lh24 {
    line-height: $lineHeight24;
}

.ds-lh32 {
    line-height: $lineHeight32;
}

.ds-lh40 {
    line-height: $lineHeight40;
}

.ds-lh48 {
    line-height: $lineHeight48;
}


//Titles 

.titleH1 {
    font-family: $fontTitle;
    font-size: $fontSize40;
    font-weight: $fontWeightBold;
    line-height: $lineHeight48;
}

.titleH2 {
    font-family: $fontTitle;
    font-size: $fontSize38;
    font-weight: $fontWeightBold;
    line-height: $lineHeight40;
}

.titleH3 {
    font-family: $fontTitle;
    font-size: $fontSize22;
    font-weight: $fontWeightBold;
    line-height: $lineHeight32;
}

.titleH4 {
    font-family: $fontTitle;
    font-size: $fontSize22;
    font-weight: $fontWeightBold;
    line-height: $lineHeight32;
}


.titleH4Regular {
    font-family: $fontTitle;
    font-size: $fontSize22;
    font-weight: $fontWeightRegular;
    line-height: $lineHeight32;
}

.titleH4SemiBold{
    font-family: $fontTitle;
    font-size: $fontSize22;
    font-weight: $fontWeightSemiBold;
    line-height: $lineHeight32;
}

.titleH5 {
    font-family: $fontTitle;
    font-size: $fontSize16;
    font-weight: $fontWeightBold;
    line-height: $lineHeight24;
}

.titleH5Regular {
    font-family: $fontTitle;
    font-size: $fontSize16;
    font-weight: $fontWeightRegular;
    line-height: $lineHeight24;
}

.titleH5SemiBold {
    font-family: $fontTitle;
    font-size: $fontSize16;
    font-weight: $fontWeightSemiBold;
    line-height: $lineHeight24;
}

.titleH6 {
    font-family: $fontTitle;
    font-size: $fontSize14;
    font-weight: $fontWeightBold;
    line-height: $lineHeight24;
}

.titleH6Regular {
    font-family: $fontTitle;
    font-size: $fontSize14;
    font-weight: $fontWeightRegular;
    line-height: $lineHeight22;
}

.titleH6SemiBold {
    font-family: $fontTitle;
    font-size: $fontSize14;
    font-weight: $fontWeightSemiBold;
    line-height: $lineHeight22;
}

.titleH6Bold {
    font-family: $fontTitle;
    font-size: $fontSize14;
    font-weight: $fontWeightBold;
    line-height: $lineHeight22;
}

.titleMini {
    font-family: $fontTitle;
    font-size: $fontSize10;
    font-weight: $fontWeightBold;
    line-height: $lineHeight14;
}

.body16 {
    font-family: $fontBody;
    font-size: $fontSize16;
    font-weight: $fontWeightRegular;
    line-height: $lineHeight32;
}

.body16Bold {
    font-family: $fontBody;
    font-size: $fontSize16;
    font-weight: $fontWeightBold;
    line-height: $lineHeight32;
}


.body16SemiBold {
    font-family: $fontBody;
    font-size: $fontSize16;
    font-weight: $fontWeightSemiBold;
    line-height: $lineHeight32;
}

.body14 {
    font-family: $fontBody;
    font-size: $fontSize14;
    font-weight: $fontWeightRegular;
    line-height: $lineHeight32;
}

.body14Bold {
    font-family: $fontBody;
    font-size: $fontSize14;
    font-weight: $fontWeightBold;
    line-height: $lineHeight32;
}

.body14SemiBold {
    font-family: $fontBody;
    font-size: $fontSize14;
    font-weight: $fontWeightSemiBold;
    line-height: $lineHeight32;
}

.body12Bold {
    font-family: $fontBody;
    font-size: $fontSize12;
    font-weight: $fontWeightBold;
    line-height: $lineHeight16;
}

.body12SemiBold {
    font-family: $fontBody;
    font-size: $fontSize12;
    font-weight: $fontWeightSemiBold;
    line-height: $lineHeight16;
}

.body12 {
    font-family: $fontBody;
    font-size: $fontSize12;
    font-weight: $fontWeightRegular;
    line-height: $lineHeight16;
}

.bodyLegend {
    font-family: $fontBody;
    font-size: $fontSize12;
    font-weight: $fontWeightRegular;
    line-height: $lineHeight24;
}

.bodyLegendBold {
    font-family: $fontBody;
    font-size: $fontSize12;
    font-weight: $fontWeightBold;
    line-height: $lineHeight24;
}

.bodyMini {
    font-family: $fontBody;
    font-size: $fontSize10;
    font-weight: $fontWeightRegular;
    line-height: $lineHeight16;
}

.textColor {
    color: var(--textColor);
}