// BREAKPOINTS
$medium: 600px;
$large: 800px;
$xlarge: 1200px;
$xxlarge: 1900px;

// COLORS
// class e.g.
// .black { color: $black !important; }
// .black-bg { background-color: $black !important; }
$black: #000;
$gray: #D3D3D3;
$light-gray: #ECECEC;
$white: #FFF;
$red: #E23838;
$orange: #F78200;
$yellow: #FFB900;
$green: #5EBD3E;
$blue: #009CDF;
$indigo: #31457D;
$violet: #973999;
$teal: #2D9FA2;
$primary-color: $red;
$secondary-color: $yellow;
$tertiary-color: $blue;
$copy-color: #333;
$success-color: #2FAC58;
$info-color: #25327C;
$danger-color: #E83D48;
$warning-color: #EAC435;

// TYPOGRAPHY
$body-font: serif;
$copy-font: serif;
$heading-font: sans-serif;

$body-font-size: 16px;
$copy-font-size: 16px;
$heading-1-font-size: 2rem;
$heading-2-font-size: 1.5rem;
$heading-3-font-size: 1.17rem;
$heading-4-font-size: 1.12rem;
$heading-5-font-size: .83rem;
$heading-6-font-size: .75rem;

// BUTTONS
$btn-min-width: 145px;
$btn-border-style: solid;
$btn-border-radius: 5px;
$btn-border-width: 1px;
$btn-padding: 11px 5px;
$btn-font-size: 16px;
$btn-font: $copy-font;
$btn-color: $primary-color;
$btn-border-color: $primary-color;
$btn-text-color: $white;
$secondary-btn-text-color: $white;
$secondary-btn-color: $secondary-color;
$secondary-btn-border-color: $secondary-color;
$tertiary-btn-text-color: $white;
$tertiary-btn-color: $tertiary-color;
$tertiary-btn-border-color: $tertiary-color;
$btn-mini-min-width: 70px;
$btn-mini-padding: 8px;

// FORMS
$input-border: none;
$input-border-radius: 0;
$input-bg: $light-gray;
$input-padding: 8px;
$input-margin-bottom: 16px;
$input-height: 38px;
$text-area-min-height: 200px;
$label-margin-bottom: 8px;
$form-font: $copy-font;
$label-font: $form-font;
$input-font-size: $copy-font-size;
$label-font-size: $copy-font-size;
$file-font-size: 14px;

// MODALS
$modal-bg-color: $white;
$modal-max-width: 1200px;
$modal-content-padding: 20px;
$modal-border-radius: 5px;
$modal-border-color: $white;
$modal-border-width: 5px;
$modal-border-style: solid;
$modal-close-size: 30px;
$modal-close-color: $copy-color;
$modal-close-transform: rotate(45deg);

// TABLES
$table-border: none;
$border-collapse: collapse;
$tr-border: 1px solid $light-gray;
$td-border: none;
$tr-bg: $light-gray;
$td-padding: 5px;
$table-font: $copy-font;
$table-font-size: $copy-font-size;

//UNIVERSAL
$main-overflow: hidden;
$section-padding-desktop: 2rem 0;
$section-padding-mobile: 1rem 0;

@import 'timequake/index';