// Steal from webapp/stylesheets/shared-package/variables.less
@baseFontFamily:        "Proxima Nova", sans-serif;
@boldFontFamily:        "Proxima Nova Semibold", sans-serif;
@green:                 #76a005;
@kaGreen:               #71b307;
@blue:                  #1c758a;
@gray:                  #aaa;
@red:                   #ffbaba;
@questionWidth:         480px;
@grayLight:             #aaa;
@grayLighter:           #ddd;
@learnstormBlue:        #4898fc;
@gray76: #babec2;

// Steal from webapp/javascript/shared-styles-package/global-styles.js
// TODO(charlie): DRY this up. How can we keep our global palette in sync across
// repos?
@white: #FFFFFF;
@gray98: #FAFAFA;
@gray97: #F6F7F7;
@gray95: #F0F1F2;
@gray90: #E3E5E6;
@gray85: #D6D8DA;
@gray76: #BABEC2;
@gray68: #888D93;
@gray41: #626569;
@gray25: #3B3E40;
@gray17: #21242C;

// Media query breakpoints
// --------------------------------------------------

// Kept in sync from Pure's default breakpoints: http://purecss.io/grids/

@pure-sm-min: 568px;
@pure-md-min: 768px;
@pure-lg-min: 1024px;
@pure-xl-min: 1280px;

@pure-xs-max: (@pure-sm-min - 1);
@pure-sm-max: (@pure-md-min - 1);
@pure-md-max: (@pure-lg-min - 1);
@pure-lg-max: (@pure-xl-min - 1);

// SAT variables
@satBlue:               #0084ce;
@satSelectedBackgroundColor: #e4f3f9;
@satActiveBackgroundColor: #d0edf4;
@satCorrectColor:       #009900;
@satCorrectBorderColor: #00cc00;
@satCorrectBackgroundColor: #e4f7e4;
@satIncorrectColor:     #990000;
@satIncorrectBorderColor: #cc5252;
@satIncorrectBackgroundColor: #f2ebeb;

// Layer variables
@zIndexScratchPad: 1;
@zIndexAboveScratchpad: @zIndexScratchPad + 1;
@zIndexInteractiveComponent: @zIndexAboveScratchpad + 1;
@zIndexCurrentlyDragging: @zIndexInteractiveComponent + 1;
@zIndexCalculator: @zIndexCurrentlyDragging + 1;

// Responsive variables
@phoneMargin: 16px;