// colors
$color-palette: (
  primary: #E83166,
  accent: #D3F734
)!default;

$dark-color-palette: (
  primary: darken(primary-color(), 30%),
  accent: darken(accent-color(), 40%)
)!default;

$light-color-palette: (
  primary: lighten(primary-color(), 30%),
  accent: lighten(accent-color(), 40%)
)!default;

$gray-palette: (
  lighter-gray: #f6faff,
  light-gray: #efefef,
  normal-gray: #999da6,
  dark-gray: #5d6068,
  darker-gray: #1d2027
)!default;

$system-palette: (
  success: #43ac6a,
  error: #b00020,
  warning: #CC3300,
  white: #fff,
  black: #000
)!default;

// spacing
$space-unit: 1em!default;
$spaces: (
  x-small: 0.25,
  small: 0.5,
  normal: 0.75,
  large: 1,
  x-large: 2.25
)!default;

// shadows
$shadows: (
  '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
  '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',
  '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
  '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)',
  '0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22)'
)!default;

$link-color: #0066CC!default;
$link-color-visited: #660099!default;
$link-color-hover: primary-color()!default;

// grid and layout
$grid-size: 12!default;
$grid-gap: 1rem!default;

$site-width: 1000px!default;
$site-background: almost-white(gray(lighter))!default;
$site-padding: space(small)!default;

// typografy
$font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif!default;
$font-color: #605f5f!default;
$font-white-color: #fff!default;
$base-line-height: 1.2em!default;

$font-size: 1rem!default;
$small-font: .9rem!default;
$large-font: 1.125em!default;

// weights
$font-weight-normal: 400!default;
$font-weight-bold: 600!default;

$header-sizes: (
  3rem,
  2rem,
  1.3rem,
  1.313rem,
  1.125rem,
  1rem
)!default;

$mobile-header-sizes: (
  2rem,
  1.5rem,
  1.3rem,
  1.2rem,
  1rem,
  1rem
)!default;

$header-colors: (
  $font-color,
  $font-color,
  $font-color,
  $font-color,
  $font-color,
  $font-color
)!default;

// breakpoints
$mobile-media-query: "(min-device-width : 0px) and (max-device-width : 599px)"!default;
$tablet-media-query: "(min-device-width : 600px) and (max-device-width : 1023px)"!default;
$computer-media-query: "(min-device-width : 1024px)"!default;

// topbar
$header-background: #ffffff!default;
$header-padding: space(small)!default;

// button
$button-background: primary-color()!default;

// menu
$menu-background: #fff!default;
$menu-active-color: primary-color()!default;
$menu-font-color: $font-color!default;

//topbar & footer
$header-footer-font-color: gray(dark)!default;

// forms
$form-input-border-radius: 4px!default;
$form-input-border-color: gray(dark)!default;
$form-input-border-color-active: primary-color()!default;
$form-input-border-width: 1px!default;
$form-input-height: 2.5rem!default;
$form-input-rounded: 3.5rem!default;
$form-input-padding: .5em!default;
$form-row-spacing: space(large)!default;
$radio-size: 1rem!default;
$radio-checked-size: 0.5rem!default;

$disabled-background-color: transparent!default;
$disabled-border-color: gray(normal)!default;
$disabled-font-color: gray(normal)!default;

// footer
$footer-background: gray(light)!default;

// icons
$icon-size: 1.3rem!default;
$enabled-icons: ('menu', 'close', 'search')!default;

// box
$box-border-radius: 5px!default;
$box-background: system-color(white)!default;
$box-max-width: none!default;

// tabs
$tabs-background: gray(light)!default;
$tab-active-border-color: primary-color()!default;
$tab-active-font-color: primary-color()!default;

// accordion
$accordion-title-border: 1px solid gray(normal)!default;
$accordion-icon-color: $font-color!default;
$accordion-width: 50%!default;