:root {
    --text-color-primary: #16151B;
    --text-color-secondary: #70706F;
    --text-color-red: #7A0017;

    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-28: 28px;
    --font-size-34: 34px;
    --font-size-40: 40px;

    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-700: 700;

    --line-height-20: 20px;
    --line-height-24: 24px;
    --line-height-28: 28px;
    --line-height-36: 36px;

    --background-color-red: #790016;
    --background-color-grey: #F6F6F6;
    --background-color-blue: #F0F5FB;

    --border-color-light: #E8EFF4;
    --border-color-red: #7A0017;
    --border-color-blue: #1400FF;
}

@media (max-width: 600px) {
    :root {
        --font-size-12: 10px;
        --font-size-14: 12px;
        --font-size-16: 12px;
        --font-size-20: 16px;
        --font-size-22: 16px;
        --font-size-24: 16px;
        --font-size-28: 16px;
        --font-size-34: 18px;
        --font-size-40: 20px;
    }
}

.text-color-primary {
    color: var(--text-color-primary);
}

.text-color-secondary {
    color: var(--text-color-secondary);
}

.text-color-red {
    color: var(--text-color-red);
}

.font-weight-500 {
    font-weight: var(--font-weight-500);
}

.font-weight-700 {
    font-weight: var(--font-weight-700);
}

.font-size-24 {
    font-size: var(--font-size-24);
}

.font-size-22 {
    font-size: var(--font-size-22);
}

.font-size-20 {
    font-size: var(--font-size-20);
}

.font-size-16 {
    font-size: var(--font-size-16);
}

.font-size-14 {
    font-size: var(--font-size-14);
}

.font-size-12 {
    font-size: var(--font-size-12);
}

.border-color-blue {
    border-color: var(--border-color-blue);
}

@font-face {
    font-family: 'NunitoSans';
    src: url("/assets/fonts/NunitoSans.ttf") format("truetype");
}




/* Typography */
.desktop-action-m {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}

.desktop-action-l {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

.desktop-header-h1 {
    font-size: 28px;
    font-weight: 500;
    line-height: 42px;
}

.desktop-body-m {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

.desktop-table-s {
    font-family: 'NunitoSans';
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.desktop-heading-h3 {
    font-family: 'NunitoSans';
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
}


@media (max-width: 600px) {
    .mobile-header-h0 {
        font-size: 20px;
        font-weight: 700;
        line-height: 30px;
    }

    .mobile-header-h3 {
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
    }

    .mobile-body-l-medium {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
    }

    .mobile-body-m {
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
    }
}