$normalSize: 1em; /*13px;*/
$darkGray: #1a1a1a;
$gray: #5B5B5B;
$content_gray: #9f9f9f;
$lightGray: #4e4e4e;
$textGray: #706f6f;
$orange: #e67e22;

$themeColors:
  'blue' #28cdfb,
  'brown' #736357,
  'dark' #34495e,
  'liliac' #7b0046,
  'navy' #005b7f,
  'pink' #fcb4e6,
  'purple' #8562a3,
  'red' #ff4351,
  'yellow' #feae1b;

$contentBox:
  'blue' #28cdfb,
  'green' #736357,
  'dark' #34495e,
  'teal' #005b7f,
  'purple' #8562a3,
  'red' #ff4351;
$lightContentBox:
  'orange' #feae1b,
  'note' #fffcd5,
  'light' #f7f7f7;

//button colors: button name, border, inner shadow, gradient top, gradient middle, gradient bottom;
$buttonColors:
  'blue' #0f3f8d #8097ee #5973ca #3258aa #0f3f8d,
  'dark' #5b5b5b #a6a6a6 #7e7e7e #6e6e6e #5b5b5b,
  'green' #107a49 #66c18a #50ac77 #319360 #107a49,
  'light' #e8e8e8 #fdfdfd #f9f9f9 #f1f1f1 #e8e8e8,
  'purple' #855ea2 #dfb4ef #ae86cd #9a72b8 #855ea2,
  'red' #7a0048 #e06fa2 #ae4176 #962360 #7a0048,
  'orange' #fbb128 #ffe861 #ffda54 #fdc841 #fbb128,
  'teal' #18597d #679dc6 #457da4 #306c92 #18597d;

$buttonHover:
  'blue' #0f3f8d #849bf2 #6780d8 #3b60b3 #0f3f8d,
  'dark' #5b5b5b #acacac #929292 #797979 #5b5b5b,
  'green' #107a49 #6bc68f #61bc86 #3b9d69 #107a49,
  'light' #e8e8e8 #ffffff #ffffff #f3f3f3 #e8e8e8,
  'purple' #855ea2 #e3b8f3 #bc93db #a179bf #855ea2,
  'red' #7a0048 #e977aa #c8598d #a22d6b #7b0149,
  'orange' #fbb128 #ffec66 #ffe55f #fdcf47 #fbb128,
  'teal' #18597d #6ea4cd #5b91ba #3a769c #18597d;

$buttonActive:
  'blue' #0f3f8d #6785d9 #10408e #345aac #5873c9,
  'dark' #5b5b5b #9a9a9a #5b5b5b #6e6e6e #7e7e7e,
  'green' #107a49 #50b07b #117b4a #319360 #50ac77,
  'light' #e8e8e8 #f7f7f7 #e8e8e8 #f1f1f1 #f9f9f9,
  'purple' #855ea2 #d1a6e0 #855ea2 #9c74ba #9c74ba,
  'red' #7a0048 #ce5993 #7b0149 #962360 #ae4176,
  'orange' #fbb128 #fedb53 #fbb129 #fdc63e #ffda54,
  'teal' #18597d #5891b9 #19597d #2e6a90 #457da4;

//ribbon focus areas: gradient top, gradient middle top, gradient middle bottom, gradient bottom, text-shadow, border-bottom, color
$ribbonFocus:
  'blue' #edf4fd #f5f8fc #f5f8fc #edf4fd #b9b9b9 #ebf2fe #cadced,
  'green' #effaf2 #f8fefa #f8fef9 #eefaf2 #b9b9b9 #e4f4e9 #ccedd6,
  'green' #effaf2 #f8fefa #f8fef9 #eefaf2 #b9b9b9 #e4f4e9 #ccedd6,
  'red' #fef1f9 #fff9fd #fff9fc #fef1f9 #b9b9b9 #eaccde #f8e3ef,
  'purple' #f7effc #fcf7ff #fbf7ff #f7effc #b9b9b9 #ddc7e9 #f5e7f9,
  'teal' #edf6fb #f7fcfe #f7fbfe #ecf6fb #b9b9b9 #d8e9f2 #e3eff5,
  'orange' #fffbef #fffdf7 #fffdf7 #fffbef #c0b08b #f4e3bc #f8f3d8;

$ribbonFocusHover:
   'blue' #10408d #1f4f9c #1f4e9b #0f3f8d #b5b5b5 #4b6776 #ffffff,
   'green' #117a49 #1f8556 #1f8455 #107a49 #b5b5b5 #486e5c #ffffff,
   'red' #7a0048 #870d55 #860d54 #7a0048 #b5b5b5 #624054 #ffffff,
   'purple' #865fa2 #9570b1 #946fb0 #855ea2 #b5b5b5 #745e83 #ffffff,
   'teal' #195a7e #28698c #27688c #18597d #b5b5b5 #475f6d #ffffff,
   'orange' #fbb22a #f7c364 #f7c363 #fbb22a #c0b08b #d7b377 #ffffff;

//regular focus areas: background-color
$focusAreaColor:
   'blue' #0f3f8d,
   'dark' #2b2b2b,
   'light' #e8e8e8,
   'green' #107a49,
   'red' #7a0048,
   'purple' #855ea2,
   'orange' #fbb128,
   'teal' #18597d;

$widgetColors:
  'blue' #2980b9 #1d5981,
  'dark' #5b5b5b #a6a6a6,
  'green' #27ae60 #1b7943,
  'light' #e8e8e8 #fdfdfd,
  'purple' #8e44ad #632f79,
  'red' #7a0048 #e06fa2,
  'orange' #fbb128 #ffe861,
  'teal' #18597d #679dc6;

$color-pallete:
'blue' #0f3f8d #5772c9 #8097ee,
'dark' #5b5b5b #7c7c7c #a6a6a6,
'green' #107a49 #4fab76 #66c18a,
'light' #e8e8e8 #f9f9f9 #ffffff,
'purple' #855ea2 #ad85cb #dfb4ef,
'red' #7a0048 #ad3f75 #e06fa2,
'orange' #fbb128 #ffd953 #ffe861,
'teal' #18597d #447ca3 #679dc6;