$colors: (blue-1: #ECF6F9,
    blue-2: #C2E6ED,
    blue-3: #90D4DD,
    blue-4: #5BC6D1,
    blue-5: #079DAD,
    blue-6: #048390,
    blue-7: #106673,
    blue-8: #094650,
    blue-9: #04353E,
    green-1: #F0F6EA,
    green-2: #DBECCD,
    green-3: #AED696,
    green-4: #7EC365,
    green-5: #58A546,
    green-6: #3F7E3C,
    green-7: #2D6330,
    green-8: #274A22,
    green-9: #1E371A,
    red-1: #FFF6F4,
    red-2: #FBD4CD,
    red-3: #F7A595,
    red-4: #ED6751,
    red-5: #E33D25,
    red-6: #891F1B,
    red-7: #6A251B,
    red-8: #351813,
    red-9: #220F0C,
    yellow-1: #FDF9D1,
    yellow-2: #FCF5AD,
    yellow-3: #FDF18C,
    yellow-4: #FAE958,
    yellow-5: #EDCB18,
    yellow-6: #CF972A,
    yellow-7: #BE7629,
    yellow-8: #81461E,
    yellow-9: #3A210F,
    grey-1: #F8F7F2,
    grey-2: #E7E9E4,
    grey-3: #C7CBC6,
    grey-4: #959B98,
    grey-5: #7A7F7D,
    grey-6: #565D5D,
    grey-7: #45474C,
    grey-8: #333239,
    grey-9: #212127,
);

$white: #FFFFFF;
$lightgrey: color('grey', 1);
$grey: color('grey', 5);
$darkgrey: color('grey', 8);
$black: #000000;

//blues
$blue: color('blue');
$lightblue: color('blue', 1);
$darkblue: color('blue', 8);
$accentblue: color('blue', 4);

//greens
$green: color('green');
$lightgreen: color('green', 1);
$darkgreen: color('green', 8);
$accentgreen: color('green', 4);

//reds
$red: color('red');
$lightred: color('red', 1);
$darkred: color('red', 8);
$accentred: color('red', 4);

//yellow
$yellow: color('yellow');
$lightyellow: color('yellow', 1);
$darkyellow: color('yellow', 8);
$accentyellow: color('yellow', 4);

$twitterblue: #39a1f3;
$facebookblue: #3b5998;

$button_colors: (
    'blue': $blue,
    'green': $green,
    'red': $red,
    'yellow': $yellow,
    'grey': $grey,
    'lightgrey': $lightgrey,
    'darkgrey': $darkgrey
);

$social-colors: (
    twitter: $twitterblue,
    facebook: $facebookblue
);

$btn_fontsize: 18px;
$hvrper: 20%;

// Breakpoints
$mobile: 736px;
$desktop: 737px;

// Column layout variables
$col_num: 12;
$col_gutter: 30px;
$col_padding: $col_gutter * 0.3;
$col_margin: $col_gutter * 0.2;

:root {
   // light theme
   --tisc-bg-primary:       #F8F7F1;
   --tisc-bg-secondary:     #FFFFFF;
   --tisc-bg-third:         #E6E9E4;

   --tisc-text-primary:     #1E2937;
   --tisc-text-secondary:   #374151;
   --tisc-text-third:       #079DAD;

   --tisc-primary:          #079DAD;
   --tisc-primary-darken:   #048390;
   --tisc-primary-lighten:  #5BC6D1;

   --tisc-hover-primary:    #EBEAE6;
   --tisc-hover-secondary:  #F3F4F6;
   --tisc-hover-third:      #D7DAD5;   

   --tisc-border-primary:   #E5E7EB;
   --tisc-border-secondary: #d5d5d5;

   --tisc-box-shadow:       #c7cbc6;

   --tisc-overlay:          #094650;

   --tisc-disabled:         #E7E9E4;

   --tisc-placeholder:      #A7A7A7;

   --tisc-table-header:     #E6E9E4;  
   --tisc-table-primary:    #F8F7F1;  
   --tisc-table-secondary:  #FFFFFF;  

   --tisc-input:            #FFFFFF;

   // dark theme  
   &.dark-theme {
      --tisc-bg-primary:       #374151;
      --tisc-bg-secondary:     #101827;
      --tisc-bg-third:         #1E2937;
   
      --tisc-text-primary:     #F8F7F2;
      --tisc-text-secondary:   #9CA3AF;
      --tisc-text-third:       #5BC6D1;
   
      --tisc-hover-primary:    #2E3745;
      --tisc-hover-secondary:  #0C121E;
      --tisc-hover-third:      #1A2431;   
   
      --tisc-border-primary:   #4C5563;
      --tisc-border-secondary: #1E2937;
   
      --tisc-box-shadow:       #000000;
   
      --tisc-overlay:          #5BC6D1;
   
      --tisc-disabled:         #2E3238;
   
      --tisc-table-header:     #101827;  
      --tisc-table-primary:    #1E2937;  
      --tisc-table-secondary:  #374151; 

      --tisc-input: #374151;
   }  
 }