// Change value accordingly with the app's brand color hex value
$brandColor: rgb(171, 144, 243); // oCim RGB

// Dégradé issu de la couleur du logo
// [Note] 900 = plus foncé ; 100 = plus clair ; 500 = couleur du logo 
$brand900 : desaturate(darken($brandColor, 70%), 25%);
$brand800 : desaturate(darken($brandColor, 50%), 25%);
$brand700 : desaturate(darken($brandColor, 30%), 25%);
$brand600 : desaturate(darken($brandColor, 10%), 25%);
$brand500 : $brandColor;
$brand400 : lighten($brandColor, 5%);
$brand300 : lighten($brandColor, 10%);
$brand200 : lighten($brandColor, 15%);
$brand100 : lighten($brandColor, 20%);

// Teintes de gris
// [Note] 900 = plus foncé ; 100 = plus clair 
$gris900: #1A202C;
$gris800: #2D3748;
$gris700: #4A5568;
$gris600: #718096;
$gris500: #A0AEC0;
$gris400: #CBD5E0;
$gris300: #E2E8F0;
$gris200: #EDF2F7;
$gris100: #F7FAFC;

$noir : #000000;
$blanc : #FFFFFF;

//Alert messages

$danger: #e65244;
$dangerLight : lighten($danger, 30%);
$warning : #fc8802;
$warningLight : lighten($warning, 30%);
$success : #49D793;
$successLight : lighten($success, 35%);
$info : #59B9E2;
$infoLight : lighten($info, 30%);

// Palette de couleur

$rouge: #B22222;
$orange: #FF8C00;
$jauneLight: #fff7cc;
$jaune: #FFD700;
$vertDark: #02BF54;
$vert: #00FA9A;
$bleuDark: #008AB8;
$bleu: #00BFFF;
$violetDark: #BA55D3;
$violet: #DDA0DD;
$roseDark: #FF1493;
$rose: #FFAFDA;


a.ui-state-default {
    color: $gris700;
}

.carre {
    height: 50px;
    width: 50px;
    &1{
        color:$brand100;
    }
    &2{
        color:$brand200;
    }
    &3{
                color:$brand300;
    }
    &4{
        color:$brand400;
    }
    &5{
        color:$brand500;
    }
    &6{
        color:$brand600;
    }
    &7{
        color:$brand700;
    }
    &8{
        color:$brand800;
    }
    &9{
        color:$brand900;
    }
}