@import "../inc/foundation/scss/util/util";

$grid-column-gutter: (
small: 20px,
medium: 20px,
);

$rem-base: 16px;

$breakpoint-classes: (small medium large xlarge xxlarge);
$small-range: (0em, 39.9375em); /* 0, 639px */
$medium-range: (40em, 63.9375em); /* 640px, 1023px */
$large-range: (64em, 79.9375em); /* 1024px, 1279px */
$xlarge-range: (80em, 99.9375em); /* 1280px, 1599px */
$xxlarge-range: (100em); /* 1600px */

$white : #FFFFFF;
$black : #000000;

// Grid Variables
$row-width: rem-calc(1700);
$column-gutter: rem-calc(20);
$total-columns: 12;

// Block Grid Variables
$block-grid-default-spacing: 20px;

// Style anchors
$anchor-font-color-hover: none;

// Typography
$h1-font-size: 50px;
$header-font-family: inherit;
$header-font-color: #000;
$header-top-margin: .5rem;
$header-bottom-margin: .5rem;

// Style paragraphs
$paragraph-line-height: 1.8;

// Form Variables
$input-focus-bg-color: darken(#fff, 5%);
$input-border-color: #ddd;
$input-focus-border-color: #ccc;
$input-box-shadow: inset 0 0 0 rgba(0,0,0,0);
$input-include-glowing-effect: false;

// Off-canvas
$offcanvas-sizes: (
small: 270px,
medium: 320px
);
$offcanvas-background: $white;
$offcanvas-shadow: 0;
$offcanvas-exit-background: rgba($black, 0.3);

// Forms
$input-shadow: 0;
$input-shadow-focus: 0;