@import 'less/agiletoolkit.less';
@import 'fontello.css'; /* Icon library generated by www.fontello.com */


// ==========================================================
// Layout
// ==========================================================

// Important: list .createViewport functions in the right order based on @min and @max values otherwise styles get overridden
.createViewport(
	@wrapperMargin: @margin,
	@colsGutter: @margin,
	@cols: 12,
	@viewportMinWidth:769px
);

.createViewport(@class: 'tablet', @viewportMaxWidth:768px, @cols:6, @colsGutter: 30px, @stackLayout:true, @wrapperMargin: 20px);
.createViewport(@class: 'mobile', @viewportMaxWidth:479px, @cols:3, @colsGutter: 20px,  @stackLayout:true, @wrapperMargin: 20px);


// ==========================================================
// Typography
// ==========================================================

@bodyFamily:           "Helvetica Neue", "Helvetica", @jui-ffDefault;
@bodyColor:            #4c5359;
@bodySize:             0.875rem; // 14px
@bodyBaseline:         1.618; // Golden Section

@headingCase:          none; // Options: none, capitalize, uppercase, lowercase
@headingColor:         #3d4c59;
@headingFamily:        "Helvetica Neue", "Helvetica", @jui-ffDefault;
@headingWeight:		   400;
@headingBaseline:	   1.2; // Minor Third

@fontScatter:          0.5; // Multiplier that affects difference between heading sizes


// ==========================================================
// Styles & Colors
// ==========================================================

@bodyBackground:       #fff;

@cornerRadius:         5px;

@textSelect:           @atk-swatch-ink; // Text selection's color
@textDimmed:           40%;

@blur:                 5px; // Effect .atk-blur can be applied on any element.

@borderStatic:         #dadde0;
@borderClickable:      darken(@borderStatic, 10%);
@borderOverlay:        darken(@borderStatic, 25%);

@atk-swatch-white:	   #ffffff;		.createSwatch(atk-swatch-white);
@atk-swatch-gray:	   #f5f6f7;		.createSwatch(atk-swatch-gray);
@atk-swatch-ink:       #1c2933;		.createSwatch(atk-swatch-ink);
@atk-swatch-yellow:	   #ffcc00;		.createSwatch(atk-swatch-yellow);
@atk-swatch-red:	   #f9451f;		.createSwatch(atk-swatch-red);
@atk-swatch-green:     #00cc66;		.createSwatch(atk-swatch-green);
@atk-swatch-blue:      #0095ff;		.createSwatch(atk-swatch-blue);
@swatchText:           50%; // Text color sensitivity based on swatch

@effectSuccess:        #25c425;
@effectWarning:        #f7a600;
@effectDanger:         #ff2d1a;
@effectInfo:           #2bacd7;


// ==========================================================
// Components & Widgets
// ==========================================================

@linkColor:            darken(@atk-swatch-blue,10%);
@linkColorHover:       darken(@linkColor,10%);

@dialogOverlay:        fade(#000, 25%); // Color of modal dialog's overlay

@tooltipColor:         fade(@atk-swatch-ink, 90%);

@menuActive:           @atk-swatch-blue;

@buttonDefault:        #fff;
@buttonHover:          #f5f5f5;
@buttonActive:         #eee;

@boxColor:             #fff;

@formMandatory:        #ff0000;

@hoverIntensity:       3%;

@textDimmed:           desaturate(lighten(@bodyColor, 25%), 2%);

@inputFocus:           @atk-swatch-blue;
@inputPlaceholder:     lighten(@bodyColor, 40%);

@popoverArrow:         12px;


// ==========================================================
// Your Code Goes Here
// ==========================================================
