// We set box-sizing on elements in `base.scss` instead to avoid
// repeating markup each time we include `helpers.scss`
$border-box-sizing: false;

// Set up grid measurements (using desktop dimensions to
// calculate, but they'll get made into percentages).
$column: 60px;
$gutter: 32px;

// max width beyond which the grid shall not pass
$max-width: 1440px;

$grid-columns: 8; // mobile first, dude

// Breakpoints:
$tablet-breakpoint: 768px;
$desktop-breakpoint: 1080px;

// Media contexts
$mobile: new-breakpoint(max-width $tablet-breakpoint 8); // 8 columns [default]
$tablet: new-breakpoint(min-width $tablet-breakpoint 16); // 16 columns
$desktop: new-breakpoint(min-width $desktop-breakpoint 16); // 16 columns

// Additional media queries
$tall-mobile: min-device-height 960px;

// Development
// @NOTE: We define the grid in neue.css so it doesn't get duplicated in
// client app CSS. It can be toggled with a bookmarklet - see pattern
// library for documentation!
$visual-grid-index: front;
$visual-grid-color: #fcc;