// Variables

// Colors
$hover-button-color: zass-darken($brand_color, 20%);
$secondary-text-color: zass-lighten($text_color, 20%);

$primary-shade: zass-darken($background_color, 3%); //#f8f8f8 for the default background_color
$secondary-shade: zass-darken($background_color, 5%); //#f2f2f2 for the default background_color

$font-size-bigger: 16px;
$font-size-base: 15px;
$font-size-navigation: 14px;
$font-size-small: 13px;
$font-size-smaller: 11px;

$high-contrast-border-color: #87929D; // maintains a 3:1 contrast ratio with default background color (#FFF). Use for controls and inputs
$low-contrast-border-color: #ddd; // less than 3:1 contrast ratio with default background color. Use for elements that do not require user interaction
$menu-border-color: #d8dcde;

$button-color: $brand_color;

$input-font-size: 14px;
$field-text-color: #666;
$field-text-focus-color: #555;

// Breakpoints variables
$tablet-width: 768px;
$desktop-width: 1024px;
$max-width-container: 1160px;

$font-weight-semibold: 600;

// Transitions
$input-transition: border .12s ease-in-out;