:root {
    /*color*/
    --color-primary: #0098CD;

    /*escala de grises*/
    --color-gray-0: #FFFFFF;
    --color-gray-20: #F4F4F4;
    --color-gray-30: #E8E8E8;
    --color-gray-40: #D8D8D8;
    --color-gray-50: #BFBFBF;
    --color-gray-60: #959595;
    --color-gray-70: #606060;
    --color-gray-80: #414141;
    --color-gray-90: #121212;
    --color-gray-100: #000000;
    /*escala de azules*/
    --color-primary-10: #E6F8FE;
    --color-primary-20: #BDEBFA;
    --color-primary-30: #7ED3F0;
    --color-primary-40: #4CBAE1;
    --color-primary-50: #0098CD;
    --color-primary-60: #067ABB;
    --color-primary-70: #0053AF;
    --color-primary-80: #034793;
    --color-primary-90: #073676;
    --color-primary-100: #13255A;
    /*escala de verdes*/
    --color-success-10: #F4FDF9;
    --color-success-20: #C1F2DC;
    --color-success-30: #94E2BF;
    --color-success-40: #6BCCA1;
    --color-success-50: #48B283;
    --color-success-60: #3D9A71;
    --color-success-70: #32825F;
    --color-success-80: #276A4C;
    --color-success-90: #1D513A;
    --color-success-100: #133828;
    /*escala de rojos*/
    --color-error-10: #FFF2F2;
    --color-error-20: #FAB6B6;
    --color-error-30: #ED7C7C;
    --color-error-40: #D94C4C;
    --color-error-50: #BE2424;
    --color-error-60: #AE1E27;
    --color-error-70: #9D182A;
    --color-error-80: #8C132B;
    --color-error-90: #790E2B;
    --color-error-100: #670A29;
    /*escala de najanjas*/
    --color-warning-10: #FFF6E8;
    --color-warning-20: #FFDBB9;
    --color-warning-30: #FFB98E;
    --color-warning-40: #FA9268;
    --color-warning-50: #EE6946;
    --color-warning-60: #DD5B39;
    --color-warning-70: #CA4D2C;
    --color-warning-80: #B34122;
    --color-warning-90: #993519;
    --color-warning-100: #802A11;
    /*escala de amarillos*/
    --color-alert-10: #FFFEF2;
    --color-alert-20: #FFF6BB;
    --color-alert-30: #FFEA8D;
    --color-alert-40: #FFDB67;
    --color-alert-50: #FAC849;
    --color-alert-60: #E4B03F;
    --color-alert-70: #CC9835;
    --color-alert-80: #B3812C;
    --color-alert-90: #996B23;
    --color-alert-100: #80561C;   
    /*Breakpoints -> max-width: --variable*/
    --breakpoint-xs: 576px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 990.125rem;
    --breakpoint-lg: 1200px;
    /*--color-primary-50: darken(var(--color-primary), 20%); TODO: revisar con gradiente a la vuelta*/
}