constants.import.less

// colors
@colorWhite: #FAFAFA;
@colorBlack: #111;
@colorBlue: #0e73b8;
@colorOrange: #ff9800;
// @colorYellow: #ffc107;
@colorGreen: #8bc34a;
// @colorWhiteTransparent: rgba(255, 255, 255, 0.95);
@colorGray: #CCC6C6;
@colorGrayLight: lighten(#ecebe6, 4%);
@colorGrayDark: darken(@colorGray, 40%);

@colorError: #C20E25;

@colorBackgroundOverlay: transparent; // will use blur in ethereum dapps
@colorBackgroundHeader: lighten(#d9d0d0, 5%);
//@colorBackgroundAside: #05669A;
@colorBackgroundAside: @colorGray;
@colorForegroundAside: @colorBlack;

@colorBackgroundFooter: @colorGrayDark;

@colorBackgroundMainButton: #665F5F;
@colorForegroundMainButton: @colorWhite;



@colorTextPrimary: @colorBlack;
@colorTextSecondary: #827a7a;
@colorTextTertiary: fadeout(#827a7a, 50%);

@colorLink: #4A90E2;

// defaults sizes
@maxContentWidth: 980px;

@gridWidth: 32px;
@gridHeight: 18.4px;

@lineHeight: @gridHeight*1.2;

@defaultMargin: @gridWidth/2;
@defaultPaddingVertical: @gridHeight/1.5;
@defaultPaddingHorizontal: @gridWidth;

// @circleSizeMedium: 40px;
// @circleSizeLarge: 65px;

@widthContainer: @gridWidth * 30;
@widthTablet: @gridWidth * 20;
@widthMobile: 100%;

@heightHeader: @gridWidth * 2;
@heightHeaderSmall: @gridWidth;

@heightFooter: @gridWidth * 3;
@heightFooterSmall: @gridWidth * 2;

@widthSidebar: @gridWidth * 7;
@widthSidebarSmall: @gridWidth * 2;

@widthToolbar: @gridWidth * 2;
@widthToolbarSmall: @gridWidth;

// fonts
@fontFamily: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, 'sans-serif';


// animations
@animationSpeed: 400ms;