:root {
    /****************** COLORS ******************/
    --primary: #000;
    --secondary: #fff;
    --light-secondary: #6b70b3;
    --light-primary: #F7FCD1;
    --color-on-primary: #fff;
    --color-light-on-primary: grey;
    --color-on-secondary: black;
    --color-light-on-secondary: grey;

    --color-light-grey: #D9D9D9;
    --color-bonus-purple: #403E8A;
    --color-bonus-red: #FD382B;
    --color-bonus-blue: #55AA9B;
    --color-bonus-orange: #FF8310;

    /****************** FONTS ******************/
    --title-font: 'Lineal', sans-serif;
    --main-font: 'Lineal', sans-serif;

    /****************** SIZES ******************/
    /* --header-height: clamp(5rem, 4.286rem + 1.905vw, 6rem); */
    --header-height: 5rem;
    --footer-height: clamp(1.7rem, 1.486rem + 0.571vw, 2rem);
    
    --sidebar-width: clamp(17rem, 4.143rem + 31.286vw, 35rem);
    --module-box-padding: clamp(0.6rem, 0.029rem + 1.424vw, 1.4rem);
    --module-box-padding-s: clamp(0.8rem, -0.343rem + 3.048vw, 2.4rem);

    /****************** TEXTS SIZES ******************/
    --sidebar-menu-text-size: clamp(1rem, 0.357rem + 1.414vw, 1.9rem);

    --footer-text-size: clamp(0.7rem, 0.629rem + 0.19vw, 0.8rem);
    --title-text-size: clamp(2rem, 1.5rem + 1.333vw, 2.7rem);
    --form-text-size: clamp(1.1rem, 0.993rem + 0.286vw, 1.25rem);
    --form-text-size-small: clamp(0.9rem, 0.757rem + 0.381vw, 1.1rem);
    
    /****************** SPACING ******************/
    --main-container-padding: clamp(1rem, 0.286rem + 1.905vw, 2rem);
    --main-container-padding-sides: clamp(5vw, 0.286rem + 1.905vw, 15vw);

    --margin-xs: clamp(0.4rem, 0.329rem + 0.19vw, 0.5rem);
    --margin-s: clamp(0.8rem, 0.657rem + 0.381vw, 1rem);
    --margin-m: clamp(1rem, 0.429rem + 1.524vw, 1.8rem);
    --margin-l: clamp(2rem, 1.643rem + 0.952vw, 2.5rem);

    /****************** OTHER ******************/
    --smooth-border: 1px solid hsla(228, 9%, 89%, .5);

    /****************** Button ******************/
    --classic-btn-font-size: clamp(0.9rem, 0.686rem + 0.571vw, 1.2rem);
    --classic-btn-padding: 10px 20px;
    --classic-btn-radius: 12px;
    --classic-btn-min-height: 2.5em;
    --loader-height: 0.375em;;
    --classic-btn-transition: background-color 0.4s, color 0.3s, border-color 0.3s;
}