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


// 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);



@bodySize:             0.8rem;
@bodyBaseline:         1.3;
@baselineDestroyer:    0.7rem;

@atk-swatch-white:     #ffffff;     .createSwatch(atk-swatch-white);
@atk-swatch-grey:      #393939;     .createSwatch(atk-swatch-grey);
@atk-swatch-light-grey:  #dcdcdc;   .createSwatch(atk-swatch-light-grey);
@atk-swatch-ink:       #000;        .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);
@atk-swatch-orange:    #FF5A00;     .createSwatch(atk-swatch-orange);
@swatchText:           50%; // Text color sensitivity based on swatch

