$font: 'ProximaNova', sans-serif;
$phone-width   : 400px;
$tablet-width  : 768px;
$desktop-width : 1024px;

$pageBackground: #f5f7fa;
$bodyBackground: #f5f7fa;
$primaryColor: #007cf6;
$blockBorderColor: #ebeef6;
$blockBackground: #fff;
$primaryTextColor: #4a4a4a;

// Colors
$white: #fff;
$black: #000;

/*
color tones:
- x-dark
- dark *
- mid-dark
- base (default)
- mid-light
- light *
- x-light
*/


$colors: (
  purple: (
    base     : #bd10e0,
    light    : #fcebff,
    dark     : #7800f2
  ),
  red: (
    base     : #d7263d
  ),
  blue: (
    base     : #007cf6,
    light    : #2690f8,
    x-light  : #bfdffd,
    xx-light : #e6f3ff,
    dark   : #001de1,
    lighter  : #73b8fb,
  ),
  cyan: (
    base     : #23b5d3,
    dark     : #00abe4,
    light    : #eefcfe
  ),
  green: (
    base     : #3ea95e,
    light    : #97cc04,
    dark     : #23d349
  ),
  black: (
    base     : #000
  ),
  grey: (
    dark     : #333,
    base     : #2b333b,
    light    : #4b5158,
    mid-light: #6a7075,
    lighter  : #8b8f93,
    x-light  : #aaadb1,
    xx-light : #caccce,
    xxx-light: #e9eaeb,
    white    : #fff
  ),
  yellow: (
    base     : #f5d908
  ),
  orange: (
    base     : #ffa800,
    dark     : #e57000,
    light    : #fff4de
  ),
  white: (
    base     : #fff
  ),
  pink: (
    base     : #ff6072
  ),
  indigo:(
    base     :#3800a7,
    xxx-light: #6886C5,
  ),
  transparent: (
    base    : transparent
  ),
  turquoise: (
    base: #50e3c2
  )
);

$size-1: 32px;
$size-2: 21px;
$size-3: 18px;
$size-4: 16px;
$size-5: 14px;
$size-6: 13px;
$size-7: 11px;
$size-8: 9px;

$u-spacings: (
  xxxl: 6.4rem,
  xxl : 4.8rem,
  xl  : 3.2rem,
  l   : 2.4rem,
  m   : 1.6rem,
  s   : 0.8rem,
  xs  : 0.4rem,
  xxs : 0.2rem,
  0   : 0
) !default;

$u-font-size: (
  1: 3.2rem,
  2: 2.1rem,
  3: 1.8rem,
  4: 1.6rem,
  5: 1.4rem,
  6: 1.3rem,
  7: 1.1rem,
  8: 0.9rem
) !default;

$u-border-radius: (
  xs: 2px,
  s: 4px,
  m: 6px,
  l: 8px,
  xl:10px
);

$screen-sizes: (
  xs: 576px,
  sm: 768px,
  md: 992px,
  lg: 1500px
);