html, body {
    height: 100%;
}

:root {
    --bs-heading-color: var(--sm-color-grey-01);
    --bs-body-font-family: Inter;
    --bs-body-font-size: var(--sm-font-body-main-size);
    --bs-body-font-weight: var(--sm-font-body-main-weight);
    --bs-body-line-height: var(--sm-font-body-main-height);
    --bs-body-color: var(--sm-color-grey-01);
    --bs-body-bg: var(--sm-color-grey-white);
}

/* Color*/

:root {
    --sm-color-grey-01: #1F1F1F;
    --sm-color-grey-02: #1F1F1F;
    --sm-color-grey-03: #A4A4AC;
    --sm-color-outline-grey: #EBEBEC;
    --sm-color-grey-04: #F4F5F7;
    --sm-color-background-grey: #FCFCFC;
    --sm-color-grey-white: #FFF;
    --sm-color-green: #BCDD4C;
    --sm-color-blue: #7BC1FF;
    --sm-color-yellow: #FFC57A;
    --sm-color-red: #FF7975;
    --sm-color-purple: #775FF0;
    --sm-color-background-purple: #F7F5FE;
    --sm-color-gradient: linear-gradient(92deg, #775FF0 1.13%, #FF7194 64%, #FFA646 113.27%);
    --sm-color-gradient-assistant: linear-gradient(95deg, #775FF0 13.4%, #FF9ABD 87.51%, #C097FF 112.7%);

    .text-grey-white {
        color: var(--sm-color-grey-white)
    }

    .text-grey-1 {
        color: var(--sm-color-grey-01)
    }

    .text-grey-2 {
        color: var(--sm-color-grey-02)
    }

    .text-grey-3 {
        color: var(--sm-color-grey-03)
    }

    .text-purple {
        color: var(--sm-color-purple);
    }

    /* Scores */

    .text-great {
        color: var(--sm-color-green);
    }

    .text-normal {
        color: var(--sm-color-blue);
    }

    .text-attention {
        color: var(--sm-color-yellow);
    }

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

    /* TODO rename to bg- */

    .score-great {
        background-color: var(--sm-color-green);
    }

    .score-normal {
        background-color: var(--sm-color-blue);
    }

    .score-attention {
        background-color: var(--sm-color-yellow);
    }

    .score-overload {
        background-color: var(--sm-color-red)
    }

    .score-unknown {
        background-color: var(--sm-color-outline-grey);
    }

    /*     TODO remove , used for menu badge*/
    .bg-premium {
        background: var(--sm-color-gradient);
    }

    .text-gradient {
        background: var(--sm-color-gradient);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .border-premium {
        --sm-bg: var(--sm-bg, white);
        border-style: solid;
        border-color: transparent;
        background-clip: padding-box, border-box;
        background-origin: border-box;
        background-image: linear-gradient(var(--sm-bg), var(--sm-bg)), var(--sm-color-gradient);
    }
}

/* Font */

:root {
    /* Accent */
    --sm-font-accent-size: 32px;
    --sm-font-accent-weight: 500;
    --sm-font-accent-height: normal;
    /* H1 - Header Big */
    --sm-font-h1-size: 20px;
    --sm-font-h1-weight: 500;
    --sm-font-h1-height: normal;
    /* H2 - Header Medium */
    --sm-font-h2-size: 16px;
    --sm-font-h2-weight: 500;
    --sm-font-h2-height: normal;
    /* H3 - Header Small */
    --sm-font-h3-size: 14px;
    --sm-font-h3-weight: 500;
    --sm-font-h3-height: 1.43;

    /*!* H4 - Header Smaller - To Review *!*/
    /*--sm-font-h4-size: 12px;*/
    /*--sm-font-h4-weight: 500;*/
    /*--sm-font-h4-height: 1.43;*/
    /*!* H5 - Header Smaller - To Review *!*/
    /*--sm-font-h5-size: 10px;*/
    /*--sm-font-h5-weight: 500;*/
    /*--sm-font-h5-height: 1.43;*/
    /*!* H6 - Header Smallest - To Review *!*/
    /*--sm-font-h6-size: 8px;*/
    /*--sm-font-h6-weight: 500;*/
    /*--sm-font-h6-height: 1.43;*/

    /* Body Main */
    --sm-font-body-main-size: 14px;
    --sm-font-body-main-weight: 400;
    --sm-font-body-main-height: 1.43;
    /* Body Secondary */
    --sm-font-body-secondary-size: 14px;
    --sm-font-body-secondary-weight: 500;
    --sm-font-body-secondary-height: 1.43;
    /* Label Main */
    --sm-font-label-main-size: 12px;
    --sm-font-label-main-weight: 500;
    --sm-font-label-main-height: 1.67;
    /* Label Sub */
    --sm-font-label-sub-size: 12px;
    --sm-font-label-sub-weight: 400;
    --sm-font-label-sub-height: 1.67;

    .font-accent {
        font-size: var(--sm-font-accent-size);
        font-weight: var(--sm-font-accent-weight);
        line-height: var(--sm-font-accent-height);
    }

    h1, .h1,
    .font-h1 {
        font-size: var(--sm-font-h1-size);
        font-weight: var(--sm-font-h1-weight);
        line-height: var(--sm-font-h1-height);
    }

    h2, .h2,
    .font-h2 {
        font-size: var(--sm-font-h2-size);
        font-weight: var(--sm-font-h2-weight);
        line-height: var(--sm-font-h2-height);
    }

    h3, .h3,
    .font-h3 {
        font-size: var(--sm-font-h3-size);
        font-weight: var(--sm-font-h3-weight);
        line-height: var(--sm-font-h3-height);
    }

    /*h4, .h4,*/
    /*.font-h4 {*/
    /*    font-size: var(--sm-font-h4-size);*/
    /*    font-weight: var(--sm-font-h4-weight);*/
    /*    line-height: var(--sm-font-h4-height);*/
    /*}*/

    /*h5, .h5,*/
    /*.font-h5 {*/
    /*    font-size: var(--sm-font-h5-size);*/
    /*    font-weight: var(--sm-font-h5-weight);*/
    /*    line-height: var(--sm-font-h5-height);*/
    /*}*/

    /*h6, .h6,*/
    /*.font-h6 {*/
    /*    font-size: var(--sm-font-h6-size);*/
    /*    font-weight: var(--sm-font-h6-weight);*/
    /*    line-height: var(--sm-font-h6-height);*/
    /*}*/

    .font-b1 {
        font-size: var(--sm-font-body-main-size);
        font-weight: var(--sm-font-body-main-weight);
        line-height: var(--sm-font-body-main-height);
    }

    .font-b2 {
        font-size: var(--sm-font-body-secondary-size);
        font-weight: var(--sm-font-body-secondary-weight);
        line-height: var(--sm-font-body-secondary-height);
    }

    .font-l1 {
        font-size: var(--sm-font-label-main-size);
        font-weight: var(--sm-font-label-main-weight);
        line-height: var(--sm-font-label-main-height);
    }

    .font-l2 {
        font-size: var(--sm-font-label-sub-size);
        font-weight: var(--sm-font-label-sub-weight);
        line-height: var(--sm-font-label-sub-height);
    }
}

/* Scrollbar */

*::-webkit-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: #f0f0f0;
}

*::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.scroll-sm::-webkit-scrollbar {
    width: 3px;
}

.scroll-sm::-webkit-scrollbar-thumb {
    border-radius: 3px;
}

/* Responsive */

@media (min-width: 1600px) {
    .container-3xl {
        max-width: 1440px;
        margin: 0 auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 1800px) {
    .container-4xl {
        max-width: 1600px;
        margin: 0 auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 2000px) {
    .container-5xl {
        max-width: 2000px;
        margin: 0 auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (min-width: 2200px) {
    .container-6xl {
        max-width: 2200px;
        margin: 0 auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}